CSS3盒子与DIV布局

CSS3中提出了盒子模型和新增盒子模型来完成对元素的直接定位，即能够为页面元素定义边框，并修饰内容距离，。从而优化文本内容的显示效果。

div与span区别

在包含方面div和span标记的作用相同。div和span标记二者的区别是，div是一个块级元素，其包含的元素会自动换行。span标记是一个行内标记，其前后都不会发生换行。div标记可以包含span标记元素，但是span标记一般不包含div标记。

盒子模型

所以的页面元素都包含在一个矩形框内，称为盒子。盒子描述了元素及其属性在页面布局中所占的空间大小，因此盒子是可以影响其他元素的位置及大小。盒子模型包含如下四部分：

1. content（内容）：是盒子模型中必需的一部分，内容可以是文字，图片等元素。
2. padding（空白）：也称内边距或补白，用来设置内容和边框直接的距离。
3. border（边框）：可以设置内容边框线的粗细，颜色和样式等。
4. margin（边界）：外边界，用来设置内容与内容之间的距离。

border边框

border边框是内边框和外边框的分界线，可以分离不同的HTML元素，border的外围是元素的最外围。

padding内边距

padding属性定义内容与边框之间的距离，即内边距的距离。
语法格式如下：

padding：length

margin外边距

margin边界用来设置页面元素和元素之间的距离，即定义元素周围的空间范围。语法格式如下：

margin：auto|length

新增属性如下表：

盒子布局取向box-orient

该属性用于定义盒子元素内部的流动布局方向。
语法格式如下：

box-orient:horizontal|vertical|inline-axis|block-axis|inherit

参数含义如下表：

盒子布局顺序box-direction

该属性是用来确定子元素的排列顺序，也可以说是内部元素的流动顺序。语法格式如下：

box-direction：normal|reverse|inherit

参数值说明如下表：

盒子布局位置box-ordinal-group

该属性设置盒子中每个子元素在盒子中的具体位置。语法格式如下：

box-ordinal-group：<integer>

盒子弹性空间box-flex

该属性能够灵活的控制子元素在盒子中的显示空间，显示空间包括子元素的宽度和高度，而不是子元素所在栏目的宽度，也可以说是子元素在盒子中所占的面积。语法格式如下：

box-flex：<number>

管理盒子空间box-pack和box-align

box-pack属性可以用来设置子容器在水平轴上的空间分配方式，语法格式如下：

box-pack：start|end|center|justify

参数说明如下表：

box-align属性用于管理子容器在竖轴上的空间分配方式，语法格式如下：

box-align：start|end|center|baseline|stretch

属性值说明如下表：

空间溢出管理box-lines

该属性用来避免空间溢出的问题。
语法格式如下：

box-lines：single|multiple

single表示子元素都单行或单列显示；multiple表示子元素可以多行货=或多列显示。