chrome开发人员工具在哪里显示元素的实际计算宽度

Question

我已经在互联网上的某个地方读过盒子模型了，它说块元素的real width不是它在CSS中定义的宽度，而是按照下面的计算式：

  

Real Width = margin-right + border-right + padding-right + width +   padding-left + border-left + margin-left

所以我们谈到的这个Real Width - 这也是一个由浏览器计算并显示为可以检查的css属性的值 - 或者它只是网页设计者用来计划的术语相应的布局。

例如，我创建了一个div并将其宽度指定为300px，将其边距和填充设置为10px - 我现在可以转到Chrome开发人员工具并查找Real width是340px ??

Answer 1

首先访问开发者控制台

然后点击样式

然后点击计算

Answer 2

首先，您需要清除边距和填充..

边距不包括在宽度中，因为它不会改变任何元素的大小。 所以，如果你创建宽度为300px的元素并设置10px的边距和填充 那将是

      300px Width + 10px leftmargin +10px right margin = 320px 

Answer 3

当您在CSS中设置宽度或高度时，例如div或p元素，默认情况下，它们会设置元素内容的宽度/高度。因此，您必须记住精神上添加填充，边框粗细和边距，以查看框将延伸多远。

但是还有另一种工作方式，因为CSS有一个盒子大小的属性。如果你设置：

div {
    box-sizing: border-box;
}

CSS中的

，现在任何div（或您指定的任何元素或选择器）都将在div的宽度和高度中包含填充和边框。它可以是一种更简单的工作方式，特别是在非常复杂的页面上，有很多东西。

请注意，它仍然不包括框的宽度和高度的边距，但你不会真的想要这样，因为边距不是框本身的一部分，只是框和其他框之间的空间东西。

box-sizing属性适用于所有当前主流浏览器版本，而适用于IE中的v8版本。

在Chrome和大多数其他浏览器中，如果按F12键，它会将窗口分为两部分，并为您显示开发人员工具。单击该窗口窗格左上角的搜索图标，然后单击屏幕另一半的网站页面的任何部分，它将显示您单击的元素的所有CSS设置。您还将看到一组嵌套的彩色框，以图表的形式显示所有宽度，填充，边框和边距大小。