css常用单位
em
相对单位，相对于父盒子字号比值。属性值是数字可以带有小数点
p {
/*父盒子12px * 2 = 24px*/
font-size: 2em;
}
span {
/*p字号是继承 12px 相对于父盒子字号12 * 2 = 24px的比值*/
/*font-size: 2em;*/
/*span如果不设置字号从p继承2em继承的是计算后的数值*/
}
rem
相对单位，相对于根元素(html)字号的比值和父盒子没有任何关系。属性值是数字可以带有小数点
font-size: 20px;
}
body {
font-family: "Arial","Microsoft Yahei";
font-size: 12px;
}
Px
像素，是屏幕上显示数据的最基本的点。用于网页设计，直观方便，相对单位
像素是相对于显示器屏幕分辨率而言的。
譬如，windows的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。
pt是印刷行业常用单位，1pt = 1/72英寸。绝对单位
Pc：派卡,绝对单位，
In:英寸，绝对单位
Mm:绝对单位，毫米
Cm:绝对单位，厘米
1in = 2.54cm = 25.4 mm = 72pt = 6pc
hack
hacker黑客
因为浏览器的兼容性问题，我们针对不同的浏览器书写不同html或者css代码，以便达到不同浏览器查看效果相同。
html hack 和css hack
html hack
IE浏览器兼容有很大问题，给我们提供了很多端口，书写hack。
<!--[if lte IE 9]>
内容部分
<![endif]-->
针对不同的浏览器在同一个html文件里，去写不同的html结构。
IE浏览器有很多兼容性问题，给我们提供了一些接口。
表示Hack符里面的内容只在IE9及以下的浏览器内显示，IE10及以上或者高级浏览器会认为这是注释。
if是如果，lte是less than or equal，小于或者等于，IE浏览器，9代表版本。
lte : less than or equal , 表示小于或等于。
lt : less than , 表示小于。
gt : greater than , 表示大于。
gte:表示大于或者等于
<!--[if lt IE 8]>
<h3>您的浏览器版本过低，请更新浏览器！</h3>
<![endif]-->
<div class="box">文字</div>
html hack：表示小于IE8版本的浏览器可以显示h3标签，大于等于IE8版本的浏览器或者高级浏览器都不显示，认为你这是注释。
<!--[if gt IE 8]>
<h3>只有IE8以上版本的IE低版本浏览器可以显示，高级浏览器或者IE高版本都认为是注释</h3>
<![endif]-->
<div class="box">文字</div>
gt:表示大于IE的低版本浏览器可以显示，小于或者其他高级浏览器仍然不显示，认为是注释。
应用：可以针对低版本浏览器书写特定的代码。
针对某一个特定的 IE版本有特殊写法：
<!--[if IE 6]>
<h3>只有IE6浏览器可以显示，高级浏览器或者IE高版本都认为是注释</h3>
<![endif]-->
只给IE6浏览器加js 代码
<!--[if IE 6]>
<script src=”js/png.js”></script>
<![endif]-->
css hack
css hack ：值的hack 和选择器hack
css值的hack
/* IE 6 */
.selector { _color: blue; }
.selector { -color: blue; }
Hack符：-、_
在属性名的前面加下划线或横线。
表示这个属性只有IE6认识，其他的都不认识这个属性。
/* IE 6/7 */
Hack符：! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |
表示这个属性只有IE6/7认识，其他的都不认识这个属性。
/* IE 8/9 */
.selector { color: blue\0/; }
Hack符：\0/。
需要写在属性值的后面。
只在IE8、9里认识。
/* IE 6/7/8/9/10 */
.selector { color: blue\9; }
Hack符：\9.
需要写在属性值的后面，分号前。
css选择器hack
/* IE 6 and below */
- html .selector {}
这种选择器只在IE6里加载，其他的浏览器认为你的选择器是错的。
高级浏览器认为html已经是根标签，*不是他的祖先元素。
/* IE 7 and below */
.selector, {}
这种选择器只在IE7及以下版本里加载，其他的浏览器认为你的选择器是错的。
/* 除了IE 6 */
html > body .selector {}
子级选择器：只选择儿子级，后代其他级别不选。
IE6不认识子级选择器。
除了IE6都能正常加载。
html > body .box{
width: 200px;
height: 200px;
background: orange;
color:#000;
}
IE6的兼容
选择器的兼容
IE6不兼容交集选择器里的类选择器连写（权重，可以渲染）。
div.box 可以兼容
div.box.cl 不兼容（注意）
解决办法：
使用标签和一个类的交集。
其他的7种选择器完美的兼容：
标签、id、类、交集（div.box）、后代、并集、通配符
div.box.cl{
width: 200px;
height: 200px;
background: orange;
}
div.box {
background-color: red;
}
//高级浏览器中.box.cl权重比.box高渲染为橘色
//IE6中.box 和.box.cl权重相同，css书写后面的层叠掉前面的颜色渲染为红色。
盒模型的兼容
如果不写DTD，IE6里的盒子是内减的，其他浏览器是外扩。
解决方法：
必须写DTD。
如果盒子高度小于默认字号，不会正常显示。高度会是默认的字号。
解决方法：
单独给IE6浏览器，强制给个很小的字号。
.box{
width: 200px;
height:3px;
background: orange;
-font-size:3px;
}
浮动的兼容
不浮动的盒子不会钻到底下
情况：一个盒子浮动，一个盒子不浮动，在IE6里，不浮动的盒子不会钻到浮动盒子的下面占领它原来的标准流位置。
解决办法：制作压盖效果用定位。同一级的盒子要浮动都浮动，要不浮动都不浮动。
pxbug
情况：一个浮动，一个不浮动，IE6里两个盒子之间会出现3px的间距。
解决方法：（不允许这么写）。
必须解决：给左边的浮动盒子加一个-3px的右margin。
只给IE6浏览器加，注意Hack符。
.box1{
width: 200px;
height: 200px;
background: pink;
-margin-right:-3px; //且只有ie6认识。
}
双倍margin问题
情况：一些元素浮动，有一个与浮动方向相同的方向的margin，第一个元素会出现双倍边距的问题。
.box p{
float: left;
margin-left:10px;
width: 100px;
height: 100px;
background: pink;
}
解决办法：①用父亲的padding去挤
.box{
width: 590px;
height: 100px;
border:1px solid #ddd;
margin:100px auto;
padding-left:10px;
}
.box p.first{
margin-left: 0;
}
②给第一个浮动的元素margin减半(只有IE6添加)
.box p.first{
-margin-left: 5px;
}
