前端之CSS盒模型介绍

css盒模型

css盒模型是css的基石,盒模型由content(主体内容),padding(补白，填充),border(边框),margin(外间距);

1.content：

width:数值+单位; 主体内容的宽度

height:数值+单位; 主体内容的高度

2.padding(补白或填充)：

（a）padding:10px; 设置一个值，代表上，下，左，右均为10px

（b）padding:20px 10px; 设置两个值，代表上下为20px,左右为10px

（c）padding:20px 10px 5px;设置3个值，代表上为20px,左右为10px,下为5px

（d）padding:20px 10px 5px 0;设置4个值，顺时针依次为：上20px,右10px,下5px，左为0

可以单独设置某一个方向的padding值

padding-left:20px;（left可更改为right,top,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:数值+单位; (常用)

border-width:thin|medium|thick;

d)边框简写方式

border:线型 宽度 颜色;

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

border-top:5px solid gray;(top可更改为left,right,bottom)

注：I.背景可以延伸到border区域，当边框为实线时，背景会被遮挡

II.当给元素设置边框时，也会占据一定的宽度和高度，要在原来的宽高上减去设置的border值，保证总宽高不变

border-left-color:transparent; （transparent代表透明）

4.外间距（margin）

margin值设置方式同padding

注：a）背景不能延伸到margin区域（margin区域背景不可见）

b）margin可以设置负值

c) 当左右margin值设为auto时，可以使定宽块状元素水平居中显示

d）调整本元素与其他元素之间的位置关系时，给本元素添加margin值

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

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