1.!important拥有最高的优先级,几乎所有浏览器都支持!important,除了IE6(不完全支持)
例1(IE6支持,颜色为#e00):
.cssClass{color:#e00!important;} .cssClass{color:#000;}
例2(IE6不支持,颜色为#000):
.cssClass{color:#e00!important; color:#000}
2.display:inline-block应用此特性的元素呈现为内联对象,四周元素保持在同一行,但可以设置宽度和高度等块元素的属性
并不是所有浏览器都支持此属性
在低版本IE中对元素使用display:inline-block,行级元素不会有任何问题,但块级元素则不然...
对于行级元素,解决办法:
.cssClass{display:inline-block; zoom:1;...}
对于块级元素,要想在IE6、IE7中达到inline-block的效果,解决办法:
.cssClass{display:inline-block; zoom:1; *display:inline;...}
3.绝对定位时,层与层之间的叠盖问题
有以下代码:
<div id="block1"><div id="block3">A</div></div> <div id="block2"><div id="block4">B</div></div>
<style type="text/css"> #block1{background:#f0c; border:1px dashed #000; position:absolute; left:0px; top:0px; width:100px; height:100px; z-index:2;} #block2{background:#fc4; border:1px dashed #000; position:absolute; left:120px; top:0px; width:100px; height:100px; z-index:3;} #block3{background:#c7f; border:1px dashed #000; position:absolute; left:60px; top:0px; width:50px; height:50px; z-index:10;} #block4{background:#f00; border:1px dashed #000; position:absolute; left:-20px; top:0px; width:50px; height:50px; z-index:1;} </style>
结果是z-index只有1的block4挡住了block3,也能挡住block1,原因是受到其父元素block2的影响(z-index值大于block1)
同理,block3不能挡住block2,原因是受到其父元素block1的影响(z-index值小于block2)
绝对定位的定位基准是最近的被定位的父级元素(该元素的定位可以是 absolute 或 relative ),若没有就一直往上一级直到body。而相对定位的定位基准则是他本身在固定定位时的所处位置。
4.经典的屏幕宽度自适应的左中右三列布局(左右列宽度固定,中间列宽度自适应)
解决方案1:
<div id="head">头部(3列布局,左右两栏宽度固定,中间栏自适应宽度)</div> <div id="content"> <div id="left">左栏固定宽度为200px</div> <div id="right">右栏固定宽度为200px</div> <div id="center">中间自适应宽度</div> </div> <!--注意这里,中间3列的div的顺序不是"左中右",而"左右中",中间一列写在最后--> <div id="foot">底部</div>
<style type="text/css"> #head{margin-bottom:10px;} #content{overflow:hidden;} #left{float:left; width:200px;} #center{margin:0 210px;} #right{float:right; width:200px;} #foot{margin-top:10px; clear:both;} div{background-color:#eee; border:dotted 1px #000;} </style>
当然,在最外层添加一个宽度固定,居中的层,就可以定义页面整体的最大宽度了。
这种布局方式最大的缺点是中间块的内容宽度不能太大,若果大于“屏幕横向分辨率-左右两块宽度之和”,那中间列就“下沉”了
解决方案2:
<div class="main"> <div class="head">head</div> <div class="wrap"> <div class="content">content</div> <div class="left">left</div> <div class="right">right</div> <div class="clear"></div> </div> <div class="foot">foot</div> </div>
<style type="text/css"> .main{width:auto; margin:0 auto; text-align:center;} .head{height:150px; line-height:150px; background:#F00;} .wrap{padding:0 300px 0 200px; overflow:hidden;} .content{float:left; width:100%; height:300px; background:#0F0;} .left,.right{position:relative; _display:inline; height:300px;} .left{width:200px; float:left; margin-left:-100%; right:200px; _right:-300px; background:#00F;} .right{width:300px; float:right; margin-right:-300px; background:#FF0;} .clear{clear:both; height:0px; line-height:0px; overflow:hidden;} .foot{height:150px; line-height:150px; background:#0FF;} </style>
这个方案代码比方案1代码复杂了不少,但这方案是目前所知的最好、最经典的解决方案
5.怎样使一张大小不定的图片在容器里水平且垂直居中显示
解决方案1:
<div class="box"> <img src="images/icons.png" alt="11"/> <span></span> </div>
<style type="text/css"> .box{width:600px;height:600px;border:1px solid #000; text-align:center;} span{display:inline-block;height:100%;vertical-align:middle;} img{ vertical-align:middle;} </style>
解决方案2:
<div> <p><img src="logo.gif" /></p> </div>
<style type="text/css"> div{ width:500px; height:500px; border:1px solid #ccc; overflow:hidden; position:relative; display:table-cell; text-align:center; vertical-align:middle; } div p{ position:static; +position:absolute; top:50%; } img{ position:static; +position:relative; top:-50%; left:-50%; width:276px; height:110px; } </style>