标签：
样式：就近原则
Eg:行内>内部>外部
Border：1px solid red;（一个不能拉下）
盒子3D模型：
Border
Content+padding
Background-image
Background-color
Margin
Background：url() 0 0[设置位置] no-repeat;
盒子尺寸=外框+内边距+外边距+content
Class=“content book”[book为追加样式]
盒子不设置高度时，可随内容自适应
第一种居中方法：
块级元素：纵向排列
Margin:0 auto;[列居中，不能同时设置浮动和绝对定位]
Auto：根据浏览器宽度设置外边距
原理：[浏览器宽度-设置宽度]/2=外边距
为父层（class=wrap）设置宽度，子层设置100%（子层会继承父层的宽度及居中）
第二种方法：float（实现横向排列）=left/right/none
特点：仍在文档流中，元素左右移直至触碰到容器边缘为止
元素未设置宽度，而设置了浮动属性，元素的宽度随内容变化而变化
当元素设置浮动属性后，会对相邻元素产生影响（块级元素一行排列）
消除浮动方法：
段落：Clear:both/left/right/none/inherit;（主要用于紧邻后面的元素的清除浮动）
父包含缩成一条时没有用
同时设置width：100%（或固定宽度）+overflow：hidden;
1.加高
问题：扩展性不好
2.父级浮动
问题：页面中所有元素都加浮动，margin左右自动失效（floats bad ！）
3.inline-block 清浮动方法：
问题：margin左右auto失效；
4.空标签清浮动
问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差）
5.br清浮动
问题：不符合工作中：结构、样式、行为，三者分离的要求。
6.after伪类 清浮动方法（现在主流方法）
.clear:after{content:‘‘;display:block;clear:both;}
.clear{zoom:1;}
after伪类： 元素内部末尾添加内容；
:after{content"添加的内容";} IE6，7下不兼容
zoom 缩放
a、触发 IE下 haslayout，使元素根据自身内容计算宽高。
b、FF 不支持；
回顾:inline-block 特性：
1、块在一排显示
2、内联支持宽高
3、默认内容撑开宽度
4、标签之间的换行间隙被解析（问题）
5、ie6 ie7不支持块属性标签的inline-block（问题）
绝对定位与相对定位：
position:relative; 相对定位
a、不影响元素本身的特性；
b、不使元素脱离文档流（元素移动之后原始位置会被保留）；
c、如果没有定位偏移量，对元素本身没有任何影响；
d、提升层级
定位元素位置控制
top/right/bottom/left 定位元素偏移量。
top:200px;
position:absolute; 绝对定位
a、使元素完全脱离文档流；
b、使内嵌支持宽高；
c、块属性标签内容撑开宽度；
d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于document发生偏移；
e、相对定位一般都是配合绝对定位元素使用；（在父级元素指定为相对定位）
f、提升层级（会和后面div重合）
z-index:[number]； 定位层级
a、定位元素默认后者层级高于前者；number:1,2
b、建议在兄弟标签之间比较层级,数字高的显示层级高
z-index:[number]； 定位层级
position:fixed； 固定定位
与绝对定位的特性基本一致，的差别是始终相对整个文档进行定位；
问题：IE6不支持固定定位；
定位其他值：
position:static ； 默认值
position:inherit ; 从父元素继承定位属性的值 (不兼容)
(static是静态定位，relative是相对定位，absolute.fixed是绝对定位）
position:relative | absolute | fixed | static | inherit;
position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法；
position:fixed; 固定定位元素子级的浮动可以不用写清浮动方法；（IE6不兼容）
遮罩弹窗（优酷弹窗）
标准 不透明度： opacity:0~1; （透明度）父级加了透明度，子集也会变透明
IE6.7 下透明度滤镜： filter:alpha(opacity=0~100（100完全不透明);
父层没有设置float，子层设置了浮动，高度无法扩展
Div最好不要设置高度，不能随内容扩展
标签：
原文地址：http://www.cnblogs.com/dsh20134584/p/5627934.html
