发表新帖
发表新帖

Giving background-color to body applying whole page. Why?

后端 未结
关注
6 2003
梦谈多话
梦谈多话 2021-01-05 00:10
相关标签:
6条回答
  • 日久生厌
    2021-01-05 00:40

    height you see in inspect is min-height That is equal height's element div, background-color change max-height That is equal 100% his parents(html).

    For Example:

    change min-height and run inspect and see result :

    body {
   background-color: red;
   min-height: 200px;
}
    <div>Hello World!</div>

    So, You see height in inspect Change 200px; But color red cover whole page.

    0 讨论(0)
  • 有刺的猬
    2021-01-05 00:44

    it's actually pretty logic. First of all <html> and <body> tags are required tags in a webpage. Where the <html> tag contains all of the <html> code the <body> tag holds all of the contents.

    Consider this standard structure for a basic HTML document:

    <!DOCTYPE html>
<html lang="en">

  <head>
    <!-- Metadata and such -->
  </head>

  <body>
    <!-- Where the content begins -->
  <body>

</html>

    The spec defines as the root element of a document, and we can clearly see that in the above example: the element is the very top level of all other elements. The buck stops there because there are no more levels beyond that from which styles can be inherited.

    From there, and make up the only two elements that fall directly inside . In fact, the spec defines directly in contrast to since those are the only two elements that need to be distinguished.

    So, the bottom line here is that is the root element of a document where is a descendent contained within it. In fact, there is a :root selector in CSS. These target the exact same thing.

    It's tempting to think that any styles we want to be inherited across the board should be applied directly to <html> because it is the root element of the document. <html> supersedes <body> in hierarchy, so it follows that it must contain all global styles.

    But that's not exactly the case. In fact, inline attributes for the following were originally assigned to <body> in the spec:

    • background
    • bgcolor
    • marginbottom
    • marginleft
    • marginright
    • margintop
    • text

    The background-color

    There is a weird thing in CSS where the background-color on <body> floods the whole viewport even if the metrics of the element itself don't cover that whole area. Unless the background-color gets set on the html element, then it doesn't.

    If flooding is the goal, it can be smart to just set it on the html element to begin with.

    0 讨论(0)
  • 借酒劲吻你
    2021-01-05 00:44 

    .some{

    background-color: red;

}
    <div class="some">Hello World!</div>

    try this, as if you give color to body the whole webpage will be colored

    0 讨论(0)
  • 既然无缘
    2021-01-05 00:46

    CSS tricks has a related post in merit link . It seems that body styles are expanded to html because:

    html is the root element of a document where body is a descendent contained within it. In fact, there is a :root selector in CSS. These target the exact same thing

    0 讨论(0)
  • 渐次进展
    2021-01-05 00:53

    Body means all page that display in the browser. so you want give color only to div you can use either a id or a class to give a style to that dive. as in first answer.

    <body>
    <div class="some">Hello World!</div>
</body>

.some{
   background-color: red;
}

    or

    <body>
    <div id="some">Hello World!</div>
</body>

#some{
   background-color: red;
}
    0 讨论(0)
  • 不知归路
    2021-01-05 01:01

    The main reason is because the HTML takes the background-color of BODY since:

    The background of the root element becomes the background of the canvas and covers the entire canvas [...]

    So since the default background-color of HTML is transparent it will take the one from BODY. However applying a color to both the HTML and BODY elements you will see that the BODY background doesn't cover the whole page anymore. 

    html {
  background-color: blue;
}

body {
  background-color: red;
}
    <html>

<body>
  <div>Hello World!</div>
</body>

</html>

    The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for background-position) at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.

    For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values of transparent for background-color and none for background-image, user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.

    From W3 - 14 Colors and Backgrounds.

    0 讨论(0)
 看不清?
提交回复
热议问题