CSS盒子模型(Box Model)
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容
Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
Border(邊框) - 圍繞在內邊距和內容外的邊框。
Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
Content(內容) - 盒子的內容，顯示文本和圖像。
- 最終元素的總寬度計算公式：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
- 元素的總高度最終計算公式：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
CSS 邊框屬性
CSS邊框屬性允許你指定一個元素邊框的樣式和顏色
邊框樣式
border-style屬性用來定義邊框的樣式
邊框寬度
通過 border-width 屬性為邊框指定寬度
指定寬度的兩種方法：
指定長度值，比如 2px 或 0.1em(單位為 px, pt, cm, em 等)
使用 3 個關鍵字之一，它們分別是 thick 、medium（默認值） 和 thin
注意：CSS 沒有定義 3 個關鍵字的具體寬度，所以一個用戶可能把 thick 、medium 和 thin 分別設置為等于 5px、3px 和 2px，而另一個用戶則分別設置為 3px、2px 和 1px。
邊框顏色
border-color屬性用于設置邊框的顏色
name - 指定顏色的名稱，如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
Hex - 指定16進制值, 如 "#ff0000"
注意： border-color單獨使用是不起作用的，必須得先使用border-style來設置邊框樣式。
例子：
邊框-單獨設置各邊
border-style屬性可以有1-4個值：
border-style:dotted solid double dashed;
上邊框 dotted
右邊框 solid
底邊框 double
左邊框 dashed
border-style:dotted solid double;
上邊框 dotted
左、右邊框 solid
底邊框 double
border-style:dotted solid;
上、底邊框 dotted
右、左邊框 solid
border-style:dotted;
- 四面邊框是 dotted
border-style可以和border-width 、 border-color一起使用。
簡寫屬性
border-width
border-style (required)
border-color
例子：border:5px solid red;
margin(外邊距)
margin 清除周圍的（外邊框）元素區域。
margin 沒有背景顏色，是完全透明的。
margin 可以單獨改變元素的上，下，左，右邊距，也可以一次改變所有的屬性。
值：
Margin - 單邊外邊距屬性
可以指定不同側面的邊距
簡寫
邊距的屬性：
padding（填充）
它是一個簡寫屬性，定義元素邊框與元素內容之間的空間，即上下左右的內邊距。
可能取的值：
側面填充：padding-top、padding-bottom、padding-right、padding-left
簡寫屬性：
CSS Position(定位)
該屬性指定元素的定位類型。
position的五個值：
-
static（靜態定位）
HTML 元素的默認值(沒有定位)，遵循正常的文檔流對象。不會受到 top, bottom, left, right影響。
-
relative
相對定位元素的定位是相對其正常位置。
移動相對定位元素，但它原本所占的空間不會改變。
相對定位元素經常被用來作為絕對定位元素的容器塊。
其實就是相對原來的位置來移動，不以左上角為圓點的位置進行移動，而以自身的位置來進行移動。
-
fixed
位置相對于瀏覽器窗口是固定位置，即窗口是滾動的它也不會移動。
該屬性定位的元素的位置與文檔流無關（不占據空間，主要是以其自己的空間進行排布）
定位的元素和其他元素重疊（可以理解為不在同一面上，因此元素間會重疊起來）
-
absolute
絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于<html>
absolute 定位使元素的位置與文檔流無關，因此不占據空間。
absolute 定位的元素和其他元素重疊。
-
sticky(粘性定位)
基于用戶的滾動位置來定位。(在 position:relative 與 position:fixed 定位之間切換)
當頁面滾動超出目標區域時，它的表現就像 position:fixed;，它會固定在目標位置。
指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位(relative)相同。
重疊的元素
z-index屬性指定了一個元素的堆疊順序，順序可以為正為負。
具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。
CSS Float(浮動)
該屬性會使元素向左或向右移動，其周圍的元素也會重新排列。
一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。附近的元素將圍繞它（文本流將環繞在它浮動相反方向處）
把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。
清除浮動（clear）
使用該屬性為了避免周圍元素會重新排列，clear屬性指定元素兩側不能出現浮動元素（clear:both）其他的值left、right、both、none、inherit
資料：CSS
