这里写目录标题
[扩展]行高的取值+body的背景+行盒的垂直对齐
行高的取值
line-height
设置行高不会给每一个元素都设置，一般设置到父元素里面
- px,像素值
单行文本一般使用像素值，不适用于多行文本 - 无单位的数字
先继承再计算，行高为字体大小的N倍，多行文本情况一般选择这个 - em单位
多行文本情况下先计算像素值再继承，所以和直接给像素值区别不大 - 百分比
多行文本情况下先计算像素值再继承，所以和直接给像素值区别不大
body的背景
body背景颜色
一块区域
特点：最小宽度为视口宽度，最小高度为视口高度。
<style>
body{
background: #008c8c;
width: 100px;
height: 100px;
border: 2px dashed;
}
</style>
<body>
</body>
此时的body高度为0 ，但是背景颜色却覆盖了整个视口，为什么要弄这个规则出来，因为如果网页高度不够的情况。没有这个规则你就没有机会设置整个网页的背景，
HTML元素的背景颜色
HTML元素的背景覆盖画布
<style>
body{
background: #008c8c;
width: 100px;
height: 100px;
border: 2px dashed;
}
html{
background: #000000;
}
</style>
<body>
</body>
运行效果
body背景图片
如果HTML元素有背景，BODY元素正常（背景覆盖边框盒）
如果html元素没有背景，BODY元素覆盖画布
关于画布背景图
- 背景图的宽度百分比，相对于视口
- 背景图的高度百分比，相对于网页高度
- 背景图的横向位置百分比、预设值，相对于视口
- 背景图的纵向位置百分比、预设值，相对于网页高度
- 只要给html设置个背景一切都正常了
行盒的垂直对齐
给没有对齐元素设置vertical-align
可以直接设置数值px进行调整
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length
% 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值
图片的底部白边
图片的父元素是一个块盒，块盒高度自动，图片底部和父元素底边之间往往会出现空白。
- 设置父元素的字体大小为0
- 将图片设置为块盒
