Based on what parameters does browser decide what the `width` of an element should be(when width="auto")?_问答_开发者

Based on what parameters does browser decide what the `width` of an element should be(when width="auto")?

开发者 https://www.devze.com 2022-12-22 00:29 出处：网络

1) If textbox element (<input type=”text” />) has its width property set to inherit, thentextbox doesn’t overflow. But开发者_开发百科 iftextbox has width set to auto, then it overflows due to

相关专题：css xhtml

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

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