css reset
/*css reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockguote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0}
address,caption,cite,code,dfm,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%,font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0}
1>
em / px
16px = 1 em
在body选择器中声明 Font-size = 62.5%;
将原来的px数值除以10 ,然后换上em作为单位;
重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
em 定义的字体具有继承特性
2>
在ie6具有双外边距
所以在设置float:left float:right 之外,如何还设置了 margin-left:10px;
在IE6下,就会变成margin-left:20px; 所以 要设置 display:inline
3>
为了让浮动元素的父容器能够根据浮动元素的高度而自适应高度
给父容器挂一个特殊的class,直接从父容器清楚浮动元素的浮动
<div classs="clearfix"><div class="fl"></div></div>
.clearfix {clear:both}
4>
Div居中问题 div设置 margin-left, margin-right 为 auto 时已经居中,IE 不行,
IE需要设定body居中,首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。
5>
IE6专用 _height:100px;
IE7专用 *+height:100px;
IE6 IE7共用 *height:100px
IE7 FF 共用 height:100px !important
6> FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
7>若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
8>IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:opacity:0.6。
9>设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/
}
css hack
1. IE条件注释
<!--[if IE]><![endif]-->
2.选择符前缀法
3.解决超链接访问后hover样式不出现的问题
a:visited在前
a:hover 在后
link visited hover active
3.display:inline-block 让块级元素和行内元素在一行中。
/*css reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockguote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0}
address,caption,cite,code,dfm,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%,font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0}
1>
em / px
16px = 1 em
在body选择器中声明 Font-size = 62.5%;
将原来的px数值除以10 ,然后换上em作为单位;
重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
em 定义的字体具有继承特性
2>
在ie6具有双外边距
所以在设置float:left float:right 之外,如何还设置了 margin-left:10px;
在IE6下,就会变成margin-left:20px; 所以 要设置 display:inline
3>
为了让浮动元素的父容器能够根据浮动元素的高度而自适应高度
给父容器挂一个特殊的class,直接从父容器清楚浮动元素的浮动
<div classs="clearfix"><div class="fl"></div></div>
.clearfix {clear:both}
4>
Div居中问题 div设置 margin-left, margin-right 为 auto 时已经居中,IE 不行,
IE需要设定body居中,首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。
5>
IE6专用 _height:100px;
IE7专用 *+height:100px;
IE6 IE7共用 *height:100px
IE7 FF 共用 height:100px !important
6> FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
7>若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
8>IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:opacity:0.6。
9>设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/
}
css hack
1. IE条件注释
<!--[if IE]><![endif]-->
2.选择符前缀法
3.解决超链接访问后hover样式不出现的问题
a:visited在前
a:hover 在后
link visited hover active
3.display:inline-block 让块级元素和行内元素在一行中。