why isn't the color I added on the header background visible?
This question already has an answer here:
It because you have floating element in your header so you need to clear the float element.
The problem happens when a floated element is within a container box, that element does not automatically force the container's height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow.
Please refer this link for more understanding.
#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 elements inside #header are float, so #header get out of normal flow of document.
Method 1)
#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>发生这种情况是因为标题中的子项具有浮动属性，当元素具有浮动属性时，它们实际上不会呈现为块元素https://stackoverflow.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>上一篇: HTML和CSS'浮动'属性
下一篇: 为什么我在标题背景上添加的颜色不可见？