1、css hack
FF - #test{background-color:red !important}
IE9 - #test{ background-color:red\9\0}
IE8 - #test{ background-color:red\0}
IE7 - #test{ +background-color:red}
IE6 - #test{ _background-color:red}
2、如何使一个元素居中
非浮动元素可以设置:margin:0 auto
浮动元素设置父子元素同时左浮动,然后父元素相对左移50%,子元素相对右移50%(或者相对左移-50%):
#parent{
float:left;
position:relative;
left:50%;
}
#child{
float:left;
position:relative;
right:50%;
}
3、css盒装模型
每个元素都是一个盒装模型
4、浏览器兼容问题:
①、解决IE6双倍边距问题
对float元素,margin-left/magin-right:5px;在IE6下,会解释成10px;设置display:inline;即可解决
②、文字大小
font-size在不同浏览器占用的空间不同.如font-size:10px;在IE下占高12px,下留空白3px,FF下实际占高13px,上留白1px,下留白3px;给文字设置line-height可解决
③、吞吃现象
IE6下,上下两个div,上面的div设置背景的同时,发现下面的div也有了背景;解决方案:使用zoom:1;
④、多出一只猪
IE6下注释有bug,要使用“<!-[if !IE]>xxx<![endif]->”方式写注释
⑤、img留白
图片附近会有留白;设置display:block;可以解决
5、CSS3新特性
实现了圆角[w3c - border-radius:6px; ff - -moz-border-radius:6px; webkit - -webkit-border-radius:6px;]、阴影、透明背景rgba()以及更多的高级元素选择器
6、行级元素?块级元素?
行级元素:span、a、input、label、select、br、img(设置display:block显示成块级元素)
块级元素:div、h1-h6、p、ul、ol、dl、form、br(设置display:inline显示成块级元素)
行内元素高宽随内容而定,外边距和内边距都只对左右起作用;
P.S display:table-cell能让元素当作表格单元显示,table-cell元素必须在display:table的元素的子元素中出现,对于table-cell元素设置vertical-align:middle实现垂直居中
7、css引入方式?<link>与@import的区别?
css引入方式:①、<link rel="stylesheet" type="text/css" href="xxx">
②、@import引入,在页面中使用必须放在<style>...</style>中或在一个css文件中导入另一个css文件@import url(xxx);
③、在<style>中定义样式
<style type="text/css">
xxx
</style>
④、使用style属性
<li style="xxx">
<link>与@import的区别:
加载顺序不同,前者在页面加载时也同时加载相应的css文件,后者则等页面全部被加载完成之后再引入样式表
8、CSS选择器优先级?
使用!important可以改变样式优先级为最高,其次是style对象,然后是id>class>tag,另外在统计样式,按照后出现的样式具有高优先级
!import > '<style>对象' > id > class > tag