CSS的叠加

 

CSS中的叠加分为以下三种：

1、上下叠加

CSS部分：

#div1{ width:200px; height:50px; margin-bottom:30px; background:#ffff00;} 

#div2{ width:200px; height:50px; margin-top:20px; background:#ff00ff;}

HTML部分：

<div id="div1">&nbsp;</div> <div id="div3"> 

    <div id="div4">      

    </div> 

</div>


<div id="div2">&nbsp;</div>

当一个div有向下空白边，第二个div有向上空白边时，两者的空白边发生叠加，叠加后的空白边值取值大者。

 

2、内部叠加

 CSS部分：

#div3{ width:200px; height:100px; margin-top:50px; background:#00ffff;} 

#div4{width:200px; height:60px; margin-top:30px; background:#0f0fff;}

HTML部分：

<div id="div3"> 

    <div id="div4">      

    </div> 

</div>

当两个div都有向上的空白边时，发生叠加，叠加后的空白边值取值大者。

 

3、自我叠加

CSS部分：

#div5{width:200px; margin-top:20px;margin-bottom:20px; background:#f0f0f0;} 

#div6{width:200px; height:50px; background:#0f0f0f;}

HTML部分：

<div id="div5"></div> 

<div id="div6"></div>

当第一个div是一个空div（没内容、没设定高）时，第一个div的空白边发生自我叠加。