CSS 规范所说的测量元素宽度的正确方法是什么？

发布于 2024-08-18 09:05:10 字数 202 浏览 7 评论 0原文

Chrome 似乎从边距内部测量元素宽度，包括填充，但 Firefox 和 IE 测量边框所在的框宽度（不包括填充，但包括边距内部）。从边框测量元素宽度对我来说很有意义，并且在编码时也很有帮助，因为打开边框可以让你很容易地看到元素的宽度，但我的问题是 CSS 规范所说的是测量元素宽度的正确方法一个元素，如果 chrome 或 IE 和 Firefox 错误，感谢

您的帮助

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

若沐 2024-08-25 09:05:10

W3C CSS 2.1 盒子模型规范规定，元素的宽度不包括边距、边框或填充。

事实上，通过指定 CSS 宽度或高度属性，您可以指定框内容的可用空间（在规范中称为内容区域），其中不包括填充、边距或边框。

看这个例子：

div { width: 100px; padding: 10px; margin: 20px; border: 2px; }

垂直边框（包括它们）之间的距离是 width + padding-left + padding-right + border-right-width + border-left-width。
边距位于边框之外。
宽度（按照 CSS 规范的预期）为 100px。

Internet Explorer 以标准模式或怪异模式呈现网页。
如果您希望 IE 表现得像它应该的那样（因此遵循 CSS 标准），您必须使用本文中报告的 DOCTYPE 之一强制它使用标准模式：http://www.alistapart.com/articles/doctype/

这种技术称为doctype-switch。

Firefox 和大多数其他浏览器都遵循标准盒子模型。

您可以在此处阅读 W3C 盒模型规范：http://www. w3.org/TR/CSS21/box.html#box-dimensions
但我建议您阅读一篇更易于阅读（但确实很好）的文章，如下所示： http: //reference.sitepoint.com/css/boxmodel

另外要说的是 CSS 3 规范将包括 box-sizing 属性，该属性将允许为每个元素指定解释 width 属性的方式（因此如果排除或包括填充和边框）。
无论如何，大多数浏览器需要数年时间才能实现新的（尚未完成的）CSS 3 规范。

The W3C CSS 2.1 Box Model Specification says that the width of an element does not include margin, border or padding.

In fact by specifying the CSS width or height properties you specify the space available to the content of a box (that is called content area in the specification) which does not include padding, margin or border.

Look at this example:

div { width: 100px; padding: 10px; margin: 20px; border: 2px; }

The distance between the vertical borders (including them) is width + padding-left + padding-right + border-right-width + border-left-width.
Margins are outside of the border-box.
The width (as intended by the CSS specifications) is instead 100px.

Internet Explorer renders web pages in Standard Mode or in Quirks mode.
If you want IE to behave as it should (so following CSS Standards) you have to force it to use the Standard Mode by using one of the DOCTYPEs reported in this article: http://www.alistapart.com/articles/doctype/

This technique is called doctype-switch.

Firefox and the majority of other browsers follows the standard box model.

You can read the W3C box model specification here: http://www.w3.org/TR/CSS21/box.html#box-dimensions
But I suggest you to read a more easy-to-read (but really good) article like this: http://reference.sitepoint.com/css/boxmodel

Another thing to say is that the CSS 3 specifications will include the box-sizing property which will allow to specify for every element the way to interpret the width property (so if excluding or including padding and borders).
Anyway it will take years for the majority of browsers to implement the new (and not yet finished) CSS 3 specifications.

回复收藏 0 原文

—━☆沉默づ 2024-08-25 09:05:10

欢迎阅读。当然，过去十年中每个浏览器的实现方式都不同。

元素的 width 属性应该是“内容区域宽度”，并且不应该包括边距、填充或边框。 IE 在某些版本和情况下并未以这种方式实现。一般来说，其他浏览器遵循该规范。

回复收藏 0 原文

信愁 2024-08-25 09:05:10

所有现代浏览器都能正确渲染盒子模型。这里的回答虽然冗长但正确。本质上是一个具有以下详细信息的块元素：

border: 10px;
margin: 10px;
padding: 10px;
width: 100px;

将具有以下特征：

该元素使用的总空间将为 160px 宽。这是 width+padding*2+margin*2+border*2，因为我们在框的两侧指定了对称的边框、内边距和边距。
元素内内容的可用空间仅为 100 像素宽。
元素边框的可用空间为 120 像素。

Chrome、Safari、FireFox、Opera 和 IE6/7/8 都应该显示此行为。

All modern browsers render the box model properly. The responses here are long winded but correct. Essentially a block element with the following details:

border: 10px;
margin: 10px;
padding: 10px;
width: 100px;

Would have the following characteristics:

The total space utilized by the element would be 160px wide. This is width+padding*2+margin*2+border*2 as we've specified symmetrical border, padding, and margin on both sides of the box.
The space available to the contents within the element is only 100px wide.
The space available up to the border of the element is 120px.

Chrome, Safari, FireFox, Opera, and IE6/7/8 should all display this behavior.

回复收藏 0 原文

~没有更多了~