CSS之盒子模型

行高

• 浏览器默认文字大小：16px
• 行高是基线与基线之间的距离
• 行高=文字大小+上下边距
• 行高的单位

单位	文字大小	值
px	20px	20px
em	20px	40px
%	20px	30px
2	20px	40px

总结：单位除了像素以外，行高都是与文字大小乘积。

行高单位	父元素文字大小	子元素文字大小	行高
40px	20px	30px	40px
2em	20px	30px	40px
%150	20px	30px	30px
2	20px	30px	60px

总结：不带单位时，行高是和子元素文字大小相乘,em和%都是和父元素文字大小相乘

盒子模型

边框 （border）

• border-top-style:solid(实线)／dotted（点线）／dashed（虚线）
• border-top-color
• border-top-width

        .box{
             300px;
            height: 390px;
            background-color: red;
            border-top-style: solid;
            border-top-color: green;
            border-top- 5px;

            border-bottom-style: solid;
            border-bottom-color: yellow;
            border-bottom- 15px;
        }

边框属性连写

border-top:red solid 5px;

特点：没有顺序要求，线型为必写项。

四个边框值相同的写法

border:12px solid red;

特点：没有顺序要求，线型为必写项。

边框合并

 border-collapse:collapse;

获取焦点

内边距（padding）

padding-left | right | top | bottom

• padding连写

1. padding: 20px; 上右下左内边距都是20px
2. padding: 20px 30px; 上下20px 左右30px
3. padding: 20px 30px 40px; 上内边距为20px 左右内边距为30px 下内边距为40
4. padding: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px

内边距撑大盒子的问题

• 影响盒子宽度的因素
• 内边距影响盒子的宽度
• 边框影响盒子的宽度
• 盒子的宽度=定义的宽度+边框宽度+左右内边距

继承的盒子一般不会被撑大

包含（嵌套）的盒子，如果子盒子没有定义宽度，给子盒子设置左右内边距，一般不会撑大盒子。

外边距（margin）

margin-left | right | top | bottom

外边距连写

1. margin: 20px; 上下左右外边距20px
2. margin: 20px 30px; 上下20px 左右30px
3. margin: 20px 30px 40px; 上20px 左右30px 下 40px
4. margin: 20px 30px 40px 50px; 上20px 右30px 下40px 左50px

垂直方向外边距合并

两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的值。

嵌套的盒子外边距塌陷

• 给父盒子设置边框
• 给父盒子overflow:hidden; bfc 格式化上下文

行内元素可以定义左右内外边距，上下的会被忽略掉