零CSS筆記 | 基礎到不到能再基礎
1.加高
问题：扩展性不好
2.父级浮动
问题：页面中所有元素都加浮动，margin左右自动失效（floats bad ！）
3.inline-block 清浮动方法：
问题：margin左右自动失效；
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 不支持；
7.overflow:hidden 清浮动方法；
问题：需要配合 宽度 或者 zoom 兼容IE6 IE7；
overflow: scroll | auto | hidden；
overflow:hidden;溢出隐藏（裁刀！）
IE6双边距BUG（IE6下块属性标签浮动，并且有横向margin，横向margin加倍。）：
a、IE6
b、浮动
c、横向margin
d、块属性标签（加display:inline;）
IE6下 li部分兼容性问题：
a、左右两列布局，右边右浮动IE6 IE7下折行；(左边元素浮动)
b、IE6 IE7 li 下元素都浮动 在IE6 IE7下 li 下方会产生4px间隙问题；（加vertical-align:top；）
vertical-align 垂直对齐方式
a、加垂直对齐方式的同排元素都要加垂直对齐方式；
b、垂直对齐方式可以解决元素下方间隙问题；
图片下方间隙问题
a、display:block; (改变标签本身特性)
b、overflow:hidden; (必须知道图片高度)
d、vertical-align (暂时最完美的方案)
position:relative; 相对定位
a、不影响元素本身的特性；b、不使元素脱离文档流；
c、如果没有定位偏移量，对元素本身没有任何影响；
定位元素位置控制
top/right/bottom/left 定位元素偏移量。
position:absolute; 绝对定位
a、使元素完全脱离文档流；
b、使内嵌支持宽高；
c、块属性标签内容撑开宽度；
d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移；
e、相对定位一般都是配合绝对定位元素使用；
z-index:[number]； 定位层级
a、定位元素默认后者层级高于前者；
遮罩弹窗（优酷弹窗）
标准 不透明度： opacity:0~1;
IE 滤镜： filter:alpha(opacity=0~100);
position:fixed； 固定定位
与绝对定位的特性基本一致，的差别是始终相对整个文档进行定位；
问题：IE6不支持固定定位；
定位其他值：
position:static ； 默认值
position:inherit ; 从父元素继承定位属性的值
position:relative | absolute | fixed | static | inherit;
position:relative;
在 IE6 下父级的 overflow:hidden; 包不住子级的relative;
position:absolute;
在 IE6 下定位元素的父级宽高都为奇数那么在 IE6 下定位元素的 right 和 bottom 都有1像素的偏差。
position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法；
position:fixed; 固定定位元素子级的浮动可以不用写清浮动方法；（IE6不兼容）
表格标签：
table 表格
thead 表格头
tbody 表格主体
tfoot 表格尾
tr 表格行
th 元素定义表头
td 元素定义表格单元
表格样式重置
table{border-collapse:collapse;} 单元格间隙合并
th,td{padding:0;}重置单元格默认填充
form 表单
<input type="…… " name="" value="" />
text 文本框
password 密码
radio 单选
checkbox 复选
submit 提交
reset 重置
button 按钮
image 图片
file 上传
hidden 隐藏
select/option 下拉选框
对高度的支持不兼容；
textarea 文本域
各个浏览器下的默认滚动条显示不兼容
css3新增 resize 调整尺寸属性；
outline 轮廓线；
A标签轮廓线去除方法：
1、……
2、……
表单元素兼容性问题
IE6下input背景滚动；
元素浮动之后 能设置宽度的话 就给元素加宽度 如果需要宽度是内容撑开 就给它里边的块元素 加上浮动；
第一块元素浮动，第二块元素加margin值等于第一块元素，在IE6下会有间隙问题；
IE6下子元素超出父级宽高，会把父级的宽高撑开
p 包含 div 标签嵌套规则。
margin兼容性问题
display:inline-block
IE6 最小高度问题
IE6 双边距
li里元素都浮动 li 在IE6 7 下方会产生4px间隙问题
IE6下双边距和4pxBUG共存
浮动元素之间注释，导致多复制一个文字问题
IE6 7 父级元素的overflow:hidden 是包不住子级的relative
IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1px的偏差
IE6下绝对定位元素和浮动元素并列绝对定位元素消失
IE6 下input的空隙 和 border问题
IE6 下 输入类型表单控件背景问题
针对不同的浏览器写不同的CSS 样式的过程，就叫CSS hack!
\9 所有的IE9及之前
+ * IE7及ie7的ie浏览器认识
_IE6及ie6的ie浏览器认识
<!--[if IE]>
这是IE
<![endif]-->
<!--[if IE 9]>
9
<![endif]-->
…………………………
<!--[if IE 6]>
6
<![endif]-->
原生滤镜
_background:none;_filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src="XX.png", sizingMethod="crop");
!important 提升样式优先级权重
// 單個支持 顯示 #ffff00
.className{color:#ffff00!important}
.className{color:green;}
//多個不支持，顯示green
.className{color:#ffff00!important color:green}
data uri 圖片
http://dancewithnet.com/lab/2009/data-uri-mhtml/create/1376100722.php
flash透明<param name="wmode" value="transparent"> wmode="transparent"
text-overflow （clip | ellipsis）
white-space:nowrap
word-break:break-all 和 word-wrap:break-word;
box-sizing 盒模型解析模式
Content-box 标准盒模型 width/height=border+padding+content
Border-box 怪异盒模型 width/height=content
IE8支持
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;解決form元素兼容性，IE7不支持，所以需要加hack *.submit,
.reset,
.button,
.text,
.select,
.textarea,
.checkbox,
.radio {
margin: 0;
padding: 0;
border-width: 1px;
height: 17px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
*height:15px;
*width: 15px;}
css模拟固定定位
expression(eval(document.documentElement.scrollTop+(document.documentElement.clientHeight-this.offsetHeight)/2));
未知宽高的img居中问题
li的里分为左右两块元素，右边元素一直跟在左侧内容后边并距离左侧元素10px间距，左侧元素宽度由左侧内容撑开。如果左右两侧内容总宽度超出了li宽度，就把左侧多出的文字隐藏掉
css模擬fixed定位一
html{height:100%;overflow:hidden;}
body{margin:0; height:100%;overflow:auto;}
.box{height:2000px;}
.div{width:100px;height:100px;background:red; position:absolute;left:100px;top:100px;}
css模擬fixed定位二
.div{
width:100px;height:100px;background:red; position:fixed;left:100px;top:100px;
_position:absolute;_top:expression(eval(document.documentElement.scrollTop+100));
}