DIV+CSS常见面试题

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:;...}

对于块级元素，要想在IE6、IE7中达到inline-block的效果，解决办法：

.cssClass{display:inline-block; zoom:; *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="data: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>