极客观点
研发管理
HarmonyOS
为什么背景色能铺满整个页面？
<html>元素此时的height只有8px啊(这8px还是body的外边距撑开的) 先看代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
</body>
</html>/*
为什么背景色能铺满整个页面？
<html>元素此时的height只有8px啊(这8px还是body的外边距撑开的)
*/
html{
background-color: lightblue;
border:2px solid red;
}
运行效果:
另外,经常看到这种写法,结合上面的例子展示的特性,感觉也挺奇怪的:
html,body{
height:100%;
}第一个问题，html标签是一个容器，猜测是代表整个页面可视区，包括但不限于内容区域，页面展示的内容都是来自body中。
第二个问题关于高度设置100%，这种是因为body的高度一般是由内容撑起来的，100%这个种写法是会继承父元素高度，当你写一个div，然后想设置100%充满全屏的时候必然是需要给body，html设置的。当然还可以使用vh
1.因为浏览器认为html是根节点，所以背景色会填充到浏览器渲染的可视区域.
建议：往下移节点到body,设置你需要的css样式，并且激活html根节点样式html{background-color:#fff;}
2.楼上已解决了。
8 回答4.5k 阅读✓ 已解决
6 回答3k 阅读✓ 已解决
6 回答2.1k 阅读
5 回答6.2k 阅读✓ 已解决
3 回答2.4k 阅读
5 回答1.1k 阅读✓ 已解决
3 回答2.4k 阅读✓ 已解决
你这个背景色是body继承html的,你这个8px是因为没有设置初始样式margin: 0;padding: 0; 设置之后就没有了,,下面这个是去除之后的,在css中有些属性是可以继承父级有些则不可以,具体可以参考一下这个http://www.php.cn/css-tutoria... 第二个问题是因为子级不能继承父级的height,所以要设置height:100%,这个和width属性不一样,width如果不设置,默认就和父级width一致,当然前提子级是有宽度的,比如行内块或者块状元素,行内元素没有宽度当然就不能继承父级的width.这个可以参考这个,https://segmentfault.com/a/11...