文档流（normal-flow）：通俗的理解为页面中文档流动的方向。
以前区分行内元素和块元素（浏览器赋予默认属性），现在都可以通过修改样式表内display属性达到想要的效果，基本已经不需要区分了。
- 文档的流动方向：
inline 元素：从左到右，到达最右边后换行。block 元素：从上到下，每一个都另起一行。inline-block 元素：从左到右，但当内容不够容下标签所有内容是会换行。
- 文档在页面中的宽度：
inline元素：宽度为内部所有 inline 元素的和，该元素不能使用width属性指定宽度。block元素：默认自动计算宽度，可以用width指定，不写默认width为 auto （注意：并非 100%而是 auto，若不是特殊情况，尽量不要写 100%）。inline-block元素：结合前两者特点，默认自动根据内容计算宽度，也可以指定 width。
- 文档在页面中的高度：
inline元素的实际高度为行高。不接受width和height属性，但依然可以赋予其他属性（如内外边距）。block元素的实际高度由内部文档流元素决定，块元素会将内部的所有文档流元素包起来，可以使用height指定高度。inline-block元素和block 元素基本相同，也可以通过height属性指定高度。
- 存在一些特殊情况，如
block 元素的内容高度超过了height属性赋予的高度（文档溢出--overflow）。
- 默认值为
overflow=visiable;，使得超出的内容可见（内容会从block元素边框溢出）。 overflow: scroll;,该值可以给块元素添加滚动条方便用户通过滚动条浏览块元素内的内容，但很难受的是不管有没有溢出都会有滚动条，很丑……- 所以一般使用
overflow: auto;会自动根据内容长短添加滚动条，这个是目前最常用的一种处理方式。 - 也可以使用
overflow-x或y可以分别设置横向，纵向的溢出内容，但不是很常用因为比较麻烦。
CSS 盒模型：
CSS 盒模型分为两种：
- 内容盒 content box
- 边框盒 border box
可通过
box-sizing属性设置盒模型类型。 盒模型由content、padding、border、margin四个部分组成。
区别：
- content box 的宽高为盒内部元素内容宽高总和，即宽高只包含
content。 - border box 的宽高为边框的宽高，即宽高为
border、padding和content的总和。所以在没设置边框和内边距时，两模型效果基本相同。
关于盒模型的学问还有很多，在以后学习过程中有机会再总结吧。
