盒子模型規定了元素框處理元素內容、內邊框、邊框和外邊距的方式
![]()
![]()
一個div的總寬度爲width+padding(左)+padding(右)+border(左)+border(右)+margin(左)+margin(右)
padding內邊距（填充）（裏面的值按順時針）
padding: 10px（表示四邊的內邊距都爲10px）
padding: 10px 20px;（表示上邊距和下邊距爲10px，左邊距和右邊距爲20px）
padding：10px 20px 30px（表示上邊距爲10px，右邊距爲20px，下邊距爲30px，左邊距爲20px）
padding: 1px 2px 3px 4px（指定四邊的值）
也可以對四個方向的內邊距單獨控制
padding-top、padding-right、padding-bottom、padding-left
border邊框
border-style樣式
border-color顏色（透明顏色：transparent）
border-width:邊框的寬度
簡寫：border：大小 樣式 顏色
可以對四邊當獨設置
margin（外邊距）
圍繞在元素邊框的空白區域是外邊距。設置外邊距會在元素外創建額外的“空白”
裏面的設置與padding相識
margin中的auto用法表示取計算機的值
如塊級元素居左
margin: 0px auto 0px 0px
塊級元素居中
margin:auto auto
外邊距合併
當"兩個"垂直外邊距相遇時，它們將形成"一個"外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度
中的較大者如：
當一個元素包含在另一個元素中時（條件：父元素沒有內邊距或邊框），它們的上和/或下外邊距也會發生合併如：
定位（position）
定位的基本思想很簡單，它允許我們定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器窗口本身的位置。
div、h1 或 p 元素常常被稱爲塊級元素。這意味着這些元素顯示爲一塊內容，即“塊框”。與之相反，span和
strong 等元素稱爲“行內元素”，這是因爲它們的內容顯示在行中，即“行內框”。
用 display 屬性改變生成的框的類型
display 屬性設置爲 block，可以讓行內元素變成塊級元素
把 display 設置爲 none，用於隱藏元素
CSS 有三種基本的定位機制：普通流（默認）、相對定位和絕對定位。
static 默認
relative 相對定位
元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。
absolute 絕對定位
元素框從文檔流完全刪除，並相對於其包含塊定位。元素原先在正常文檔流中所佔的空間會關閉，就好像元素原來
不存在一樣。元素定位後變成一個塊級元素
相對定位
設置爲相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所佔的空間仍保留。
top、left、right、bottom（可以是數值、百分數）
絕對定位
使用了絕對定位的元素以它最近的一個“已經定位”的“祖先元素”爲基準進行偏移。如果沒有已經定位的祖先元素、
那麼會以瀏覽器窗口爲基準進行定位
絕對定位的元素從標準文檔流中脫離，這意味着它們對其他元素的定位不會造成影響
設置了絕對定位但沒有設置偏移量的元素將保持在原來的位置
偏移設置left、right、top、bottom可以爲數字或百分比
z-index（面對自已爲正）
調整元素定位時重疊層的上下位置
z-index屬性值：整數，默認值爲0
設置了positon屬性爲absolute時，z-index屬性可以設置各元素之間的重疊高低關係。
z-index值大的層位於其值小的層上方