首页新闻找找看学习计划

元素背景色和全页面的关系?

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覆盖语句删除后却还是全灰:

问题补充:

由于是用记事本写的,格式上不对齐,见谅....

wuduojia的主页 wuduojia | 初学一级 | 园豆:197
提问于:2017-10-23 18:53
< >
分享
所有回答(1)
0

解决了,是盒模型的问题。

首先,内边距和外边距之间有一个区别:元素的背景颜色(或背景图像)会延伸到内边距下面,但不会延伸到外边距。我们不能对内边距和外边距指定颜色或者任何装饰——但他们是透明的,某种意义上可以视为可以继承背景颜色或者背景图像。

在这里,我把body赋予颜色a,意味着其内边距以及内容都是颜色a,而body的内容就是整个页面的内容,这样看来body根本不存在外边距之说——因为页面就是内容,最多有个内边距和边框。由于外边距是透明的,所以h1的外边距继承了body的颜色,我改的只是h1的内边距颜色罢了——其实是改内容颜色,但是被透明的内边距“继承”了而已。。

wuduojia | 园豆:197 (初学一级) | 2017-10-24 10:03
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册