一般元素的background-color覆盖该元素的content,border,和padding。而margin不会显示该背景颜色,而是由外层元素的背景色决定。但body有所不同。如
`<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以外的部分。

background-color覆盖范围相关推荐

  1. R语言ggplot2在可视化图像中添加横线并在横线中添加文本、为横线中添加的文本添加文本框、自定义文本框的填充色(background color for a text annotation)

    R语言ggplot2在可视化图像中添加横线并在横线中添加文本.为横线中添加的文本添加文本框.自定义文本框的填充色(background color for a text annotation) 目录

  2. R语言ggplot2可视化自定义可视化结果的背景色(background color)实战:改变整个画板(panel)的背景色、改变图像(plot)区域的背景色

    R语言ggplot2可视化自定义可视化结果的背景色(background color)实战:改变整个画板(panel)的背景色.改变图像(plot)区域的背景色 目录

  3. Python使用matplotlib可视化自定义背景色实战:自定义可视化图像的背景色(Background Color)

    Python使用matplotlib可视化自定义背景色实战:自定义可视化图像的背景色(Background Color) 目录

  4. html body background color,HTML Style backgroundColor用法及代码示例

    HTML DOM中的backgroundColor属性用于设置或返回元素的背景色. 用法: object.style.backgroundColor 它返回元素的背景色. object.style.b ...

  5. jQuery获取div的背景颜色 How to get background color of div?

    直接代码: <script type="text/javascript"> $(document).ready(function(){$("div" ...

  6. android按钮背景颜色函数,Android按钮背景颜色(Android button background color)

    Android按钮背景颜色(Android button background color) 我想在我的应用程序中设置按钮的背景颜色,我无法实现我想要的结果... 我试图设置的颜色是holo_gree ...

  7. android:background=@color/white [create file color.xml at res/values/]

     < resources > < color name ="white" >#FFFFFF </ color > <!-- 白色 -- ...

  8. How to change the background color of button in Footer area

    Opportunity的s3在init的时候有加载custom css的文件 ```javascript jQuery.sap.includeStyleSheet(jQuery.sap.getModu ...

  9. android 设置各种颜色 android:background=@color/white

    [create file color.xml at res/values/] <?xml version="1.0" encoding="utf-8"?& ...

  10. python shell背景颜色改变_科学网—Python Shell Background Color - 李旭的博文

    ArcGIS在安装时就已经默认在本机安装了Python.可是,Python Shell的界面看起来太亮了,对眼睛不太好啊,如图1. 图1 在网上搜索一番,之前也有和我同样问题的帖子,不过,时间有点久了 ...

最新文章

  1. 在featureDataset和workspace下創建featureclass
  2. java注解管理_JavaSpring【四、Bean管理注解实现】
  3. ddr4 dqs 频率_一张图看懂如何选择DDR4内存的频率和容量
  4. Angular 应用级别的依赖 Fake
  5. 森拓品牌邀您参加第15届中国模具之都博览会
  6. linux有关信号的FAQ
  7. sqlserver有外键无法创建触发器_数据库不使用外键的 9 个理由
  8. angular将html导出为pdf,如何使用Angular进行转换:将HTML转换为PDF
  9. Struts2框架学习之一:Hello World程序
  10. Android之SwipeRefreshLayout下拉刷新组件
  11. P1969 积木大赛
  12. JDK和CGLIB生成动态代理类的区别
  13. 怎么寻找java实例,Java 实例 – 在指定目录中查找文件
  14. Windows加密视频播放器使用教程
  15. 传感技术复习笔记(10)——光纤传感器
  16. payload sql注入_Web安全:SQL注入工具
  17. Oracle 只读表空间 说明
  18. Coinbase眼中的侧链和layer2解决方案
  19. Win10 1809美化
  20. 梦想起航商务工作PPT模板

热门文章

  1. (Android)很抱歉,“xx”程序已经停止运行
  2. ESP8266-Arduino编程实例-PCF8575IO扩展器驱动
  3. 程序员怎么提高英语阅读水平?
  4. netsh端口映射与端口转发
  5. cc2530自组网的网络结构是什么?在哪里可以修改
  6. C# Windows桌面应用 ---- 实例:文件读写
  7. 数字后端入行门槛和条件?附入行进阶必读书籍丨建议收藏
  8. 数据库在网站中的作用
  9. android 启动页主题_如何使用主题和启动器个性化您的Android手机
  10. 有关urlrewrite