为啥我在标题背景上添加的颜色不可见？ [复制]
Posted
技术标签:
【中文标题】为啥我在标题背景上添加的颜色不可见？ [复制]【英文标题】：why isn't the color I added on the header background visible? [duplicate]为什么我在标题背景上添加的颜色不可见？ [复制] 【发布时间】：2018-03-21 21:29:41 【问题描述】：尝试将背景颜色应用于我的标题，但为什么 #header 背景颜色不可见？我试过了
header 背景：灰色；宽度：100%；边距：0 自动
我也尝试了不同的颜色，但它似乎不起作用。我是这个领域的新手，所以任何帮助将不胜感激。我附上了html和css代码。
*
margin: 0 auto
#slogan
background: #063540;
color: white;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: small;
width: 100%;
padding-left: 8%;
#header
background: grey;
width: 100%;
margin: 0 auto
a
text-decoration: none;
#logo a
color: #063540;
#logo
float: left;
padding-left: 8%;
color: #063540;
margin-top: 20px;
.navbar
float: right;
top: 0px;
padding-right: 20%;
margin-top: 20px;
.navbar a
padding-left: 25px;
color: #063540;
font-size: 14pt;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<title>MyWebsite</title>
</head>
<body>
<p id="slogan">We are creative agency</p>
<div id="header">
<div id="logo">
<a href="/">
<h1>MyWebsite</h1>
</a>
</div>
<div class="navbar">
<a href="/">Home</a>
<a href="/">About</a>
<a href="/">Services</a>
<a href="/">Projects</a>
<a href="/">Pages</a>
<a href="/">Blog</a>
<a href="/">Contact</a>
</div>
</div>
</body>
</html>【问题讨论】：
【参考方案1】：这是因为您的 header 中有浮动元素，所以您需要清除浮动元素。
当浮动元素位于容器框内时会出现问题，该元素不会自动强制容器的高度调整为浮动元素。当一个元素浮动时，其父元素不再包含它，因为浮动已从流中移除。
请参考link了解更多。
#header:before, #header:after
content: "";
clear: both;
display: table;
*
margin: 0 auto
#slogan
background: #063540;
color: white;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: small;
width: 100%;
padding-left: 8%;
#header
background: grey;
width: 100%;
margin: 0 auto
#header:before, #header:after
content: "";
clear: both;
display: table;
a
text-decoration: none;
#logo a
color: #063540;
#logo
float: left;
padding-left: 8%;
color: #063540;
margin-top: 20px;
.navbar
float: right;
top: 0px;
padding-right: 20%;
margin-top: 20px;
.navbar a
padding-left: 25px;
color: #063540;
font-size: 14pt;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<title>MyWebsite</title>
</head>
<body>
<p id="slogan">We are creative agency</p>
<div id="header">
<div id="logo"><a href="/"><h1>MyWebsite</h1></a></div>
<div class="navbar">
<a href="/">Home</a>
<a href="/">About</a>
<a href="/">Services</a>
<a href="/">Projects</a>
<a href="/">Pages</a>
<a href="/">Blog</a>
<a href="/">Contact</a>
</div>
</div>
</body>
</html>【讨论】：
我建议对您添加的代码添加更多解释；） 或更准确地说，因为all #header 中的内容是浮动的。任何非浮动内容都会增加高度。【参考方案2】：
#header中的所有元素都是浮动的，所以#header超出了正常的文档流。
方法一）
#header:after
content: '';
display: block;
clear: both;
*
margin: 0 auto
#slogan
background: #063540;
color: white;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: small;
width: 100%;
padding-left: 8%;
#header
background: grey;
width: 100%;
margin: 0 auto;
#header:after
content: '';
display: block;
clear: both;
a
text-decoration: none;
#logo a
color: #063540;
#logo
float: left;
padding-left: 8%;
color: #063540;
margin-top: 20px;
.navbar
float: right;
top: 0px;
padding-right: 20%;
margin-top: 20px;
.navbar a
padding-left: 25px;
color: #063540;
font-size: 14pt;
<p id="slogan">We are creative agency</p>
<div id="header">
<div id="logo"><a href="/"><h1>MyWebsite</h1></a></div>
<div class="navbar">
<a href="/">Home</a>
<a href="/">About</a>
<a href="/">Services</a>
<a href="/">Projects</a>
<a href="/">Pages</a>
<a href="/">Blog</a>
<a href="/">Contact</a>
</div>
</div>方法二）
在 html 代码中插入<br style="clear: both">：
*
margin: 0 auto
#slogan
background: #063540;
color: white;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: small;
width: 100%;
padding-left: 8%;
#header
background: grey;
width: 100%;
margin: 0 auto;
a
text-decoration: none;
#logo a
color: #063540;
#logo
float: left;
padding-left: 8%;
color: #063540;
margin-top: 20px;
.navbar
float: right;
top: 0px;
padding-right: 20%;
margin-top: 20px;
.navbar a
padding-left: 25px;
color: #063540;
font-size: 14pt;
<p id="slogan">We are creative agency</p>
<div id="header">
<div id="logo"><a href="/"><h1>MyWebsite</h1></a></div>
<div class="navbar">
<a href="/">Home</a>
<a href="/">About</a>
<a href="/">Services</a>
<a href="/">Projects</a>
<a href="/">Pages</a>
<a href="/">Blog</a>
<a href="/">Contact</a>
</div>
<br style="clear: both">
</div>【讨论】：
【参考方案3】：这是因为标题中的子元素具有浮动属性，当元素具有浮动属性时，它们实际上并未呈现为块元素 https://***.com/a/16568504/2894798 这就是为什么默认情况下您的标题高度为 0，所以要修复它，我会添加一个明确的修复属性，
*
margin: 0 auto;
#slogan
background: #063540;
color: white;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: small;
width: 100%;
padding-left: 8%;
#header
background: grey;
width: 100%;
margin: 0 auto;
a
text-decoration: none;
#logo a
color: #063540;
#logo
float: left;
padding-left: 8%;
color: #063540;
margin-top: 20px;
.navbar
float: right;
top: 0px;
padding-right: 20%;
margin-top: 20px;
.navbar a
padding-left: 25px;
color: #063540;
font-size: 14pt;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<title>MyWebsite</title>
</head>
<body>
<p id="slogan">We are creative agency</p>
<div id="header">
<div id="logo"><a href="/"><h1>MyWebsite</h1></a></div>
<div class="navbar">
<a href="/">Home</a>
<a href="/">About</a>
<a href="/">Services</a>
<a href="/">Projects</a>
<a href="/">Pages</a>
<a href="/">Blog</a>
<a href="/">Contact</a>
</div>
<div style="clear:both;">
</div>
</body>
</html>【讨论】：
以上是关于为啥我在标题背景上添加的颜色不可见？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章