Question

我们可以使用像素或百分比设置元素E的填充和边距属性。

A）我假设当我们使用百分比时，百分比值是指包含块的宽度？因此，如果E直接在<body>元素内声明，则包含块为<body>，百分比值指的是<body>元素的宽度。

B）<body>元素的默认宽度是多少？

感谢。

修改

如果我将E的填充设置为50％：

   #E
   {
      padding: 50%;
   }

然后E的“padding-left + padding-right”的宽度将等于视口的宽度（当视口在整个屏幕上展开时）。

A）因此，我假设<body>的宽度（以像素为单位）取决于监视器的水平分辨率和视口的宽度？我的屏幕分辨率设置为1024 * 768，因此在我的情况下，<body>的宽度为1024px（假设视口在整个屏幕上展开）？但如果我要将分辨率更改为800 * 600，那么<body>的宽度将为800px？

Answer 1

是的，CSS将应用于包含它的元素。
<body>代码的默认宽度百分比为100％。

通常，您应该使用链接到HTML的CSS文件，并使用CSS Selectors选择要设置样式的元素。将CSS嵌入到HTML中是不好的做法，因为这不是很容易维护（即如果你需要在网站上更改样式）。

修改

#E { padding: 50%; }

是：
的快捷方式
#E { padding-top: 50%; padding-right: 50%; padding-left: 50%; padding-bottom: 50%;}

关于％代表什么，它的视口宽度，即内部浏览器窗口中的像素数，显示HTML，与屏幕分辨率无关。

如果您要将窗口分辨率更改为800px * 600px，则视口宽度将略小于800px，因为滚动条会占用其中的一部分。

Answer 2

body的默认宽度为100％，html是body的父容器，因此在某些情况下如果您不是body则会影响{{1}}意识到这一点。

Answer 3

“我的屏幕分辨率设置为1024 * 768，因此在我的情况下<body>的宽度是1024px？”

正如Tor所提到的，<html>元素可以有自己的边距，边框和填充。

此外，浏览器窗口的滚动条也会占用一些空间。

Answer 4

A）我假设当我们使用百分比时，百分比值是指包含块的宽度？

根据分配百分比的属性而有所不同。例如，对于font-size，它是父元素的计算字体大小。

填充是根据计算的width of the parent block计算的 - 偶数填充顶部使用宽度。（请记住，宽度是内容宽度，不包括填充，边框和边距）。

B）元素的默认宽度是多少？

正文元素的默认宽度为auto，即“一旦考虑到边距，填充和边框，就会留下任何空间”。由于浏览器默认具有非零填充和/或边距（两者中的哪一个取决于浏览器），因此不是100％。

百分比值是否指向包含块的宽度？

4 个答案: