Based on what parameters does browser decide what

2019-08-28 07:50发布

站内问答 / HTML/CSS
1254 1 4

1) If textbox element (<input type=”text” /> ) has its width property set to inherit, then textbox doesn’t overflow. But if textbox has width set to auto, then it overflows due to browser calculating the width.

a) Why doesn’t browser take into the account that textbox is inside another element and thus adjusts the width of a textbox accordingly?

b) Based on what parameters does it decide what the width of a textbox should be?

<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) Do all Html elements by default have their width value set to auto?

thanx

标签： html css xhtml
举报
1条回答
淡お忘
2楼-- · 2019-08-28 08:13

You can find various rules for calculating the width for width:auto here.

Regarding 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.

So width:inherit means it takes the same computed width as the parent element.

Regarding width:auto on 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.

So for inline elements in many cases, the "intrinsic" width of the element is used (even if this is wider than the parent element).

Note that there are different rules for block-level and floating elements, but <input> is naturally an inline element

width:auto is the default value

'width'
Value: <length> | <percentage> | auto | inherit
Initial: auto
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)