盒子模型
什麼是盒子模型
所有的HTML元素都可以看成是一個盒子，在CSS中利用盒子模型進行設計和佈局。
盒子模型和屬性
- Margin(外邊距) - 邊框外的區域。
- Border(邊框) - 圍繞在內邊距和內容外的邊框。
- Padding(內邊距) - 內容周圍的區域。
- Content(內容) - 盒子的內容，包括文本、圖像等。
CSS浮動
什麼是標準文檔流
根據塊元素或行內元素的特性按從上到下，從左到右的方式自然排列。這也是元素的默認排列方式。
CSS使用float屬性設置元素浮動
- float(浮動)
- left
- right
- none
- clear（清除浮動）
- left
- right
- both
- none
CSS定位
什麼是css的定位
通過使用 position 屬性對元素進行定位
div {
<!--設置div元素的定位模式：絕對定位-->
position:absolute;
<!--設置偏移量：向右偏移20px-->
right:20px;
}
定位的分類
- static(默認定位)
- relative(相對定位)
- absolute(絕對定位)
- fixed(固定定位)
定位的詳細介紹
static(默認定位)
- 位置
- 默認位置
- 說明
- 按默認位置出現在標準文檔流中
relative(相對定位)
- 位置
- top(頂部)
- left(左側)
- right(右側)
- bottom(底部)
- 說明
- 盒子元素會相對它原來的位置，通過移動指定的偏移量而達到新的位置。
- 盒子元素仍在標準文檔流中（原來位置會被保存下來，不會消失），它對父級盒子與相鄰盒子沒有影響。
- 使用場景
- 很少單獨使用，一般都是配合絕對定位創造定位父級元素而又不進行實際偏移。
absolute(絕對定位)
- 位置
- top(頂部)
- left(左側)
- right(右側)
- bottom(底部)
- 說明
- 盒子元素會以離它最近的一個已經定位的‘祖先元素’爲基準位置，通過指定的偏移量而達到新的位置。
- 如果其沒有‘祖先元素’，則會以瀏覽器窗口作爲基準位置。
- 盒子元素脫離標準文檔流（原來的位置消失），通過設置z-index的層級值可以覆蓋其他元素。
- 使用場景
- 一般用在下拉菜單、輪播圖、彈出框等。
fixed(固定定位)
-
位置
- top(頂部)
- left(左側)
- right(右側)
- bottom(底部)
-
說明
- 與絕對定位類似，盒子元素以瀏覽器窗口作爲基準位置進行定位。
-
使用場景
- 一般用固定框、吸頂導航、回到頂部圖標、廣告等。