我正在努力建立一个流畅布局的网站。所以为了做到这一点，我试图使用百分比作为测量。如果我没有弄错，百分比是从父元素计算的。由于html标签没有任何设置宽度，body标签如何计算100％宽度？ 100％表示您正在查看页面的屏幕的完整分辨率吗？
感谢
答案 0 :(得分：2)
您必须read the specs才能找到问题的答案：
https://www.w3.org/TR/CSS22/visudet.html#x3说的宽度百分比：
<强>＆LT;百分比＆GT; 指定百分比宽度。百分比是 根据生成的框的包含的宽度计算 块
关于包含块：
https://www.w3.org/TR/CSS22/visudet.html#containing-block-details说：
有时会计算元素框的位置和大小 相对于某个矩形，称为包含块 元件。元素的包含块定义如下：
根元素所在的包含块是一个矩形 称为初始包含块。对于连续媒体，它有 视口的尺寸，并固定在画布原点;
（...）
根元素是＆lt; html＆gt; （https://www.w3.org/TR/html-markup/html.html）。
屏幕被视为连续媒体。
视口与画布之间的关系很简单：
https://www.w3.org/TR/CSS22/visuren.html#viewport https://www.w3.org/TR/CSS22/intro.html#canvas
连续媒体的用户代理通常会为用户提供视口（ a 用户可以通过屏幕上的窗口或其他查看区域） 咨询文件。用户代理可以在何时更改文档的布局 视口大小调整（请参阅初始包含块）。
当视口小于画布的区域时 文档被渲染，用户代理应该提供滚动 机构。
因此，尝试简化此操作时，画布大小会考虑内容大小，即使它不适合浏览器窗口。
浏览器窗口包含视口（不考虑菜单，滚动条和状态栏）。
因此，如果<body>的宽度为100％，则意味着它与<html>元素的宽度相同，宽度等于视口的宽度。
您可以通过检查Chrome上的<html>元素的CSS来轻松找到视口宽度。
答案 1 :(得分：0)
body代码的100％宽度意味着html宽度的100％，这也是视口的全宽，桌面上将是浏览器窗口，在移动设备上的屏幕宽度。
答案 2 :(得分：-1)