解决设置了body宽高,但设置背景颜色仍然会铺满问题

近期开发遇到一个问题,明明给body设置了宽高,然后给body设置背景,背景仍然会铺满整个屏幕。以下是我的代码:

[html]  view plain  copy
  1.   

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title></title>  
  6.     <style>  
  7.         body{  
  8.             width: 200px;  
  9.             height:200px;  
  10.             margin: 0 auto;  
  11.             background: green;  
  12.         }  
  13.     </style>  
  14. </head>  
  15. <body>  
  16.   
  17. </body>  
  18. </html>  

代码看出,我给body设置了宽高并设置居中,然后设置颜色为green,结果却是这样的:


可以看到,绿色的背景铺满了整个浏览器。

经过查询资料,出现以上的原因主要是因为:

当html不设置背景时,body的背景将作为整个浏览器的背景色,而不是body标签自己的背景色。当设置html背景色后,body的背景色就变成了body自己的背景色,此时html的背景色将被浏览器获取成为浏览器的背景色。

所以,要让body的背景色渲染范围只在设置的body范围之内,我们需要对html进行背景样式的设置,这里我们给html设置一个#fff白色的背景色,代码如下:

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title></title>  
  6.     <style>  
  7.         html{  
  8.             background: #fff;  
  9.         }  
  10.         body{  
  11.             width: 200px;  
  12.             height:200px;  
  13.             margin: 0 auto;  
  14.             background: green;  
  15.         }  
  16.     </style>  
  17. </head>  
  18. <body>  
  19.   
  20. </body>  
  21. </html>  

得到的效果如下:


到这里就解决了设置了body宽高,但设置背景颜色仍然会铺满的问题。


  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值