一、CSS盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用。

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。

盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

下面的圖片說明了盒子模型(Box Model)：

• Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
• Border(邊框) - 圍繞在內邊距和內容外的邊框。
• Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
• Content(內容) - 盒子的內容，顯示文字和影象。

二、網頁佈局與盒子模型

1，標準文件流

標準文件流：指在不使用其他與排列和定位相關的特殊 CSS 規則時，各種元素的排列規則；

2，塊級元素 VS 行內元素

塊級元素：以一個塊的形式展現，跟同級的兄弟塊依次豎直排列，左右撐滿，比如<div>； 行內元素：以普通的一個 DOM 節點展現，跟同級的兄弟元素橫向排列，排滿後，自動換行，比如<span>；

三、盒子再標準流中的定位

1，行內元素之間的水平 margin

       marin-right+margin-left

2，塊級元素之間的豎直 margin

       Margin-bottommargin-top 以大的為標準

3，巢狀盒子之間的 margin

      子塊的 margin 將以父塊的內容為參考

4，margin 屬性可以設定成負值

四、盒子的浮動與定位

1，盒子浮動 float

Float 屬性： 預設是 none ，按照標準流來定位；

Left：左懸浮；

Right：右懸浮；

2，使用 clear 清除浮動的影響

Clear 屬性： 預設是 none，允許兩邊都可以有浮動物件；

Left： 不允許左邊有浮動物件

Right：不允許右邊有浮動物件

Both：不允許有浮動物件

3，盒子定位 position

Position 屬性： 預設是 static，按照標準流來定位；

Relative：相對定位，相對於原本的標準位置偏移指定的距離；

Absolute：絕對定位，以它的包含框為基準進行偏移；（包含框是指含有posistion屬性的盒子）

Fixed：固定定位，以瀏覽器視窗為基準進行定位

4，z-index 空間位置

Z-index 空間位置，預設是 0，z-index 值大的頁面位於其值小的上方；

5，盒子 display 屬性

Display： Inline：把元素變成內聯元素；

Block：把元素變成塊級元素