gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 07:48:08 26 4
gpt4 key购买 nike

我在网上的某个地方读到过盒子模型,它说 block 元素的 real width 不是 CSS 中定义的宽度,而是根据以下公式计算的:

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

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

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

最佳答案

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

但是还有另一种工作方式,因为 CSS 具有 box-sizing 属性。如果你设置:

div {
box-sizing: border-box;
}

在 CSS 中,现在任何 div(或您指定的任何元素或选择器)都将在 div 的宽度和高度中包含填充和边框。它可以是一种更简单的工作方式,尤其是在包含大量内容的非常复杂的页面上。

请注意,它仍然不包括框的宽度和高度中的边距,但无论如何你都不会真的想要它,因为边距并不是框本身的真正部分,只是框与其他框之间的间隔东西。

box-sizing 属性适用于当前所有主要的浏览器版本,以及从 v8 开始的 IE。

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

关于css - chrome 开发人员工具在哪里显示元素的实际计算宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30592754/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com