CSS体宽100％

Question

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

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

我明白，当你指定width: 100% 。

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

html的大小取决于用户监视器的分辨率？

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

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

Answer 1

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

更多关于此：

html和body元素是父/子关系中不同的块级实体。

html元素的高度和宽度由浏览器窗口控制。

它是html元素（默认情况下）溢出：auto，导致滚动条在需要时出现。

body元素（默认情况下）position：static，这意味着它的定位子元素相对于html元素的坐标系定位。

在几乎所有现代浏览器中，页面边缘的内置偏移量通过body元素上的边距应用，而不是在html元素上填充。

HTML

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

身体

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是祖父母的父母，因为grandparent是在body ; 它与文档保持相同的宽度，因为它是标准的CSS值。 （就像我在这个例子中提到的那样是500px）。

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

CSS体宽100％

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-05-09 08:40:21

HTML

身体

解决方案2
1 2014-05-09 09:04:17

CSS体宽100％

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-05-09 08:40:21

HTML

身体

解决方案2 1 2014-05-09 09:04:17

解决方案1
2 已采纳 2014-05-09 08:40:21

解决方案2
1 2014-05-09 09:04:17