Question

我是CSS的新手，我在理解以下代码如何工作时遇到了问题：

body {
width: 100%;
height: 100%;
}

我明白指定width: 100%时。

元素的总宽度将是其包含块的100％。包含块的主体是html，但是我的问题是html的大小是什么？

html的大小取决于用户的显示器分辨率？

如果是这种情况，那么当我创建一个网站并且用户百分比时，所有元素的大小将根据显示器的分辨率而变化？

我不确定我是否完全理解这个概念，所以任何帮助都将不胜感激。谢谢！

Answer 1

HTML元素实际上是viewport（浏览器窗口可见区域）body元素是页面的实际内容。

HTML

HTML根元素（<html>）表示HTML或XHTML的根文献。所有其他元素必须是此元素的后代。

Body

HTML Body（<body>）元素表示HTML的主要内容文献。文档中只有一个元素。

Answer 2

基于百分比的值始终基于其外部的对象（它的父级）。

要回答您的问题：在HTML中，您无法添加任何内容，HTML是head和body的父级。 body是实际内容的持有者。

为了解释CSS中的宽度百分比，我给出了这个例子：

<html>
    <body>
        <div id="grandparent" style="width:90%;">
            <div id="parent" style="width:80%;">
                <div id="child" style="width:70%;">
                </div>
            </div>
        </div>
    </body>
<html>

让我们假装我们正在500像素（px）宽的屏幕上观看。

body是祖父母的父母，因为div grandparent位于body内;它与文档具有相同的宽度，因为它是标准的CSS值。（就像我在这个例子中提到的那样是500px。）

grandparent宽度的90％body （450像素）
parent宽度的80％grandparent （360px）
child宽度的70％parent （252 px）

CSS体宽100％

2 个答案:

HTML

Body