css盒子模型

標籤：

盒子模型 (block, inline-block)
提示：display屬性可以調整元素為行內，塊級或行內塊級
w3c盒子模型的content不包含邊框和padding
(1)content (width,height)
(2)border 邊框
(3)padding 內邊距
(4)margin 外邊距
注意：外邊距合并，當相鄰的元素都具備非零的margin屬性時，
相鄰的邊，外邊距會重合，取值為較大的一個。

*(5) outline （部分元素）

*(6) display: (inline, block, inline-block)

6.定位與層疊
(1).絕對位置
a.絕對位置的元素，不再受文檔流影響，也不會影響其它相鄰元素影響
b.top,left屬性，相對於非靜態定位的容器左上方為座標原點位移,不受容器的padding影響

(2).相對定位
top,left屬性,相對於元素本來應該出現的位置位移
(3).z-index屬性:控制層疊,只在position為非靜態定位時有效

7.浮動 float
(1)浮動的區塊層級元素會脫離預設的文檔流
(2)清除浮動 clear
如果要使用浮動讓區塊層級元素橫向排列，一定要加確定寬度的容器或給容器指定最小寬度

* 書寫樣式的思路，規範：
1.把頁面結構看成盒子套盒子，各種盒子模型的集合
2.從外到內，從上到下，從左至右

css盒子模型