就今天给body设置宽高并设置背景颜色的疑问和理解

最新推荐文章于 2025-06-07 08:28:40 发布
最新推荐文章于 2025-06-07 08:28:40 发布
阅读量6.9k 收藏 10
点赞数 2
CC 4.0 BY-SA版权
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wang414300980/article/details/79741908
本文探讨了在CSS布局中，当body元素设置了特定宽度和背景颜色时，背景色覆盖范围的问题。通过实验验证了默认情况下，未指定宽度的子元素会继承父元素的宽度，导致背景色覆盖整个页面的现象。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题：

在给body设置了1000px的宽度并且设置了红色为背景颜色，红色覆盖了整个页面而不是只覆盖1000px的宽度


网上找到的说法是这样的


下面验证一下这个想法

首先创建好一个基本的html文件,设body的背景色为red

效果如下

接着，向body里面加个div，给背景设为白色，然后居中，并且不给div宽度，代码如下

 效果如下

 

 

body的实际宽度是和子类div中的宽度一样的，那为什么body的背景是覆盖整个页面，继续上代码

效果如下

确实是这样！

因此可以得出结论：默认情况下，我们直接操作body的话，body会被浏览器当做根结点来对待，子类(子类没有设置宽的前提下）会等于父类设置的宽，在没有设置任何html的背景色（或其他）属性时，body的高是都是无效的


所以，还是在body之后添加一个div实在一些~~~

【Flutter】Flutter 中的字体管理 如何自定义字体 如何使用字体
Code Metaverse
10-29 959
很高兴和大家一起探讨 Flutter 项目中的资源管理，特别是字体管理这一块。字体可能看似微不足道，但在实际的应用开发中，它却能极大地影响用户体验。
在 html 中用加色法混合颜色
see11see 的专栏
05-28 4607
本文通过解决一个假想的问题介绍了 css screen 混合模式，并介绍了如何用 svg 滤镜、canvas 2d、canvas webgl 实现相同的效果。
html，body设置背景色透明
热门推荐
baokx的专栏
06-19 2万+
html，body设置背景色透明 今天在项目的改版中遇到一个问题，div设置的背景图片（蓝色的），其调用的iframe里面的白色背景挡住了div的背景，后来经查看原来是在样式里统一引用了html,body{background:#fff;}       打开firefox看到body的背景色显示是body{background:#fff;}是调用的css里面的，想办法去除，但样式是通用的，
神奇的现象——body背景
weixin_52648900的博客
05-31 364
关于设置body背景出现一个神奇的现象。
Bootstrap：前端开发的强大工具
最新发布
hello！
06-07 1154
Bootstrap是Twitter开发的开源前端框架，提供HTML、CSS和JavaScript组件，帮助快速构建响应式网站。主要特点包括响应式布局、丰富UI组件和浏览器兼容性。可通过CDN或本地安装引入，核心功能包括12栏栅格系统、按钮、表单等组件以及响应式断点控制。Bootstrap还提供间距、文本等实用类，并支持通过SASS定制样式。其模块化设计和跨设备一致性使其成为现代前端开发的高效工具。
html自动切换body背景,html中怎么用body元素设置背景颜色
weixin_42511887的博客
06-01 2481
html中怎么用body元素设置背景颜色发布时间：2020-06-22 15:17:45来源：亿速云阅读：137作者：Leah这篇文章运用简单易懂的例子给大家介绍html中怎么用body元素设置背景颜色，代码非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。body元素用于设置背景颜色的属性是bgcolor。语法：bgcolor属性用于规定文档的背景颜色示例：W3School.com....
虽然body设置高度，但是背景色还是会铺满整个屏幕！
weixin_44430893的博客
03-22 984
有height和width的body标签的背景色铺满整个窗口问题 今天在写css代码中遇到一个问题，就是我想为body设置一个背景色，但是当我设置完之后，发现整个屏幕都跟着变色了。于是我怀疑是不是我的body占据了整个窗口，height和width没有设置好。经过给我body设置边框之后，发现的确不是我高度设置的问题。情况如下图所示： 相关代码如下： <!DOCTYPE html> <!DOCTYPE html> <html> <head> <m
body css样式中 设置宽度和背景色
ios0213的专栏
06-22 1万+
无标题文档 body{ padding:0; margin:0; margin:0 auto; background-color:#069; width:80%; height:800px; border:1px solid #F00; } div{ height:200px; width:200px; border:1px solid #0F0; } 如上
前端问题之body没设置高度背景色为什么会全屏显示？
xiaoxijinger的博客
04-09 256
还记得我们开发全屏页面或者是移动端页面时经常会设置一句话 是不是只知道用？却不知道怎么回事？ 原因是，当没有内容撑开高度时，html和body的默认高度是0，如果内容想要按照比例或是撑满全屏时，就没办法正常使用百分比。 而如果只设置body { height: 100%; }，这时body以html的高度为基准，但html默认高度也是0，所以需要设置html与body高度同与浏览器等高 但是，当我们没有设置任何高度的情况下，给body设置背景色，颜色竟然是可以布满浏览器的，然而可以看到控制台中，bod
三年级英语下册 Unit 1 My Body教学案 陕旅版-陕旅版小学三年级下册英语教学案.doc
10-17
- 互相帮助理解一般疑问句的用法。 - 小组合作使用“Does it have...?”造句并回答。 - **展示交流：** - 小组内练习用英语描述身体各部位。 - 班级展示，描述自己或他人身体的各个部位。 - **点拨升华：** -...
GS+文档和帮助资源：深入理解GS+的完整指南
[GS+文档和帮助资源：深入理解GS+的完整指南](https://www.pusr.com/d/file/20191114/62107e75d8fcebedc90d06f68b711568.jpg) # 摘要 GS+作为一个综合性的技术文档工具，其基础知识、文档结构、编辑排版技巧、技术...
css body的背景颜色设置
weixin_30698297的博客
09-01 1992
一：使用标签类型定义样式 1.内部样式 body的背景颜色设置的一个代码样例 <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> css背景</title> </head> <styl...
<body></ body >里的属性
BERWIN89的博客
12-24 3598
HTML 标签 里的属性： bgcolor设置页面背景颜色  即页面背景色为红色；  background设置背景图片  bgproperties=fixed是设置背景图片不随滚动条的滚动而滚动，直接加在地址后面即可。 即网页文字为绿色 对于链接中的文字，link，vlink，alink分别对应：普通超级链接，访问过的超级链接，当前活动的超级链接。 如，当前颜色为粉色，点击时
body元素的常用属性
weixin_30540691的博客
01-21 1189
一、bgcolor属性 　　a、bgcolor 　　　　设置文档的背景颜色。 　　b、用法　　　　　 <body bgcolor="red"> body的常用属性！ </body>　　　 　　c、效果 　　　　 二、alink属性 　　a、alink　　　　 　　alink 属性规定文档中活动链接（active link）的的颜色。 ...
HTML 常用标签属性汇总一〈body〉标签
m0_38073539的博客
11-26 1072
body background—position ： 90％ ，90％〉 背景图片x与y轴的位置。〈body background—repeat : repeat〉 重复排列—网页预设。〈body background-repeat ： repeat-x〉 在x轴重复排列。〈body background—repeat ： no—repeat> 不重复排列。16进制的数码有： 0,1，2,3，4,5，6,7,8，9,a,b，c，d，e,f.：包括:text，link，alink，vlink，
设置了body的最大宽度，但是为什么body的背景颜色还铺满整个页面？
m0_61547956的博客
04-10 1194
当html标签无背景样式时，body的背景色其实不是body标签的背景色，而是整个页面的的。一旦html标签含有背景色，则body的背景色变成了正常的body标签的背景色，而此时的html标签最顶级，背景色被浏览器获取，成为整个页面的背景色。 body { min-width: 320px; max-width: 750px; margin: 0 auto; height: 2000px; line-height: 1.5; font-family: Ar
Vant rem适配
Xiaocong__的博客
12-31 2087
vue中使用vant的rem适配 如果需要使用 rem 单位进行适配，推荐使用以下两个工具： postcss-pxtorem是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位 lib-flexible用于设置 rem 基准值 首先需要安装，安装命令如下： npm install postcss-pxtorem --save-dev 用于将单位转化为rem npm i -S amfe-flexible 设置基准值 怎么使用 首先创建一个postcss.js...
Reset CSS和Normalize CSS
03-23
<think>好的，用户想了解Reset CSS和Normalize CSS的区别及用法。我需要先回顾这两个概念的基本定义和它们在网页开发中的作用。 首先，Reset CSS的目的是重置浏览器默认样式，确保在不同浏览器下元素样式的一致性。常见的做法是将所有元素的margin、padding等归零，比如Eric Meyer的Reset CSS。但这样做可能会带来一些问题，比如所有元素样式都被抹平，需要从头开始定义，增加了工作量，也可能影响某些浏览器内置的合理默认样式[^1]。 然后是Normalize CSS，由Nicolas Gallagher等人开发。它的理念不是完全重置样式，而是保留有用的浏览器默认样式，并修复浏览器间的样式不一致问题。这样做的好处是维护了元素的合理默认值，同时修正了跨浏览器的差异，比如统一标题的大小，修复表单元素的字体继承问题等。 接下来需要考虑用户的使用场景。用户可能是在开发一个需要跨浏览器兼容的项目，或者在优化现有项目的样式统一性。用户可能对浏览器默认样式的影响有基本了解，比如引用[1]提到的浏览器默认样式、框架样式和自定义CSS的关系，所以需要解决方案来处理这些默认样式带来的不一致问题。 用户的需求可能不仅仅是了解两者的区别，还希望知道如何选择和使用。需要比较两者的优缺点，适用场景，以及实际应用中的最佳实践。例如，Reset适合需要完全控制样式的情况，而Normalize适合希望保留合理默认样式并减少重复工作的情况。 可能还需要提到两者的具体用法，比如如何在项目中引入，是否需要结合其他工具或框架。例如，Bootstrap等框架可能有自己的重置策略，这时候是否需要额外使用Reset或Normalize。此外，引用[2]的问题提到margin-top和margin-bottom对内联元素的影响，这可能涉及到默认样式的调整，Reset或Normalize是否处理了这类问题。 还要注意用户提供的引用内容，尤其是引用[1]提到的浏览器默认样式的影响，所以回答中需要强调这两种工具如何应对这种影响。同时，引用[3]涉及旧版浏览器的测试，可能Normalize对旧版浏览器的支持更好，需要确认这一点。 最后，生成的相关问题需要围绕用户可能的进一步疑问，比如如何选择、如何结合使用、各自的优势等。确保问题能够引导用户深入理解两者的应用场景和技术细节。</think>### Reset CSS与Normalize CSS的区别及用法 #### 一、核心区别 1. **设计理念** - **Reset CSS**：通过强制清除所有浏览器默认样式来实现统一性，例如将元素的`margin`、`padding`归零，移除列表符号等。例如： ```css * { margin:0; padding:0; } ``` 这种做法可能导致开发者需要从头定义所有样式。 - **Normalize CSS**：保留并修复浏览器默认样式的合理性，仅修正跨浏览器不一致的问题。例如统一`<h1>`的字体大小，修复`<sup>`的垂直对齐问题[^1]。 2. **对默认样式的处理** - Reset会完全消除默认样式（如`<ul>`的列表符号），可能影响语义化标签的特性。 - Normalize会保留`<button>`的默认背景色等合理样式，仅调整不一致部分。 3. **代码复杂度** - Reset通常代码量较少（如Eric Meyer的Reset约300行）。 - Normalize代码更复杂（约400行），包含详细的浏览器兼容注释。 #### 二、使用场景 - **选择Reset CSS的情况**： - 需要完全控制视觉设计，不依赖任何默认样式。 - 项目对浏览器兼容性要求较低（旧版IE需额外适配）。 - **选择Normalize CSS的情况**： - 希望保留合理的默认样式（如表单元素的基础交互效果）。 - 需支持广泛浏览器（包括旧版IE和移动端）[^3]。 #### 三、实际应用示例 1. **Reset CSS引入** ```html <link rel="stylesheet" href="reset.css"> <style> /* 自定义样式需从头定义 */ body { font-family: Arial; } </style> ``` 2. **Normalize CSS引入** ```html <link rel="stylesheet" href="normalize.css"> <style> /* 可直接基于修正后的默认样式扩展 */ .button { padding: 0.5em 1em; } </style> ``` #### 四、性能与兼容性 - **Reset**可能因过度重置导致CSS文件体积增加（需覆盖更多元素）。 - **Normalize**通过`@media`查询和条件注释优化了移动端和旧版IE的支持。 #### 五、现代开发实践 1. **混合使用**：在Normalize基础上局部重置特定组件。 2. **结合CSS框架**：如Bootstrap内置了部分Reset逻辑，此时无需重复引入。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值