盒子尺寸构成
- 一个盒子的宽度构成:
左外边距 + 左边框宽 + 左内边距 + width值 + 右内边距 + 右边框宽 + 右外边距 - 一个盒子的高度构成:
上外边距 + 上边框宽 + 上内边距 + height值 + 下内边距 + 下边框宽 + 下外边距
margin外边距细化:
margin还可以细分为4个方向,每个方向都可以单独控制,如下:
margin-top: 上外边距
margin-right: 右。。。
margin-bottom:下。。。
margin-left: 左。。。
margin: 一个值; ——设置上,右,下,左4个方向均为该值;
margin:值1 值2; ——设置上下margin为值1,左右margin为值2;
margin:5px 10px; 表示上下margin是5px,左右margin是10px
margin:0 auto; 表示上下margin是0,左右margin是auto——auto对标准浏览器就解析为两边相等
margin:值1 值2 值3;——设置上margin为值1,左右margin为值2, 下margin为值3;
margin:值1 值2 值3 值4;——分别设置上,右,下,左4个方向的值;
padding内边距细化
同上
border边框细化
- 12个对边框线的控制属性
border-top-style: 顶部边框的线型。常见线型:solid , dashed, dotted
border-top-width: 顶部边框的线宽;
border-top-color: 顶部边框的线色;
border-right-style, border-right-width, border-right-color:。。。。。。。。。。。。。。。。。。。。。
- 3个设置线的某方面特性的综合属性
border-style: 可以使用1-4个值,用来设置4个方向的线的线型,其规则同margin值的设置。
比如:border-style:solid dashed; 表示上下边框为实线,左右边框为虚线;
border-width: 同理,可以设置1-4个值,表示4个方向的线宽。
border-color:同理。
- 4个设置每个方向边框的所有特性的综合属性
border-top: 线型 线宽 线颜色;
border-right: 线型 线宽 线颜色;
border-bottom: 线型 线宽 线颜色;
border-left: 线型 线宽 线颜色;
- 一次性设置4个方向的3个特性
border: 线型 线宽 线颜色;