消息关闭
    暂无新消息!

关于body的margin问题

问题作者 : 小方2017-07-11发布
在DOM编程艺术综合示例中遇到一个问题。

body{
margin:1em 10%
}


这段代码是什么意思?这段空白区域代表什么含义呢?
这里的10%又是相对于谁的10%呢?
body应该就是整个浏览器可显示的部分啊,那这段代码导致的空白区域的意义在于什么呢实在是不明白。

还有我在body里添加背景色

body{
margin:1em 10%;
background-color: red;
}


红色也显示在了body的margin中。这又是为什么?
不应该显示在内容区和补白区吗。

3个回答

︿ 3
body{
margin:1em 10%;
background-color: red;
}

首先margin:1em 10%;
1em是指当前元素字体大小是body父元素(一般是html元素)的font-size字体的倍数,如果html的font-size是20px的话,这里的body的font-size也是20px。
em默认大小为16px。
10%是指当前元素父元素的长度width的10%。
假设你的DOM结构为
<html>
    <body>
    </body>
</html>
html元素的长度width为1200px,font-size为20px,
那么这里可以转换为
body{
margin:20px 120px;
background-color: red;
}


另外background-color: red;
若html元素没有设置background-color,那么浏览器窗口便会使用body的背景颜色作为浏览器窗口的背景颜色。
若html元素设置了background-color,那么浏览器窗口便会使用html的背景颜色作为浏览器窗口的背景颜色,而此时body的背景色便只指body自身的颜色。