chrome 浏览器开发工具中的 px 值与 css 像素值

Answer 1

我认为您正在将窗口的宽度与

div#first

的宽度混合在一起。

事实上，您在右上角看到的数字就是窗口的宽度。

要检查 div 的真实宽度，只需向下滚动到右侧的 css 即可查看它。

在下图中，您可以在 RED 中看到屏幕的大小，在 GREEN 中看到 div 的大小。

因此，如果您在 div 上设置的高度比屏幕尺寸大得多，高度也会发生同样的情况。

演示：

#first {
  background-color: blueviolet;
  width:1200px;
}

<div id='first' class='float-child'>
  <p>The img element tells the browser, “Place an image here.” You’ve already gotten
  a glimpse of it used to place banner graphics in the examples in Chapter
  4, Creating a Simple Page. You can also place an image element right in the
  flow of the text at the point where you want the image to appear, as in the
  following example. Images stay in the flow of text, aligned with the baseline
  of the text, and do not cause any line breaks (HTML5 calls this a phrasing
  element), as shown in FIGURE 7-2:</p>
</div>

Answer 2

我已将缩放级别设置为 90%，因此窗口宽度小于框宽度（约 100px），尽管我已将窗口拖动到仅触及框的右边缘。我对 CSS 非常陌生，从那时起我就开始阅读 CSS 像素、设备像素、缩放等方面的知识。理解这些概念似乎有点费时间。我希望了解它们是如何工作的，并在几天后添加到这个答案中。

Answer 3

#first {
  background-color: blueviolet;
  width:1200px;
}

<div id='first' class='float-child'>
  <p>The img element tells the browser, “Place an image here.” You’ve already gotten
  a glimpse of it used to place banner graphics in the examples in Chapter
  4, Creating a Simple Page. You can also place an image element right in the
  flow of the text at the point where you want the image to appear, as in the
  following example. Images stay in the flow of text, aligned with the baseline
  of the text, and do not cause any line breaks (HTML5 calls this a phrasing
  element), as shown in FIGURE 7-2:</p>
</div>