PHP从入门到精通，025第三章CSS之DIV+CSS标准化布局盒子模型（DAY5第2课）

四、DIV+CSS标准化布局

（四）、盒子模型

说明：在HTML中的每个元素都是一个以盒子的形状来存在的。

盒子特点：由“内容-元素”+“内填充”+“边框”+“外边距”；在计算盒子大小：100*100+10+1+10

QQ图片20181123051752.png

1、border的属性

属性名	描述	属性值
border-top	上边框	barder-top:粗细 样式 颜色 border-top:1px dashed red
border-right	右边框	border-right:粗细 样式 颜色
border-bottom	下边框	border-bottom:粗细 样式 颜色
border-left	左边框	border-left:粗细 样式 颜色
border	四边	border:粗细 样式 颜色

QQ图片20181123064250.png

2、padding属性

属性名	描述	属性值
padding-top	上内填充	数值，如：padding-top:10px;
padding-right	右内填充	数值
padding-bottom	下内填充	数值
padding-left	左内填充	数值
padding	简写形式	padding:10px; //四边都是10； padding:10px 20px; //上下各10，左右各20； padding:10px 20px 30px; //上10，左右各20，下30；padding:10px 20px 30px 40px;按上右下左的顺序。

注意：我们的内填充是占背景的。

3、margin属性

属性名	描述	属性值
margin-top	上外边距	数值，margin-top:10px;
margin-right	右外边距	数值
margin-bottom	下外边距	数值
margin-left	做外边距	数值
margin	简写形式	margin:10px; //四边各10；margin:10px 20px; //上下各10，左右各20；margin:10px 20px 30px; //上10，左右各20，下30；margin:10px 20px 30px 40px; //按上右下左的顺序