前端之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