将 background-color 用于某些 css 样式时存在差异

Question

所以我在这里粘贴代码：

<!doctype html>

<head>

    <title>Skeleton website</title>

    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
            background-color: gray;
        }
        .pagewidth
        {
            width: 1250px;
            /*background-color: gray;*/
        }
        #header
        {
            text-align: center;
            background-color: white;
        }
        .clinks
        {
            display: inline;
            background-color: white;
        }
        #maincontent
        {
            background-color: black;
        }
        #partition_1
        {
            width: 310px;
            min-height: 100px;
            background-color: red;
            float: left;
            border-left: solid 1.25px black;
            border-right: solid 1.25px black;
        }
        #partition_2
        {
            width: 310px;
            min-height: 100px;
            background-color: blue;
            float: left;
            border-left: solid 1.25px black;
            border-right: solid 1.25px black;
        }
        #partition_3
        {
            width: 310px;
            min-height: 100px;
            background-color: green;
            float: left;
            border-left: solid 1.25px black;
            border-right: solid 1.25px black;
        }
        #partition_4
        {
            width: 310px;
            min-height: 100px;
            background-color: violet;
            float: left;
            border-left: solid 1.25px black;
            border-right: solid 1.25px black;
        }
        #partition_1_h
        {
            width: 310px;
            height: 20px;
            background-color: orange;

        }
        #partition_2_h
        {
            width: 310px;
            height: 20px;
            background-color: pink;

        }
        #partition_3_h
        {
            width: 310px;
            height: 20px;
            background-color: white;

        }
        #partition_4_h
        {
            width: 310px;
            height: 20px;
            background-color: yellow;

        }
    </style>


</head>

<body>
    <div class = "pagewidth" id = "header">
        <div id = "logo">Logo goes here</div>

        <div id="controllinks">
            <div class = "clinks" id="Clink1">Link 1</div>
            <div class = "clinks" id="Clink1">Link 2</div>
            <div class = "clinks" id="Clink1">Link 3</div>
        </div>
    </div>  
        <!-- <div id = "headerlinks"></div> -->
    <div class = "pagewidth" id = "maincontent">
        <div id = "partition_1">
            <div id = "partition_1_h"></div>
        </div>
        <div id = "partition_2">
            <div id = "partition_2_h"></div>
        </div>
        <div id = "partition_3">
            <div id = "partition_3_h"></div>
        </div>
        <div id = "partition_4">
            <div id = "partition_4_h"></div>
        </div>
    </div>


    <div class = "pagewidth" id = "footer"></div>
    <script type="text/javascript" src = "jquery.min.js">

    </script>
</body>

我认为这是一个非常标准的网站框架！所以这是我的问题：为什么不应用 background-color: #header 样式部分中的白色？如果您注意到样式部分开头的位置，我已经为所有元素应用了 0 边距和填充，除非另有说明。之后，我确保为网页上的所有不同元素添加不同的 background-color 属性。它们工作得很好并且完美地覆盖了 * css 样式。但是，就 header id 而言，它无法用指定的白色覆盖应用于整个网页的灰色。有谁知道为什么会这样？我很困惑，老实说有点沮丧。这一定是我遗漏的一个细节，但我需要第二双眼睛和一只手来拍打我的头并为我指明正确的方向。

非常感谢！非常感谢！

干杯。

Answer 1

您可以使用以下修改后的 CSS #header ::

#header
{
 text-align: center;
 background-color: white;
 float: left;
 width: 100%;
 display: block;
}

并使用：

   *
    {
        margin: 0;
        padding: 0;
    }
  body{
  background-color: gray;
  }

Answer 2

这是因为您已将 background-color: gray 应用于所有元素。这意味着#logo 和#controllinks 元素的背景颜色为灰色。由于这些元素位于页眉内部，您将看不到页眉的背景颜色。

相反，您应该为正文提供灰色背景颜色，而不是所有元素。

CSS

* {
    margin: 0;
    padding: 0;
}

body {
   background-color: gray;
}

查看代码笔here

Answer 3

您的#logo div 没有任何特定的 css 因此它变成了 *{background-color:grey;} 并覆盖了#header。如果减小#logo 的大小，您可以看到带有白色背景的#header div 所以而不是 *{background-color:grey;} 给出 body{background-color:grey;}

将 background-color 用于某些 css 样式时存在差异

Discrepancy in using background-color for some css styling

html

css

web-site-project