css盒模型

一、css盒模型的概念及组成

css盒模型是css的基石，它规定了html元素之间的相互关系。每个html元素都有自己的盒模型。

css盒模型是由content(主体内容)，padding(内边距，补白，填充),border(边框)，margin(外边距)四部分组成。

1.content

语法：width:数值+单位;
      height:数值+单位;

注：a) content部分是由width和height两部分组成的矩形区域
b) width和height设置除0以外的其他值时，必须加单位

2.padding

a) 设置一个值

语法：padding:20px;   上，下，左，右均为20px

b) 设置两个值

语法：padding:5px 20px;  第一个值代表上下为5px，第二个值代表左右为20px

c) 设置三个值

语法：padding:5px 20px 10px; 

第一个值代表上为5px，第二个值代表左右为20px，第三个值代表下为10px

d) 设置四个值

语法：padding:20px 10px 5px 0;

按照顺时针方向依次为上20px，右10px，下5px，左0

e) 还可以使用padding属性的完整写法设置某个方向的padding值

eg:  padding-left:20px;  （left还可以更改为right,top,bottom）

注：
I.当需要调整子元素在父元素中的位置关系时，通过给父元素添加padding来实现
II.如果元素本身设置了宽高，并且设置的宽高包含padding在内，那么设置padding值后要在原来宽 高的基础上减去设置的padding值，保证总宽高不变
III.padding不允许设置负值
IV.背景可以延伸到padding区域

3.border

a) 设置边框样式

语法：border-style:solid(实线)|dashed(虚线)|dotted(点线)|double(双线);

b) 设置边框颜色

语法：border-color:颜色值;

c) 设置边框宽度

语法：border-width:数值+单位;

d) border属性简写方式

语法：border: 宽度 线型 颜色;

eg:   border:3px solid blue;

e) 单独设置某个方向的边框

语法：border-top:1px dashed blue;  

(top还可以根据具体要求更改为left,right,bottom)

f) 去掉某个方向的边框

语法：border-right:none|0;

注：I.如果元素本身设置了宽高并且包含border在内，那么设置border后，要在原来宽高的基础上减去设置的border值，保证总宽高不变

II.背景可以延伸到border区域，当设置为实线时会遮挡背景

4.margin(边框以外的距离)

语法: margin:数值+单位; (margin属性值的设置方法同padding)

注：I.当需要调整元素之间的位置关系时，给需要调整的元素添加margin属性

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

III.margin允许设置负值

标准盒模型的总宽度 = width + 左右padding + 左右border + 左右margin 

标准盒模型的总高度 = height + 上下padding + 上下border + 上下margin