三、盒子模型
CSS盒子模型(css box model)
是CSS技术所使用的一种思维模型
是网页布局中，合理组织页面元素的规则
3.1、平面结构
margin：外边距（元素与元素之间的距离）
border：边框（分隔不同元素）
padding：内边距（控制内容与边框之间的距离）
content / element：蓝色部分为内容或元素
一个盒子的实际宽度或高度由：内容+外边距+边框+内边距组成
3.2、三维立体层次结构
第一层：边框（border）
第二层：元素内容（content）、内边距（padding）
第三层：背景图片（background-image）
第四层：背景颜色（background-color）
第五层：盒子的外边距（margin）
3.2.1、内容（content）
注意：指定一个 CSS 元素的宽度和高度属性时，只是设置内容区域的宽度和高度。元素的完整大小，还须加上内边距、边框和外边距。
3.2.2、边框（border）
border-width属性设置方式
综合设置的属性值顺序（先赋值，再复制）
赋值：上右下左
复制：下复制上，左复制右
border-style属性设置方式
综合设置的属性值顺序（先赋值，再复制）
赋值：上右下左
复制：下复制上，左复制右
3.2.3、内边距（padding）
3.2.4、外边距（margin）
3.2.5、标准文档流
标准文档流简称标准流，是指在不使用其他与排版和定位相关的特殊CSS3规则时，网页各种元素的排列规则，即默认网页各种元素的排列规则。
根据排列规则，标准文档流分两类:
- 块级元素：占据一个矩形区域，竖直排列，左右撑满
- 行内元素：不占有独立的区域，横向排列
3.2.6、div标签和span标签（容器标签）
将文档分割为独立的、不同的部分，div可以嵌套span，反之不可。
div：可定义文档中的分区或节
span：用来组合文档中的行内元素。span 没有固定的格式表现，当对它应用样式时，它才会产生视觉上的变化。
3.2.7、display属性的常用属性值及说明
