什么是文档流？（普通流Normal Flow）
1、div 的高度由什么决定？
例子：当我们写font-size: 20px; 的时候，应用不同字体，div的高度不同。
不同字体的默认行高不一样。
如果div里面只有一个内联元素，div的高度等于行高。line-height: 20px;
2、如何文本对齐？
套路：改html，在姓名后面加一个div撑开和后面的对齐。
JS Bin 姓名 联系方式复制代码
3、inline元素之间如果有任何空格、换行等看不见的字符，页面就会有空隙。
不要用inline-block，用套路： 在子元素身上加float: left; 在父元素身上加
.clerafix::after{ content: ''; display: block; clear: both;}复制代码 4、多行文字溢出，后面变省略号 google：css multi line text ellipsis
代码：
div{ display: -webkit-box; -webkit-line-clamp: 2; //要几行就写几 -webkit-box-orient: vertical;}复制代码 居中问题
1、文字垂直居中
不写高度，自适应
例子：
要求高度为40px；
div{line-height: 24px;padding: 8px 0;}复制代码 2、文字水平居中
div{text-align: center;}复制代码 div里有div如何垂直水平居中？
1、高度不确定：
{display: flex;justify-content: center;align-items: center;}复制代码 margin合并
如果父元素没有border；那么子元素的margin的上下maigin就会合并。
如果解决？在父元素上加margin-top 或者 加padding-top 或者 加overflow: hidden;（不到万不得已不用这个）
做一个1:1的div
div{
padding-top: 100%
}
总结：
div的高度是由它内部文档流的高度的总和决定的，
文档流是指内联元素从左到右依次排列（），如果空间不够，再起一行流动；
块级元素另起一行，从上到下。
脱离文档流：
方法一 float: left;
方法二 position: absolute;
方法三 position: fixed;