一、包含块
目的：确定元素的位置和相对大小（%）

1.正常文档流元素和浮动元素 ---- 父元素的 content-box
2.绝对定位元素 ---- 父元素的 padding-box
3.固定定位元素 ---- 视口

二、负外边距

document.documentElement.clientWidth; 视口宽度

window.onresize 监控视口改变

三、字体

字体简写：
当 line-height 书写在 font 属性上 ，会覆盖 line-height 的值

字体大小：
默认是 16px
在Chrome 最小字体只能设置到 12px

字体族
衬线字体 笔画起始位置有修饰，横竖宽度不同
非衬线字体 笔画起始位置没有修饰，横竖宽度相同

四、文本

水平对齐（text-algin）
设置在块元素中（指定宽度）

让块元素中的文本，行内元素（内联元素 inline），行内块（inline-block ,img input）一行的水平方向对齐。

行高

设置在块元素中（指定宽度，高度）

当 行高 = 元素高度时，让块元素中的文本，行内元素（内联元素 inline) 在一行中的的垂直方向对齐。

行内块元素需要设置 垂直对齐 （vertical-align: middle ）

行高计算：
当行高的值是 number(数字) 是基于元素的文本大小计算

行高对父元素高度的影响：
当父元素未指定高度，行高撑起父元素的高度。

垂直对齐 （vertical-align）

1、给行内块元素设置垂直对齐，设置在行内垂直方向的位置

2、给行内元素设置垂直对齐，设置在行内垂直方向的位置

3、给行<td>,或者 display: table-cell的元素设置垂直对齐，

让其文本内容，后代元素在元素自身的垂直方向对齐。

五、背景

区别背景的使用场景： 不重要的网站信息，图标。

css 的包含块 、负外边距，字体，文本行高