css 设置背景颜色失效？

您所在的位置：网站首页 › ps设置背景色没反应 › css 设置背景颜色失效？

css 设置背景颜色失效？

2024-03-23 09:02| 来源: 网络整理| 查看: 265

用于登录页，大概是要实现这个样子在这里插入图片描述其实事情有点简单，直接给body设置一个背景颜色，再让中间的盒子居中就好了，先贴一下代码。

body,html{ margin:0; padding:0; background-color: rosybrown; } .box1{ position: absolute; background-color: royalblue; width: 500px; height: 500px; top:50%; left: 50%; transform: translate(-50%, -50%); }

问题就在于，这边给套了个盒子，然后给这个盒子设置颜色，死活出不来颜色，然后去研究了一下定位，奇怪的知识又增加了！！！

我是里面的居中盒子

失败设置

.box{ position:relative; //看这里 width: 100%; height: 100%; background-color: rosybrown; } .box1{ position: absolute; background-color: royalblue; width: 500px; height: 500px; top:50%; left: 50%; transform: translate(-50%, -50%); }

失败效果：在这里插入图片描述

看了一下，此时body高度为0，box 高度也为0，应该就是这个原因；把box的position改成absolute，就可以了；此时body高度为0，box高度没有；

什么原因呢？查了一下俩个属性的区别，有可能是文档流的问题： relative 是在文档流中的，absolute是脱离文档流的当页面没有东西（没有在文档流中的元素）的时候页面高度是0，所以给文档流中的元素设置height：100%是没有作用的给脱离文档流的盒子设置height：100%可能就是相对于浏览器高度的了

个人见解，如果错误，劳请指正！！

至于为什么relative的时候里面的盒子剩下一半了，因为这个时候里面的盒子是在相对于那个高度为零的box盒子进行定位

【本文地址】

css 设置背景颜色失效？

css 设置背景颜色失效？

今日新闻

推荐新闻