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
原文地址：https://www.cnblogs.com/21-forever/p/10849688.html