行高
- 浏览器默认文字大小: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{
width: 300px;
height: 390px;
background-color: red;
border-top-style: solid;
border-top-color: green;
border-top-width: 5px;
border-bottom-style: solid;
border-bottom-color: yellow;
border-bottom-width: 15px;
}
边框属性连写
border-top:red solid 5px;
特点:没有顺序要求,线型为必写项。
四个边框值相同的写法
border:12px solid red;
特点:没有顺序要求,线型为必写项。
边框合并
border-collapse:collapse;
获取焦点
内边距(padding)
padding-left | right | top | bottom
- padding连写
- padding: 20px; 上右下左内边距都是20px
- padding: 20px 30px; 上下20px 左右30px
- padding: 20px 30px 40px; 上内边距为20px 左右内边距为30px 下内边距为40
- padding: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px
内边距撑大盒子的问题
- 影响盒子宽度的因素
- 内边距影响盒子的宽度
- 边框影响盒子的宽度
- 盒子的宽度=定义的宽度+边框宽度+左右内边距
继承的盒子一般不会被撑大
包含(嵌套)的盒子,如果子盒子没有定义宽度,给子盒子设置左右内边距,一般不会撑大盒子。
外边距(margin)
margin-left | right | top | bottom
外边距连写
- margin: 20px; 上下左右外边距20px
- margin: 20px 30px; 上下20px 左右30px
- margin: 20px 30px 40px; 上20px 左右30px 下 40px
- margin: 20px 30px 40px 50px; 上20px 右30px 下40px 左50px
垂直方向外边距合并
两个盒子垂直一个设置上外边距,一个设置下外边距,取的设置较大的值。
嵌套的盒子外边距塌陷
- 给父盒子设置边框
- 给父盒子overflow:hidden; ==bfc 格式化上下文==