★ 盒子模型

（標準的盒模型）

css盒模型的概念及組成

css盒模型是css的基石，每個html標簽都可以看作是一個盒模型。

css盒模型是由內容(content)，補白或填充(padding)，邊框(border)，外邊距(margin)四部分組成（具體如圖所示）

1.內容(content)

寬度 width:數值+單位;

高度 height:數值+單位;

eg: .box{width:200px;height:100px;}

2.補白或填充 （設置內容和邊框之間的距離）

語法：padding:數值+單位;

a) 設置一個值

padding:10px; （四個方向的padding均為10px）

b）設置兩個值

padding:20px 10px; （第一個值代表上下，各為20px,第二個值代表左右，各為10px）

c）設置三個值

padding:20px 5px 10px; （第一個值代表上，為20px,第二個值代表左右，為5px,第三個值代表下，為10px）

d）設置四個值

padding:20px 10px 5px 0; （順時針方向上20，右10，下5,左0）

e) 還可以單獨設置某一個方向的padding值

padding-top:20px; （top還可以更改為left，right，bottom）

註：

I.padding不允許設置負值

II.背景可以延伸到padding區域

III.當我們需要調整內容在父容器中的位置關系時，給父元素添加padding屬性

IV.當給元素設置了padding值後，要在原來的寬，高上減去設置的padding值，保證總寬高不變

3.邊框(border)

a)邊框類型

語法： border-style:solid(實線)|dashed(虛線)|dotted(點線)|double(雙線);

b)邊框顏色

語法： border-color:顏色值;

c)邊框寬度

語法：border-width:數值+單位;

d）border簡寫方式

語法：border:寬度 線型 顏色;

eg: border:10px solid red;

e)還可以單獨設置某一個方向的邊框

語法：border-top:10px solid red;(top可更改為bottom，right,left)

註：

I.設置邊框為0或none時邊框隱藏或消失

eg: border-left:none;或border-left:0;

II.背景可以延伸到border區域，當線型為實線時，將會遮擋住背景

III.當給元素設置邊框後，要在原來的寬高上減去設置的邊框寬度，保證總寬高不變

4.外邊距(margin)(設置邊框以外的部分)

語法：margin的設置方法同padding

註：

I.margin允許設置負值

II.背景不能延伸到margin區域

III.調整子元素在父元素中的位置關系，可以給子元素添加margin

或者調整元素之間的位置關系時，給本元素添加margin

從零開始學習前端開發 — 3、CSS盒模型