一段无解的CSS,不知道原因!
首先定义一个外围的div,设置其背景颜色为green,然后再里面定义一个div,这个div设置上外边距为20像素 代码类似于这样
<style type="text/css"> body{color:#fff;} .pagecontent2 { background: red; } </style> <div class="pagecontent2" id="parentdiv"> <div style="margin-top: 20px;" id="childdiv"> 12 </div> </div>
按照我预想的效果是这样:
但是结果显示的却是:
也就是说id为childdiv的div的margin-top不是在父节点元素id为parentdiv 内进行上边距调整,而是基于body!
但是代码如下又是预料的结果:
<div class="pagecontent2" id="parentdiv">1 <div style="margin-top: 20px;" id="childdiv"> 12 </div> </div>
注意,这里在id为parentdiv的div多加了一个1,让其不仅只包含一个子div元素,也就是说如果上一个元素内容不为空,则下一个元素则基于上元素来进行调整!
但是代码换成这样:
<div class="pagecontent2" id="parentdiv"> <div style="margin-top: 20px;" id="childdiv"> 12 </div> <div style="margin-top: 20px;" id="Div1"> 12 </div> </div>
效果如下:
如果上述理解正确,那么这里是合理的!