学习笔记（盒子深入）

盒子尺寸构成

• 一个盒子的宽度构成：
  左外边距 + 左边框宽 + 左内边距 + 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: 线型 线宽 线颜色；