1) 如果文本框元素 ( <input type=”text” /> ) 有它的 width属性设置为 inherit , 那么文本框就不会溢出。但是如果文本框有 width设置为 auto ，然后由于浏览器计算 width 而溢出.
a) 为什么浏览器不考虑文本框在另一个元素中并因此调整 width相应的文本框？
b) 它根据什么参数决定 width 是什么文本框的应该是？
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style type="text/css">
p
{
width:60px;
}
</style>
</head>
<body>
<p>
<input type=”text” />
</p>
</body>
</html>
2) 默认情况下所有的 Html 元素都将其宽度值设置为自动吗？
谢谢
最佳答案
您可以找到计算 width:auto 宽度的各种规则here .
关于inherit :
Each property may also have a specified value of 'inherit', which means that, for a given element, the property takes the same computed value as the property for the element's parent.
所以 width:inherit意味着它采用与父元素相同的计算宽度。
关于
width:auto在 inline elements :
If 'height' and 'width' both have computed values of 'auto' and the element also has an intrinsic width, then that intrinsic width is the used value of 'width'.
If 'height' and 'width' both have computed values of 'auto' and the element has no intrinsic width, but does have an intrinsic height and intrinsic ratio; or if 'width' has a computed value of 'auto', 'height' has some other computed value, and the element does have an intrinsic ratio; then the used value of 'width' is:
(used height) * (intrinsic ratio)
If 'height' and 'width' both have computed values of 'auto' and the element has an intrinsic ratio but no intrinsic height or width and the containing block's width does not itself depend on the replaced element's width, then the used value of 'width' is calculated from the constraint equation used for block-level, non-replaced elements in normal flow.
Otherwise, if 'width' has a computed value of 'auto', and the element has an intrinsic width, then that intrinsic width is the used value of 'width'.
Otherwise, if 'width' has a computed value of 'auto', but none of the conditions above are met, then the used value of 'width' becomes 300px. If 300px is too wide to fit the device, UAs should use the width of the largest rectangle that has a 2:1 ratio and fits the device instead.
因此在很多情况下对于内联元素，使用元素的“固有”宽度(即使它比父元素宽)。
请注意， block 级元素和 float 元素有不同的规则，但是 <input> is naturally an inline element
width:auto is the default value
'width'
Value: <length> | <percentage> | auto | inherit
Initial: auto
关于html - 浏览器根据什么参数决定元素的 `width` 应该是什么(当宽度为 ="auto"时)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2397982/