元素背景色和全页面的关系？
0
悬赏园豆：10
[已关闭问题]
关闭于 2017-10-24 10:04
这是html：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>测试</title> <link rel="stylesheet" href="测试.css"> </head> <body> <h1 id="top">标题</h1> <p class="firstPart"> 哈雷路亚，阿里嘎多，索嘎是你. </p> <p class="secondPart"> 你猜我猜不猜你猜我猜你猜不猜？你猜我猜不猜你猜我猜你猜不 猜我猜？ </p> <p class="thirdPart"> How are you?I finedsnciusahfncaluhflaugfaiwgasj </p> <p class="img-center"> <a href="images/诸国的丰碑图1.html"> <img src="images-thumbnail/诸国的丰碑图1.jpg" alt="测试用图，随便找的" width="960" height="600"> </a> </p> <!--因为浏览器中鼠标移到链接会出现"file://..."链接文字，影响点击这个链接，所以用p框住居中。--> <p class="a-center"> <a href="#top">Back to top</a> </p> </body> </html>
我想让页面中间正文部分被背景色覆盖，返回顶部链接和文章名是白色背景，一开始我是这样弄的，打算用覆盖的方法：
body{ background-color:rgba(169,169,169,0.5); } h1{ background-color:white; } p{ text-decoration:underline; font-size:100%; line-height:150%; } /*设置正文不同段落的对齐方式*/ p.firstPart{ text-align:center; } p.secondPart{ text-align:left; } p.thirdPart{ text-align:right; } /*设置图片居中*/ p.img-center{ text-decoration: none; text-align:center; } /*让Back to top链接居中*/ p.a-center{ text-align:center; background-color:white; }
但是打开后发现边缘部分还是有灰色:
为什么h1上下左右还有边缘是灰色？难道说实际页面中边缘不算在元素里？既然这样的话，我设定body背景色为灰色就等价于设定元素p、h1、a背景色为灰色，那么不应该是页面有一圈白色么？但实际上我把css覆盖语句删除后却还是全灰：
所有回答(1)
0
解决了，是盒模型的问题。
首先，内边距和外边距之间有一个区别：元素的背景颜色（或背景图像）会延伸到内边距下面，但不会延伸到外边距。我们不能对内边距和外边距指定颜色或者任何装饰——但他们是透明的，某种意义上可以视为可以继承背景颜色或者背景图像。
在这里，我把body赋予颜色a，意味着其内边距以及内容都是颜色a，而body的内容就是整个页面的内容，这样看来body根本不存在外边距之说——因为页面就是内容，最多有个内边距和边框。由于外边距是透明的，所以h1的外边距继承了body的颜色，我改的只是h1的内边距颜色罢了——其实是改内容颜色，但是被透明的内边距“继承”了而已。。