当我为 body 标签使用 100% 宽度时，我如何知道使用了多少像素
how do I know how many pixels are being used when I use 100% width for the body tag
我正在尝试制作一个布局流畅的网站。因此，为此我尝试使用百分比作为衡量标准。如果我没记错的话，百分比是根据父元素计算的。由于 html 标签没有设置宽度，body 标签如何计算 100% 宽度？ 100% 是否表示您正在查看页面的屏幕的全分辨率？
谢谢
仅使用 HTML 和 CSS 不足以获得宽度，您需要使用 Javascript，甚至更好，像 jQuery 这样的框架将帮助您获得 body 的宽度。
使用 jquery 代码看起来像这样：
$(document).width();
您可以了解更多信息 here。
您必须 read the specs 才能找到问题的答案：
https://www.w3.org/TR/CSS22/visudet.html#x3 表示百分比宽度：
<percentage>
Specifies a percentage width. The percentage is
calculated with respect to the width of the generated box's containing
block.
关于包含块：
https://www.w3.org/TR/CSS22/visudet.html#containing-block-details 说：
The position and size of an element's box(es) are sometimes calculated
relative to a certain rectangle, called the containing block of the
element. The containing block of an element is defined as follows:
The containing block in which the root element lives is a rectangle
called the initial containing block. For continuous media, it has the
dimensions of the viewport and is anchored at the canvas origin;
(...)
根元素是 (https://www.w3.org/TR/html-markup/html.html).
屏幕被认为是连续媒体。
viewport和canvas的关系很简单：
https://www.w3.org/TR/CSS22/visuren.html#viewport
https://www.w3.org/TR/CSS22/intro.html#canvas
User agents for continuous media generally offer users a viewport (a
window or other viewing area on the screen) through which users
consult a document. User agents may change the document's layout when
the viewport is resized (see the initial containing block).
When the viewport is smaller than the area of the canvas on which the
document is rendered, the user agent should offer a scrolling
mechanism.
因此，为了简化这一点，canvas 大小考虑了内容大小，即使它不适合浏览器 window。
浏览器 window 包含视口（不考虑菜单、滚动条和状态栏）。
因此，如果 <body> 的宽度为 100%，这意味着它将与 <html> 元素的宽度相同，后者的宽度等于视口的宽度。
您可以通过检查 Chrome 上的 <html> 元素的 css 轻松找到视口宽度。
body 标签的 100% 宽度表示 html 宽度的 100%，这又是 viewport 的全宽，在桌面将是浏览器 window，在移动设备上是屏幕宽度。
我正在尝试制作一个布局流畅的网站。因此，为此我尝试使用百分比作为衡量标准。如果我没记错的话，百分比是根据父元素计算的。由于 html 标签没有设置宽度，body 标签如何计算 100% 宽度？ 100% 是否表示您正在查看页面的屏幕的全分辨率？
谢谢
仅使用 HTML 和 CSS 不足以获得宽度，您需要使用 Javascript，甚至更好，像 jQuery 这样的框架将帮助您获得 body 的宽度。
使用 jquery 代码看起来像这样：
$(document).width();
您可以了解更多信息 here。
您必须 read the specs 才能找到问题的答案：
https://www.w3.org/TR/CSS22/visudet.html#x3 表示百分比宽度：
<percentage> Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block.
关于包含块：
https://www.w3.org/TR/CSS22/visudet.html#containing-block-details 说：
The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:
The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin;
(...)
根元素是 (https://www.w3.org/TR/html-markup/html.html).
屏幕被认为是连续媒体。
viewport和canvas的关系很简单：
https://www.w3.org/TR/CSS22/visuren.html#viewport https://www.w3.org/TR/CSS22/intro.html#canvas
User agents for continuous media generally offer users a viewport (a window or other viewing area on the screen) through which users consult a document. User agents may change the document's layout when the viewport is resized (see the initial containing block).
When the viewport is smaller than the area of the canvas on which the document is rendered, the user agent should offer a scrolling mechanism.
因此，为了简化这一点，canvas 大小考虑了内容大小，即使它不适合浏览器 window。
浏览器 window 包含视口（不考虑菜单、滚动条和状态栏）。
因此，如果 <body> 的宽度为 100%，这意味着它将与 <html> 元素的宽度相同，后者的宽度等于视口的宽度。
您可以通过检查 Chrome 上的 <html> 元素的 css 轻松找到视口宽度。
body 标签的 100% 宽度表示 html 宽度的 100%，这又是 viewport 的全宽，在桌面将是浏览器 window，在移动设备上是屏幕宽度。