进击的css！

今天用easy-ui写了个登陆框，然后想要居中。于是在外围加了一个id=“mainBody”的div，然后css设为

#mainBody{width:30%;margin-top: 10%;margin-left: auto;margin-right: auto;}

之后，但是效果却是

margin-top设为10%，但是mainBody的外边距却将mainBody几乎挤到了中间。网上查了一下资料。

看到W3上这么说

<span style="font-family:SimSun;font-size:18px;">'margin-top', 'margin-bottom'Value:  <margin-width> | inheritInitial:  0Applies to:  all elements except elements with table display types other than table-caption, table and inline-tableInherited:  noPercentages:  refer to width of containing blockMedia:  visualComputed value:  the percentage as specified or the absolute lengthThese properties have no effect on non-replaced inline elements.</span>

我哩个大草，margin设为百分比时，基数只会是父元素的宽度。【css对您造成一次暴击！】

于是，朕又，，，啊不是，是我又写了一个demo。

css代码

#father{width:90px;height:100px;background-color:#CCC;}#son{width:10px;height:10px;background-color:#000;margin-top:10%;margin-left:10%;}</span>

HTML

<div id="father"><div id="son">        </div>    </div></span>

but！又出现了这个情况

margin-top呢！让你吃了吗！【css再次对您造成一次暴击！】

百度之，找到了原因：

贴吧上一个网友说：

 根据W3C盒子模型的规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

于是我又在#father里面加入了border:#000 1px solid;

然后，变成这样

好，继续。

查看一下盒模型

margin-top和margin-left的值为9，可见基数取自父元素的宽度