一般元素的background-color覆盖该元素的content,border,和padding。而margin不会显示该背景颜色,而是由外层元素的背景色决定。但body有所不同。如
`<body>
body
<div id="container">
div
</div>
</body>`
设置css属性:
```
<style>
#container{ border:1px solid olive; height:300px; background-color: yellow;}
`<body>
body
<div id="container">
div
</div>
</body>`
设置css属性:
```
<style>
*{margin:20px;padding:20px;}
html{border:1px solid red;}
body{ height:500px; border:1px solid blue; background-color:pink;}#container{ border:1px solid olive; height:300px; background-color: yellow;}
</style>
显示如下:
div的黄色背景只覆盖到border,而没有覆盖margin,但body的背景色覆盖了整个界面,包括padding,margin,
但如果更改html的设置html{border:1px solid red; background-color:#eee;},显示如下。body的背景色只包含到border,margin颜色由外层html的颜色决定。
所以结论如下:
(1)一般div元素的background-color只覆盖到border,而其margin的颜色由外层元素的背景色决定。
(2)body元素的background-color覆盖了除子元素之外的部分,包括其自身的margin。
(3)但当html设置background-color,body的background-color就只覆盖到border,与一般div元素相同。而html的背景色覆盖了body的border以外的部分。