一、網頁可以看成是盒子模型構造而成，這個盒子模型構造結構如圖所示：

• Content：內容區。
• padding：內容與盒子裡面的邊距。
• border：邊框。
• margin：整個盒子的外殼，盒子與外部的邊距，若是兩個盒子，則是盒子與盒子之間的邊距。
• 若 padding：1px 2px 3px 4px ;則依次是top，right，bottom，left四個方向，以順時針方式排序。
• 塊狀元素可以設定寬高，如div，內聯元素不可以，如span。
• 類修飾元素：p.ex{
width:50px;
height:50px;
  dsa}
  ...............................
  
  <p class="ex">。。。。。。。。。。。。。。。</p>
  如圖：
  

二、畫圓 border-radius

div{
			border: solid red 1px;
				width: 150px;
			height: 150px;
			border-radius：100px；
			}

或者`

div{
			border: solid red 1px;
			
			width: 150px;
		height: 150px;

		/*畫圓*/
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
	}`
 

效果如圖：

三、box-shadow(盒子陰影)

box-shadow: 10px 10px 50px red;

1. 第一個10px是表示陰影的X軸。
2. 第二個10px是表示陰影的Y軸。
3. 50px是表示陰影的濃淡程度。
4. red是表示陰影的顏色。

如圖所示：

• 注意：不同的瀏覽器會給盒子內部的元素設定預設的margin和padding，從而導致有時候我們的內容與外部有一定的距離。，所以有時候需要自己修改margin和padding。我們可以把margin和padding設定成我們想要的寬高。，如下面的程式碼：

<style type="text/css">
	*{
		margin: 0px;
		padding: 0px;
	}
		
	</style>
</head>
 

1. 我們運用上面的程式碼將網頁中所有的margin和padding設定成0px。
2. * 表示所有的，這裡表示所有的margin和padding。

四、背景色填充

• 我們在做div盒子，在給盒子填充顏色時，預設是將除margin外都填充顏色，這樣有時候是我們所不需要的，如下圖：
• 我們可以修改樣式，使顏色填充到我們想要填充的地方，如圖我們只想要顏色填充到內容部分，我們可以在div標籤選擇器裡面增加程式碼 background-clip: content-box;如圖所示：填充的綠色只填充到了盒子的內容部分
• 如果我們還想使顏色填充到padding部分，則可以增加程式碼 background-clip: padding-box; 如圖所示：
  
• 還可以繼續對border進行填充顏色，增加程式碼 `background-clip: border-box;

`五、背景圖片定位 background-origin

• background-origin:規定背景圖片的定位區域，它的屬性也有border-box、padding-box、content-box 這3種屬性，但要注意他的描述是“背景圖片”，也就是說它只能對背景做樣式上的操作，它相當於positon,規定了圖片開始繪製的的區域，也就是它只相當於規定圖片的左上角從什麼地方開始，其他的它就不負責了；