三、盒子模型

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属性的常用属性值及说明