什么是文档流？（普通流Normal Flow）
1、div 的高度由什么决定？
例子：当我们写font-size: 20px; 的时候，应用不同字体，div的高度不同。
不同字体的默认行高不一样。
如果div里面只有一个内联元素，div的高度等于行高。line-height: 20px;
2、如何文本对齐？
套路：改html，在姓名后面加一个div撑开和后面的对齐。
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</title> <style> div{ border: 1px solid red; font-size: 20px; } span{ border:1px solid green; display: inline-block; width: 5em; text-align: justify; line-height: 20px; overflow: hidden; height: 20px; } span::after{ content:''; display: inline-block; width: 100%; border: 1px solid blue; } </style></head><body> <div> <span>姓名</span> <br> <span>联系方式</span> </div></body></html>复制代码
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;
转载于:https://juejin.im/post/5d0a5ad55188256de15daff3