body背景色&body余白

最新推荐文章于 2024-05-31 14:53:24 发布
原创 最新推荐文章于 2024-05-31 14:53:24 发布
· 1.5k 阅读 · 0 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

目标分析代码(html5中 html标签和body标签都可以省略)：

<head>
<style>
	* { border: 2px solid #aaa; }
	body { background-color:#abcdef; }
</style>
</head>

1.body和html的margin

各浏览器效果不同，在safari浏览器下面代码执行后，显示body是有margin的，即离浏览器边缘有一定距离。在显示网页时如果想让显示的内容100%在窗口种显示，需要将html和body的比margin设置为0.


2.body的背景色表现为向上继承，即body以外的部分html所属部分也会显示为body的背景色。原因的话可能是因为在css种不会有人去定义html标签的样式，这样一来body就成了样式设置的root标签，那么body标签的背景色铺满屏幕也就理所当然啦。如果想让body外背景色显示不一样，则需要设置html标签的背景色。

Vue - 详细实现为每个页面单独设置 body 背景色，利用 JS 为每个页面单独修改背景色（独立修改单个页面的背景色，不同页面设置不同的背景颜色）
王二红
08-17 6789
Vue-每个页面单独设置body背景色（独立修改单个页面的背景色，不同页面设置不同的背景颜色），为不同页面设置body背景颜色，vue单独页面bodycss样式设置，vue.js每个页面page自定义body颜色，vue中怎么修改单个页面body的背景色，Vue中如何实现为单独页面设置背景色，Vue-cli中如何为单独页面设置背景色，如何改变vue单页面body的背景颜色，Vue不同页面body设置不同背景颜色，vue框架中单页面文件更改body,html页面背景颜色。.........
SwiftUI 设置页面背景色，设置 body 背景色
github_29300109的博客
04-08 2272
设置 body 内的视图的背景色即可 如果导航栏和主视图背景色不一致，需要再去设置导航栏的背景色
css body的背景颜色设置
weixin_30698297的博客
09-01 1987
一：使用标签类型定义样式 1.内部样式 body的背景颜色设置的一个代码样例 <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> css背景</title> </head> <styl...
body与背景色的问题
qq_44850230的博客
09-05 486
一个div块级元素没有主动为其设置宽度和高度，浏览器会为其分配可使用的最大宽度(比如全屏宽度)，但是不负责分配高度，块级元素的高度是由子元素堆砌撑起来的。那么，html和body标签的高度也都是由子级元素堆砌撑起来的。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=
body元素的背景色
Handsome_fan的博客
08-23 7310
今天下午在研究3D旋转导航的代码的时候无意中发现了body元素设置背景色的特殊情况，即body的背景色是不受body本身的宽高的影响的。 示例代码： Document html{ height: 100px; } body{ margin:0; padding:0; background-color:#f00; height: 2
神奇的现象——body背景
最新发布
weixin_52648900的博客
05-31 363
关于设置body背景出现一个神奇的现象。
解决设置了body宽高，但设置背景颜色仍然会铺满问题
生如夏花 炫至茶靡
06-17 8942
近期开发遇到一个问题，命名给body设置了宽高，然后给body设置背景，背景仍然会铺满整个屏幕。以下是我的代码： body{ width: 200px; height:200px; margin: 0 auto; background: green;
JS动态修改网页body的背景色实例代码
11-28
总结来说，这段JS代码通过以下步骤实现了动态修改网页body背景色： 1. 创建一个CSS样式元素，设置body的背景色。 2. 将样式元素添加到文档的头部。 3. 监听DOM节点移除事件，当发生时重新添加样式元素，确保背景色...
CSS实现body背景层高于块元素的方法
09-25
这是一个关键步骤，因为绝对定位使元素脱离正常文档流，而负的`z-index`值确保了`.box`元素会被body背景层覆盖。 ```css .box{ width: 100%; height: 50%; background-color: green; z-index: -1; /* 这使得....
html、body元素默认背景颜色范围
cdhawk的博客
12-03 985
html、body元素默认背景颜色范围
body没有高度设置背景色为什么可以全屏显示？
关注我！带你一路 "狂飙" 到底！
01-06 558
当我们没有设置任何高度的情况下，给body设置背景色，颜色竟然是可以布满浏览器的，然而可以看到控制台中，body实实在在是没有高度的，这究竟是为什么呢？而在我看来，实际是我们设置的body背景色[生效了]，但因body默认高度为0，所以在页面中并没有粉色区块显示，那我们尝试在body中添加一些内容。这怎么和预想不一样，再放大页面看一下渐变，就可以发现每个渐变的高度和html的高度是一致的，而html的高度则是body的默认margin撑开。】赋上了颜色，可以理解为，body的背景色被浏浏览器”吃掉“
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没设置高度背景色为什么会全屏显示？
04-06 621
还记得我们开发全屏页面或者是移动端页面时经常会设置一句话 是不是只知道用？却不知道怎么回事？ 原因是，当没有内容撑开高度时，html和body的默认高度是0，如果内容想要按照比例或是撑满全屏时，就没办法正常使用百分比。 而如果只设置body { height: 100%; }，这时body以html的高度为基准，但html默认高度也是0，所以需要设置html与body高度同与浏览器等高 但是，当我们没有设置任何高度的情况下，给body设置背景色，颜色竟然是可以布满浏览器的，然而可以看到控
CSS篇：给一个容器设置一层白色背景和一道半透明白色边框，body的背景会从它的半透明边框透上来。
tigerwxm630的博客
07-04 2294
例如：给一个容器设置一层白色背景和一道半透明白色边框，body的背景会从它的半透明边框透上来。 效果如图： 第一步，将网页背景颜色设置为红色，绘制一个矩形，并设置边框的颜色为半透明白色边框。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=<div class="board"> &.
CSS入门——背景样式
qq_45823118的博客
03-31 2403
背景样式1.背景颜色任务描述相关知识代码文件2.背景图片任务描述相关知识代码文件3.背景颜色任务描述相关知识代码文件 1.背景颜色 任务描述 本关任务：在本关中，我们将学习如何使用CSS去更改HTML元素的背景属性。 本关任务完成之后的效果图如下： 完成如下要求： 设置body的背景颜色(background)为象牙色(ivory)； 设置段落p的背景颜色(background)为浅蓝色(lightblue)。 相关知识 背景色 我们可以使用background-color为元素设置背景色，通常属
关于body设置了范围后，背景颜色依旧铺满屏幕
m0_54241271的博客
10-29 562
这是js代码块 body{ border: 1px solid #ff0000; width: 30%; height: 300px; text-align: center; background-color: darkkhaki; margin-left: auto; margin-right: auto; ...
就今天给body设置宽高并设置背景颜色的疑问和理解
一根破棍子的博客
03-29 6971
问题：在给body设置了1000px的宽度并且设置了红色为背景颜色，红色覆盖了整个页面而不是只覆盖1000px的宽度网上找到的说法是这样的下面验证一下这个想法首先创建好一个基本的html文件,设body的背景色为red效果如下接着，向body里面加个div，给背景设为白色，然后居中，并且不给div宽度，代码如下 效果如下  body的实际宽度是和子类div中的宽度一样的，那为什么body的背景是覆...
body和html到底有多高&&浏览器的背景色问题
小丸子的Blog
08-26 3588
在此之前我一直以为在浏览器里html默认和浏览器窗口等高，而body默认和html等高，现在想想自己为什么会这么想，主要是因为这个: body{ background:blue; }当我这么干的时候，得到了这个结果： 看，body的背景色占据了整个浏览器窗口，这样想来body撑开浏览器什么的也不是匪夷所思了，但书上告诉我们正常情况的高度是不会继承的，那么这个body到底有多高呢？
vue 页面改body背景色
04-01
在 Vue 中改变 body 背景色，需要在根组件（一般是 App.vue）中使用 mounted 钩子函数，并通过 document.body.style.backgroundColor 来改变背景色，代码如下： ```html <template> <div> <!-- 页面内容 --> </div> </template> <script> export default { name: 'App', mounted() { document.body.style.backgroundColor = '#f2f2f2'; // 修改背景色 } } </script> ``` 在 mounted 钩子函数中执行操作，可以保证在页面渲染完成后修改背景色。注意，直接在模板中使用 style 属性设置 body 的背景色是无效的，因为模板中的样式只会作用于组件内部的元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值