css样式+div属性

• margin(外边距)
• border(边框)
• padding(内边距)
  以上属性分别为top(上)、boottom(下)、left(左)、right(右)。

盒子模型的关系层次

给你们看一个盒子模型的3D立体图，如下图
如图所示：

第一层：border（盒子的边框）
第二层：content和padding（元素的正文即内容，内边距）
第三层：background-image背景图
第四层：background-color背景颜色
第五层：margin（盒子的外边距）

从图片可以看出，当同时设置背景图和背景颜色时，背景图片是在背景颜色上面显示的

盒子居中
css样式中，都知道分为两种，水平居中和垂直居中。

水平居中属性：

• 块级元素的水平居中：margin: 0 auto;
• 文本内容的水平居中：text-align: center;

垂直居中属性:

• 文本内容的垂直居中：line-height：normal；
• 块级元素的垂直居中：vertical-align:middle；

浮动属性
浮动在css样式中的属性
float:left、right、none

left(左浮动)、fight(右浮动)、none(默认效果，表示不浮动)
设置元素的浮动，该元素将向左或向右移动直到它的外边距碰到另一个浮动元素的边框为止

clear清除
clear属性：rigth、left、both、none

clear:right 清除右浮动造成的影响
clear:left 清除左浮动造成的影响
clear:both 清除两边浮动造成的影响

overflow溢出
overflow属性：hidden、scroll、x、y

overflow:hidden;超出部分隐藏
overflow:scroll超出部分出现滚动条
overflow-x:横轴超出部分出现滚动条
overflow-y：纵轴超出部分出现滚动条

（持续编辑中）