单位
- px 像素：因分辨率不同，不同设备呈现的效果不同
- em 当前元素或父元素的font-size的倍数(text-indent:2em)
- rem 根元素(html)font-size的倍数
- % 父元素宽高的百分比
vertical-align应用场景
一行内容中，字体大小不一样(或图片)，设置垂直对齐的方式。不能用于块级元素
盒模型知识点
- 盒模型是由：外边距(margin)，边框(border)，内边距(padding)，内容(content)组成。
- 盒子的大小：边框(border)，内边距(padding)，内容(content)组成。
- 内边距padding：不能为负数、行内元素上下内边距不能完美的设置，块元素和行内块元素没问题。
- 外边距margin：可以为负数，行内元素上下内边距不能完美的设置，块元素和行内块元素没问题。第一个子元素和最后一个子元素的margin会作用到父元素引起塌陷问题。
- 相邻两个兄弟元素的margin会合并，取最大值。
解决塌陷的办法
- 给父元素设置不为0的padding。
- 给父元素设置不为0的border。
- 给父元素设置overflow:hidden。
元素隐藏
- visibility:show/hidden.只是不显示位置还在。
- display:none。位置也没有了
水平居中
- 块元素：margin:0 auto;
- 行内元素、行内块元素：text-align:center;
垂直居中
- 块元素：margin-top=父元素的高度/2-元素盒模型的高度/2;
- 行内元素、行内块元素：1）：父元素：line-height=父元素的高度，font-size=0px。 2）：子元素设置vertical-align=middle
元素间的空白问题
行内元素、行内块元素换行会被浏览器解析成空白字符，解决办法设置父元素的 font-size=0
行内块的幽灵空白问题
文字基线到文字最低端还有一段距离，行内块和文字基线对齐导致的。
解决办法：
- 给父元素设置font-size:0
- 如果只是一张图片设置display:block
- 设置vertical不为baseline即可
