Normal Flow文档流
HTML 5 中已经抛弃了「内联元素」的概念，所有元素都可以通过 CSS 变成内联的 inline 内联宽高不能指定；内联元素的高度由 line-height 间接确定 block 块能制定宽高；div是块元素，注意父元素和子元素的margin会合并，高取最高值 inline-block 两者结合，能指定宽高；如果写了display: inline-block，margin不会合并。
-
不要在内联元素里写块元素！尽量别写高度
-
宽度也别写死,用min-height | min-width | 50%
-
大部分情况不要写width100%
用 overflow 如果内容超出文档流
overflow: visible //显示 overflow: hidden //隐藏 overflow: scroll //不用 overflow: auto //常用
CSS盒模型
它分2种，一种是content box,一种是border box。区别是content box宽度包含到 content,border box 宽度包含到 border。含border\padding\content。 border-box 好用
如何让父元素和子元素margin不合并？
加一个padding \ 加一个border \ 加一个 overflow: hidden
box-sizing
对于新的web站点，你可能希望首先将box-sizing设置为border-box，如下所示：
* { box-sizing: border-box; }
width和height属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意，填充和边框将在盒子内 , 例如,.box {width: 350px; border: 10px solid black;}导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。
这使得处理元素大小的工作变得容易得多，并且通常消除了在布局内容时可能遇到的许多陷阱。然而，在某些情况下，应谨慎使用这个属性。
例如： 你正在编写一个将由其他人使用的共享组件库，如果他们网站的其余部分没有设置此值，他们可能会发现很难使用你的组件库。
