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