1 行高的计算
我们的行高计算公式：
行高 = 上间距 + 下间距 + 文字的大小
css的行高：
行高 = 两条基线之间的距离
作用：
设置一行文本所占据的高度，真正意义还是设置文本相关的这些线条的位置
2 行高与单位
长度单位：px em % 不带单位
行高直接作用在目标标签上的时候
|
单位 |
计算过后行高 |
|
|
px |
设置的值 |
|
|
em |
字体大小*设置的值 |
|
|
% |
字体大小*设置的值 |
|
|
不带单位 |
字体大小*设置的值 |
给父元素设置行高，对子元素的影响
|
单位 |
子元素计算过后的行高 |
|
|
px |
父元素里设置的值 |
先计算，后继承 |
|
em |
父元素里设置的值*父元素的字体大小 |
先计算，后继承 |
|
% |
父元素里设置的值*父元素的字体大小 |
先计算，后继承 |
|
不带单位 |
父元素里设置的值*子元素的字体大小 |
先继承，后计算 |
二 盒子模型
1 盒子模型的理解
2 盒子模型的作用
布局
三 盒子模型之border
1 边框相关属性
border-width 控制边框宽度
length 用长度赋值
medium 默认宽度
thin 小于默认宽度
thick 大于默认宽度
border-style 控制边框样式
none 没有边框
solid 实现
dotted 点线
dashed 虚线
border-color 设置边框的颜色
颜色表示方式
2 边框连写
没有顺序、都可以省略
注意： border-style默认为none，如果连写的时候没有border-style，会看不到效果
四 盒子模型之padding
1 padding属性和padding连写
padding 控制内容和边框之间的距离
padding的四个方向
padding-top
padding-right
padding-bottom
padding-left
padding的连写
1 只有一个值：
内边距的上右下左都是这个值
2 写两个值
当连写写两个值的时候：
上下内边距是第一个值，左右内边距是第二个值
3 写三个值
连写写3个值的时候：
上内边距是第一个值，左右内边距是第二个值，下内边距是第三个值
4 写4个值
写四个值的时候：
分别是上右下左的顺序
2 padding和border对盒子的影响
给盒子设置边框和内边距的时候，都会影响盒子的实际大小
盒子的实际宽度 = 左边框+左内边距+设置的宽度+右内边距+右边框
五 盒子模型之margin
1 外边距属性和外边距连写
margin： 控制的是盒子和盒子之间的距离
margin-top
margin-right
margin-bottom
margin-left
margin的连写和padding的规则是一样
2 垂直合并现象
两个垂直分布的盒子，同时设置了相对的margin，最终两个相距的距离取决于两个margin的最大值
(只能避免，不能解决)
3 包含合并现象
给子盒子设置margin-top的时候，有可能会把父盒子一起带跑 -- 包含合并现象
解决方法：
1 给父盒子加边框
2 给父盒子设置一个属性：overflow：hidden；