为什么html元素的宽度未设置为页面的100％？

I'm in the beginning of HTML and CSS and I'm stuck in the layout area and position things, One of the most confusing things I face is: the html width is related to the width of its child, By inspecting element in the browser its width changes along with the width of its child. Although when I apply linear gradient to it (html) and draw a border around it, the border surround just that inherited width (from the child!!), but the gradient applied to the full page and outside the border, as it applied to the margin!! the most confusing:: that gradient width is equal to the width of the (say div element inside the body) and is repeated for the whole page! What's going on?!

我正处于HTML和CSS的开头，我陷入布局区域并定位事物，我面临的最令人困惑的事情之一是：html宽度与其子宽度相关，通过检查元素浏览器的宽度随其子宽度而变化。虽然当我对它应用线性渐变（html）并在其周围绘制边框时，边框仅包围继承的宽度（来自子项!!），但渐变应用于整页和边框外，因为它应用于保证金!!最令人困惑的是：渐变宽度等于（比如体内的div元素）的宽度，并且对整个页面重复！这是怎么回事？！

the code:

代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style>
        html
        {
            border:5px solid red;
            background-image:linear-gradient(to top, yellow, blue);
        }
        div
        {
            border:5px solid green;
        }
        h1
        {
            background-color:lightslategray;
            border:5px solid black;
            margin:0px;
        }
    </style>
</head>
<body>
    <div>
    <h1>div is the standard block-level element. A block-level element starts on a new line and stretches
    out to the left and right as far as it can. Other common block-level elements are p and form,
    and new in HTML5 are header, footer, section, and more.</h1>
    </div>
</body>
</html>

2 个解决方案

#1

First off, there is little to no reason putting graphics inside the <html> tag. Use the body tag for all your graphical needs, since that will be the visible part of the webpage and use the HTML strictly for rules applying to the wole page, such as the default font.

首先，几乎没有理由将图形放在标签内。使用body标签满足您的所有图形需求，因为这将是网页的可见部分，并严格使用HTML来应用于wole页面的规则，例如默认字体。

If you want a border around the whole page, use the <body> instead.

如果您想在整个页面周围使用边框，请改用。

The reason is because all elements stack inside one other, and a border is drawn Around the element. You can put the border inside the element by using box-sizing: border-box; in your css.

原因是因为所有元素都堆叠在一起，并且在元素周围绘制了边框。您可以使用box-sizing：border-box将边框放在元素中;在你的CSS。

For the HTML not using the full page, you can set that by using width: 100%; and height: 100%;. HTML follows the rules it is given, and by default it only uses the space it is required instead of using everything it can.

对于不使用整页的HTML，您可以使用width：100％设置;和身高：100％; HTML遵循它给出的规则，默认情况下它只使用它所需的空间而不是使用它所能做的一切。

#2

The html and body tags are special in that they define the background of a website as a whole; by default this is often white (#fff). However these elements themselves do not fill the entire screen space by default, they are only as large as the content found within (unless otherwise specified through styling).

html和body标签的特殊之处在于它们定义了整个网站的背景;默认情况下，这通常是白色（#fff）。但是，默认情况下，这些元素本身并不会填满整个屏幕空间，它们只与内部找到的内容一样大（除非通过样式另行指定）。

If the background of these elements didn't fill the entire screen, we'd be in a strange situation whereby the browser itself would have a background and the website would appear to sit on top of it. Developers would be forced to define the widths and heights of these elements if they didn't want the browser's own background to be visible, and I imagine testing would become a bit of a nightmare.

如果这些元素的背景没有填满整个屏幕，我们将处于一种奇怪的情况，即浏览器本身将具有背景，并且网站似乎位于其顶部。如果他们不希望浏览器自己的背景可见，开发人员将*定义这些元素的宽度和高度，我想测试会变得有点噩梦。

#1