基于什么参数,浏览器决定元素的"宽度"应该是什么(当width ="auto"时)?

Asp*_*Net 0 html css xhtml

1)如果textbox element(<input type=”text” /> )的width属性设置为inherit,则文本框不会溢出.但是如果textbox 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>
Run Code Online (Sandbox Code Playgroud)

2)默认情况下,所有Html元素的宽度值都设置为auto吗?

感谢名单

Tim*_*man 6

您可以width:auto 在此处找到用于计算宽度的各种规则.


关于继承:

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

因此width:inherit意味着它采用与父元素相同的计算宽度.


关于width:auto行内元素:

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

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

使用高度)*(固有比率)

如果'height'和'width'都有'auto'的计算值,并且元素具有固有比率但没有固有的高度或宽度,包含块的宽度本身并不取决于被替换元素的宽度,那么"宽度"的使用值是根据正常流程中用于块级非替换元素的约束方程计算的.

否则,如果'width'的计算值为'auto',并且该元素具有固有宽度,则该固有宽度是'width'的使用值.

否则,如果'width'的计算值为'auto',但不满足上述任何条件,则'width'的使用值将变为300px.如果300px太宽而无法适合设备,UA应使用比例为2:1的最大矩形的宽度,而不是适合设备.

因此,对于内联元素,在许多情况下,使用元素的"固有"宽度(即使它比父元素宽).

请注意,块级和浮动元素有不同的规则,但<input>自然是内联元素


width:auto 是默认值

'width'
值:<length> | <百分比> | 汽车| 继承
Initial:auto