1、CSS盒模型
释义：网页中所有元素都可以看作是一个盒子。
作用：盒内样式修饰、盒子位置布局
组成：外边距margin、内边距
padding、边框border
方向：上top、右right、下bottom、左left
2、盒模型三维立体层次结构【从上到下】
（第一层）边框border
（第二层）元素内容content和内边距padding
（第三层）背景图片层background-image
（第四层）背景颜色层background-color
（第五层）外边距margin
3、外边距：margin
margin-top 上边界
margin-right 右边界
margin-bottom 下边界
margin-left 左边界
（1）可以分别设置，也可以一起设置。
（2）只有一个值表示四边外边距一样；两个值表示【上下】、【左右】；四个值表示：上、右、下、左。
（3）margin:0px auto; 块级元素水平居中 | 行级元素效果为上左边界为0px.
外边距的问题（尽量少用）：
（1）上下外边距会叠压
（2）父级包含子级时，子级的margin-top会传递给父级（建议使用父级的内边距替代外边距）
4、边框：border:border-color颜色、border-width宽度、border-style线型、border-radius边框弧度
border-top 上边框
border-right 右边框
border-bottom 下边框
border-left 左边框 【transparent隐藏边框】
可以分别设置，也可以一起设置。都有color、width、style属性。【border-style是边框线型，常用属性值为：solid实线、dashed虚线】
5、内边距：padding
padding-top 上边距
padding-right 右边距
padding-bottom 下边距
padding-left 左边距
可以分别设置，也可以一起设置。只有一个值表示四边内边距一样；两个值表示【上下】、【左右】；四个值表示：上、右、下、左。
6、元素的实际宽高[元素的实际占位]
盒子高度 = height属性 + 上下填充高度 + 上下边框高度
盒子宽度 = width属性 + 左右填充宽度 + 左右边框宽度
【填充指的是内外边距】
7、display
none：不显示不占位置 ——与visibility的hidden比较 隐藏效果
block：块级元素效果 inline：行及元素显示 ——与visibility的visible比较 显示效果
inline-block：行块级元素效果。块级元素在一行显示，支持行内元素设置宽高，换行解析。不设置宽度由盒子内容撑开，IE6-7↓不支持。 ——与float比较内容不设置宽度由内容撑开。提升半层 vertical-align:
8、浮动属性——float
?默认的常规文档流：页面内容从上到下，从左到右排列。
?要使得DIV块换行显示，向右浮动，脱离常规文档流，使用浮动属性。
?属性值为：left(设置元素左浮动)、right(设置元素右浮动)、none(默认值不浮动)。
?浮动的三大显著特征
?DIV块元素失去“块状”换行显示特征，变为行内元素。
?紧贴上一个浮动元素（同方向）或父级元素的边框，如宽度不够将换行显示。
?占据行内元素的空间，导致行内元素围绕显示。
注：父块不设置高度，子块浮动，父块相当于无内容。解决办法：
（1）父级设置固定宽高
（2）同级元素设置margin-top
（3）子元素后添加清除浮动的空标签【IE6及以下，不设置高度的空白div（高度低于19px的div没有）空div在页面显示空块。设置font-size:0;可以消除，还剩两个像素的边框需要消除。】
（4）设置伪类清除浮动，父级其后清除浮动→.parent:after{ display:block;clear:both;content:"" } bat公司常用来清除的方法，兼容 ie8以上的版本浏览器
（5）子元素后利用<br clear="all"/>清除浮动。
9、清除属性——clear【清除浮动】
?clear作用
如果前一个元素存在左浮动或右浮动，则换行以区隔（使浮动换行）；只对块级元素有效。
?clear属性的取值
?right 在左边不允许有浮动元素
?left 在右边不予许有浮动元素
?both 在左右两侧都不允许有浮动元素
?none 默认值，允许两侧有浮动元素
10、定位属性——position用于设置目标对象的定位方式
★absolute(绝对定位)——允许漂浮于页面上，相对于浏览器页面，不保留位置；【移动物】
★relative(相对定位)——相对定位，相对于原位置，保留原位置； 【 参考物】
★static(静态定位)——仅以页面作为参考(默认普通文档流方式)。
★fixed(绝对相对定位)——可以让元素漂浮于网页上层。
◇z-index设置漂浮层的层序，值越大漂浮层越浮于上面。前提是设置了absolute！
例：div { position：absolute; z-index:3; 6px; }