CSS零碎知识点（1）——设置全局背景色

最新推荐文章于 2024-08-31 18:52:20 发布

原创最新推荐文章于 2024-08-31 18:52:20 发布 · 3.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

CSS零碎知识点专栏收录该内容

3 篇文章

订阅专栏

这篇博客讲述了如何通过CSS样式将一个div元素的背景色设置为全屏显示。首先，通过设置html和body的高度为100%，确保父元素充满整个屏幕，然后将目标div的height设置为100%，从而实现背景色全屏覆盖的效果。

下面的代码创建一个div盒子并设置背景色，但是不是全局背景色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
    <style type="text/css">
    	#app {
        background: #00FFFF;
      }
    </style>
	</head>
	<body>
    <div id="app">设置背景色</div>
	</body>
</html>

通过检查元素，发现它的父元素都不是全局

通过下面的代码，设置父级元素100%高

      html,body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

现在发现父级元素已经是全局了

再设置当前DIV盒子的height为100%即可全局显示。

完整代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #app {
        background: #00FFFF;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="app">设置背景色</div>
  </body>
</html>