DIV+CSSのよくある面接問題

1.!importantは最高の優先度を持ち、ほとんどのブラウザでサポートされています!important、IE 6以外(不完全サポート)
例1(IE 6サポート、色は#e 00):

.cssClass{color:#e00!important;} 
.cssClass{color:#000;}  

例2(IE 6はサポートされておらず、色は#000):

.cssClass{color:#e00!important; color:#000} 

 
2.display:inline-blockこのプロパティを適用した要素はインラインオブジェクトとして表示され、周囲の要素は同じ行に維持されますが、幅や高さなどのブロック要素のプロパティを設定できます.
すべてのブラウザがこのプロパティをサポートしているわけではありません
低バージョンIEでは、要素にdisplay:inline-blockを使用します.行レベルの要素には問題はありませんが、ブロックレベルの要素はそうではありません.
行レベル要素の解決方法:

.cssClass{display:inline-block; zoom:1;...}

ブロックレベルの要素については、IE 6、IE 7で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のblock 4のみがblock 3をブロックし、その親要素block 2の影響を受けるためblock 1をブロックすることもできる(z-index値がblock 1より大きい)
同様に、block 3は、親要素block 1の影響を受けるため、block 2をブロックすることができない(z-index値はblock 2より小さい)
絶対位置決めの位置決め基準は、最近位置決めされた親要素(absoluteまたはrelativeであってもよい)であり、そうでなければbodyまで1段上に進む.相対的な位置決めの位置決め基準は、彼自身が位置決めを固定する際の位置である.
 
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つの幅の和」よりも大きいと、中間列は「沈み込む」ことになる.
 
ソリューション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枚の大きさの不定のピクチャーを容器の中で水平で垂直に中央に表示させます
ソリューション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>