CSS3盒子与DIV布局

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

div层

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属性定义内容与边框之间的距离，即内边