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

最新推荐文章于 2024-06-18 22:41:25 发布

二木成林

最新推荐文章于 2024-06-18 22:41:25 发布

阅读量3.4k

点赞数 2

分类专栏： # CSS零碎知识点文章标签： HTML CSS 背景色全屏高度设置

本文链接：https://blog.csdn.net/cnds123321/article/details/109013276

版权

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

3 篇文章 0 订阅

订阅专栏

下面的代码创建一个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>

二木成林

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS零碎知识点（1）——设置全局背景色

下面的代码创建一个div盒子并设置背景色，但是不是全局背景色。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style type="text/css"> #app { background: #00FFFF; } </style> </head> <body> <div
复制链接

扫一扫

专栏目录