Question

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元素的宽度值都设置为auto吗？

感谢名单

Answer 1

您可以找到各种规则来计算width:auto here的宽度。

<小时/> 关于inherit：

每个属性也可以具有指定值'inherit'，这意味着，对于给定元素，该属性采用与元素父级的属性相同的计算值。

所以width:inherit表示它与父元素的计算宽度相同。

<小时/> 关于inline elements上的width:auto：

如果'height'和'width'都具有'auto'的计算值，并且该元素也具有固有宽度，那么该固有宽度是'width'的使用值。

如果'height'和'width'都具有'auto'的计算值，并且该元素没有固有宽度，但确实具有固有高度和固有比率;或者如果'width'的计算值为'auto'，'height'具有一些其他计算值，并且该元素具有固有比率;然后'宽度'的使用值是：

（使用高度）*（固有比率）

如果'height'和'width'都具有'auto'的计算值，并且元素具有固有比率但没有固有高度或宽度，并且包含块的宽度本身不依赖于替换元素的宽度，则使用的值为' width'是根据正常流程中用于块级非替换元素的约束方程计算的
否则，如果'width'的计算值为'auto'，并且该元素具有固有宽度，则该固有宽度是'width'的使用值。

否则，如果'width'的计算值为'auto'，但没有满足上述任何条件，那么'width'的使用值将变为300px。如果300px太宽而无法容纳设备，则UA应使用比率为2：1的最大矩形的宽度，而不是适合设备。

因此，对于内联元素，在许多情况下，使用元素的“固有”宽度（即使它比父元素宽）。

请注意，块级和浮动元素有不同的规则，但<input> is naturally an inline element

<小时/> width:auto is the default value

'宽度'
价值：＆lt;长度＆gt; | ＆LT;百分比＆GT; |汽车|继承
Initial：auto

基于什么参数，浏览器决定元素的“宽度”应该是什么（当width =“auto”时）？

1 个答案: