CSS

CSS盒子模型(Box Model)

CSS盒模型本質上是一個盒子,封裝周圍的HTML元素,它包括:邊距,邊框,填充,和實際內容

  • Margin(外邊距) - 清除邊框外的區域,外邊距是透明的。

  • Border(邊框) - 圍繞在內邊距和內容外的邊框。

  • Padding(內邊距) - 清除內容周圍的區域,內邊距是透明的。

  • Content(內容) - 盒子的內容,顯示文本和圖像。

  • 最終元素的總寬度計算公式:

總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

  • 元素的總高度最終計算公式:

總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距

CSS 邊框屬性

CSS邊框屬性允許你指定一個元素邊框的樣式和顏色

邊框樣式

border-style屬性用來定義邊框的樣式

邊框寬度

通過 border-width 屬性為邊框指定寬度

指定寬度的兩種方法:

  1. 指定長度值,比如 2px 或 0.1em(單位為 px, pt, cm, em 等)

  2. 使用 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:relativeposition:fixed 定位之間切換)

    當頁面滾動超出目標區域時,它的表現就像 position:fixed;,它會固定在目標位置。

    指定 top, right, bottom 或 left 四個閾值其中之一,才可使粘性定位生效。否則其行為與相對定位(relative)相同。

重疊的元素

z-index屬性指定了一個元素的堆疊順序,順序可以為正為負。

具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。

CSS Float(浮動)

該屬性會使元素向左或向右移動,其周圍的元素也會重新排列。

一個浮動元素會盡量向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。附近的元素將圍繞它(文本流將環繞在它浮動相反方向處)

把幾個浮動的元素放到一起,如果有空間的話,它們將彼此相鄰。

清除浮動(clear)

使用該屬性為了避免周圍元素會重新排列,clear屬性指定元素兩側不能出現浮動元素(clear:both)其他的值left、right、both、none、inherit

資料:CSS

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。