盒子模型：所有頁面中的元素都可以看成是一個盒子，佔據着一定的頁面空間，一般來說這些被佔據的空間都要比單純的內容要大。如何讓元素進行位置的調整，其實就是通過調整盒子的邊框和距離等參數來調整盒子的位置
盒子包括：content（內容）、border（邊框）、padding（間隙）、margin（間隔）。
盒子模型的高度=content+padding+border+margin
1.border：一般用於分離元素 ，border的外圍即爲元素的最外圍，因此計算元素的寬和高的時候就要將border納入
屬性（有三個）：color（他的設置方法與文字的屬性完全一樣），width（border的粗細程度thin、medium、thick、<length>），style（樣式）。
style屬性：none、hidden、dotted、dashed、solid、double、groove、ridge、inset和outset。其中none和hidden都是不顯示border，二者的效果相同，只是運用在表格中是，hidden可以解決邊框的衝突問題。
2.padding：用於控制content與border之間的距離，在瀏覽器中使用width或height屬性指定了父塊的寬或高，由於width和height的值中包含padding，那麼content就會受到padding的擠壓。（top、right、bottom、left）
3.margin：指的是元素與元素間的距離，用於控制塊與塊之間的距離。
（1）行內元素之間的margin = margin-right + margin-left
（2）塊級元素之間的margin = 兩者中較大者
（3）父子關係（一個div在另一個div內部）：子塊的margin將以父塊的content爲參考
元素的定位
元素在網頁中都必須有自己合理的位置，才能搭建出整個頁面的結構。css定位的幾種原理方法（position、float、z-index）
1.float定位：是css排版中非常的重要，屬性float的值很簡單，可以設置爲left、right、none。當我們設置了向左向右浮動的時候，元素會向其父元素的左側或右側靠近。
2.position定位：指定塊的位置，即塊相對於父塊的位置和相對於它自身應該在的位置，它的屬性值有（static、absolute、relative、fixed）。
3.z-index屬性：用於調整定位時重疊塊的上下位置，與它的名稱一樣，想象頁面爲x-y軸，垂直於頁面的方向爲z軸，z-index值大的頁面位於其值小的上方。它的屬性值爲整數，可以是負數也可以是正數。