盒模型屬性

2021-10-03 02:49:17 字數 1901 閱讀 9734

邊框(border)、邊界/邊距(margin)、補白/填充(padding)、內容區(content)
1、邊框(border)

1、border:盒子的邊緣。

2、用法:

1、邊框的寫法:

divborder-width:邊框的寬度

border-color:邊框的顏色

border-style:邊框的樣式

邊框樣式的屬性值:solid(實線)、dashed(虛線)、dotted(點劃線)、double(雙實線)、none(去掉邊框)

2、邊框的複合式寫法:

div例如div

注:border複合式寫法屬性值之間用空格隔開,三個屬性值順序必須是寬度、樣式、顏色。

2、邊距(margin)

1、margin:元素外邊的空白區域。

2、margin的作用:控制同輩元素之間的位置關係。

3、特點:margin是在元素邊框以外的空白區域。

4、使用方法:

1)margin寫法:

divmargin-top:上外邊距

margin-right:右外邊距

margin-bottom:下外邊距

margin-left:左外邊距

2)margin的複合式寫法:

margin

當margin的屬性值為四個值時,屬性值的意思分別是:上邊距、右邊距、下邊距、左邊距。

margin

當屬性值為三個值時,屬性值的意思分別是:上邊距、左右邊距、下邊距。

margin

當屬性值為兩個值時,屬性值的意思分別是:上下邊距、左右邊距。

margin

當屬性值為乙個值時,屬性值的意思分別是:上下左右邊距。

5、margin的注意事項:

1)上下兩個元素之間的margin值會重疊顯示,誰的值大就以誰的margin值來顯示。

2)當父元素裡的第乙個子元素新增margin-top時,會錯誤的把margin-top值新增給父元素。

3)margin可以取負值。

3、填充(padding)

1、padding:在設定麵中乙個元素內容到元素邊緣之間的距離。

2、padding的作用:控制父元素和子元素的位置關係,用來控制元素與內容之間的位置關係。

3、特點:

1)新增padding值後,padding會把元素原有的的小撐大,如果讓元素原有的大小不變,需要需要在元素的寬高上減去所加的padding值。

2)padding屬性對背景不起作用,背景圖的位置不受padding值影響。

3)背景色會延展到padding區域。

4、使用方法:

1)padding寫法:

divpadding-top:上填充

padding-right:右填充

padding-bottom:下填充

padding-left:左填充

2)padding的複合式寫法:

padding

當padding的屬性值為四個值時,屬性值的意思分別是:上填充、右填充、下填充、左填充。

padding

當屬性值為三個值時,屬性值的意思分別是:上填充、左右填充、下填充。

padding

當屬性值為兩個值時,屬性值的意思分別是:上下填充、左右填充。

padding

當屬性值為乙個值時,屬性值的意思分別是:上下左右填充。

5、padding的注意事項:

padding不可以取負值。

4、內容區(content)

1、content:元素的寬度、高度。

2、content的屬性:

1)width:元素的寬度

div 元素的寬度為20px。

2)height:元素的高度

div元素的高度為20px。

display屬性 盒模型

確實應該對html中的每個元素標籤都要了解一遍,這樣才能恰到好處的使用它們 這裡做個初步的整理,細節實踐中糾正 一 display屬性的三個值 inline,inline block,block 它們改變元素的特性,將元素重新分類成 內聯元素,行內塊元素,塊元素。inline元素 設定width h...

盒模型 標籤屬性

1 盒模型 組成部分 margin border padding content width height margin 用於移動盒子的位置 邊框和背景顏色以外的部分 margin auto margin top傳遞問題 border solid dashed dotted double 三角形 寬...

盒模型 box sizing 屬性

css3增添了盒模型 box sizing 屬性,box sizing屬性值 可以有下面三個值 content box 預設值,讓元素維持w3c的標準盒模型。元素的寬度 高度 width height 所佔空間 等於元素邊框寬度 border 加上元素內邊距 padding 加上元素內容寬度 高度 ...