chrome 开发者工具在哪里显示元素的实际计算宽度
Where does chrome developer tools show the real calculated width of an element
我在网上的某个地方读到过盒子模型，它说块元素的 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??
首先进入开发者控制台
然后点击样式
然后点击计算
首先，你需要清楚margin和padding..
边距不包含在宽度中，因为它不会改变任何元素的大小。
所以，如果你创建宽度为 300px 的元素并设置 margin 和 padding 为 10px
那么它将是
300px Width + 10px leftmargin +10px right margin = 320px
当您在 CSS 中设置 div 或 p 元素的宽度或高度时，默认情况下它们会设置 width/height 内容 inside 元素。所以你必须记住在心里加上填充、边框厚度和边距，看看盒子能延伸多远。
但是还有另一种工作方式，因为 CSS 有一个框大小调整 属性。如果您设置：
div {
box-sizing: border-box;
}
在 CSS 中，现在任何 div（或您指定的任何元素或选择器）都将在 div 的宽度和高度中包含填充和边框。它可以是一种更简单的工作方式，尤其是在包含大量内容的非常复杂的页面上。
请注意，它仍然不包括框的宽度和高度的边距，但无论如何你都不会真的想要它，因为边距并不是框本身的一部分，只是框与框之间的间隔和其他东西。
box-sizing 属性 适用于当前所有主流浏览器版本，以及 v8 及更高版本的 IE。
在Chrome和大多数其他浏览器中，如果您按 F12 键，它将 divide 和 window 分成两部分，并显示一个开发者工具为你。单击 window 窗格左上角的搜索图标，然后单击屏幕另一半的网站页面的任何部分，它将显示该元素的所有 CSS 设置你点击了。您还将看到一组嵌套的彩色框，它们以图表形式显示所有宽度、填充、边框和边距大小。
我在网上的某个地方读到过盒子模型，它说块元素的 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??
首先进入开发者控制台
然后点击样式
然后点击计算
首先，你需要清楚margin和padding..
边距不包含在宽度中，因为它不会改变任何元素的大小。 所以，如果你创建宽度为 300px 的元素并设置 margin 和 padding 为 10px 那么它将是
300px Width + 10px leftmargin +10px right margin = 320px
当您在 CSS 中设置 div 或 p 元素的宽度或高度时，默认情况下它们会设置 width/height 内容 inside 元素。所以你必须记住在心里加上填充、边框厚度和边距，看看盒子能延伸多远。
但是还有另一种工作方式，因为 CSS 有一个框大小调整 属性。如果您设置：
div {
box-sizing: border-box;
}
在 CSS 中，现在任何 div（或您指定的任何元素或选择器）都将在 div 的宽度和高度中包含填充和边框。它可以是一种更简单的工作方式，尤其是在包含大量内容的非常复杂的页面上。
请注意，它仍然不包括框的宽度和高度的边距，但无论如何你都不会真的想要它，因为边距并不是框本身的一部分，只是框与框之间的间隔和其他东西。
box-sizing 属性 适用于当前所有主流浏览器版本，以及 v8 及更高版本的 IE。
在Chrome和大多数其他浏览器中，如果您按 F12 键，它将 divide 和 window 分成两部分，并显示一个开发者工具为你。单击 window 窗格左上角的搜索图标，然后单击屏幕另一半的网站页面的任何部分，它将显示该元素的所有 CSS 设置你点击了。您还将看到一组嵌套的彩色框，它们以图表形式显示所有宽度、填充、边框和边距大小。