CSS基础(7)_文档流、盒子模型简介

文档流(normal flow)

网页是一个多层的结构，一层摞者一层，通过CSS可以分别为每一层来设置样式，作为用户来讲只能看到最顶上一层。在这些层中，最底下的一层称为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列。

对于我们来说元素主要有两个状态：
在文档流中
不在文档流中(脱离文档流)

元素在文档流中有什么特点：

块元素
1、块元素会在页面中独占一行(自上向下垂直排列)
2、默认宽度是父元素的全部(会把父元素撑满)
3、默认高度是被内容撑开(子元素)

行内元素
1、行内元素不会独占页面的一行，只占自身的大小
2、行内元素在页面中自左向右水平排列，如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列(和书写习惯一致)
3、行内元素的默认宽度和高度都是被内容撑开。

盒子模型(盒模型、盒子模型、框模型(box model))

CSS将页面中的所有元素都设置为了一个矩形的盒子。将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置。

每一个盒子都由以下几个部分组成：
内容区(content)
内边距(padding)
边框(border)
外边距(margin)