CSS属性太多了，所以会有很多平时注意不到的知识点，这片博客主要就是记录一下平时遇到的一些需要注意的问题。虽然知识点比较杂，但是实用性很高。
关于文档流
文档流：文档内元素流动的方向（内联元素从左往右流，块级元素从上往下流）
- 块级元素的高度由其内部文档流元素的高度总和决定【不是相等】
- 块级元素从上往下流，每个另起一行
- 内联元素：
- 左往右流，宽度不够另起一行
- 英文单词默认不换行，可以增加属性word-break：break-all;
- 中文会换行
span的高度
文字居中是让2个字体的基线对齐
span{
font-size:100px;
}
- 100px是字体最高点到最低点的距离
- span的高度为100px+建议行高【每个字体不一样】
- 建议行高可以用line-height锁定【不一定有用】
- 一个块级元素内有多个span，高度由最高的span决定
- 建议line-height比font-size多大一点
脱离文档流的2个方法
- {position：fixed}不为元素预留空间，而是通过指定元素相对于屏幕视口的位置来指定元素位置。元素的位置在屏幕滚动时不会改变
- 子元素{position：absolute};父元素{position:relative}
关于高度与宽度
尽量不要使用具体值，用文档流扩充其总体的宽度与高度！即利用文档流的marging和padding值。
如果不得已要使用具体的值建议使用{max-width:XXpx}当宽度低于max值，会自适应
display:inline-block
拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性.
应用：在做横向列表的时候可以利用此属性。
vertical-align: top
此属性可以修正某些情况下的元素距离父元素有多余的像素。例如img与svg元素。
浮动元素换行
设置宽度百分比可以让子元素自动换行，例如{width：50%}可以实现每2个子元素换一行。
另外如果子元素如果要加边框的话，需要增加{box-sizing：border-box；}
——远方不远
