从零开始学习前端开发 — 3、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

Ⅳ.浏览器默认margin有值，一般公共样式表设置样式重置，将margin值设为0

margin和padding值说明：