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吗?
感谢名单
您可以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