A summary of how to use width attribute widths in CSS

CSS width is the CSS style set corresponding to the div width, the CSS width property is the word width, width can be set to calculate the width as a percentage, set the width in pixel values, set the width in relative length, and so on. This property is supported by all major browsers. The following summarizes how the Width property is used.

Use of the Width property

1. Analysis of width:100%; and the difference between Width:auto;

If the width:100% of P, then the width of p will be 980px is filled with P area, and then have padding, so it will exceed p. And when width:auto it is the overall width (including width,margin,padding,border) equals the parent width (width, which does not contain the parent margin,padding,border), So if padding has taken up about 10px of space, then the value of width is 960px. However, whether it is width:100% or auto, its computed reference is the parent content area width value, not the total width value.

2. css to adjust the size of the picture, you know width, height

How to resize a picture with CSS, use the width and Height properties, which are used to set the width and height of the element, respectively. In the CSS beginner stage, all are using pixels as units.

3. CSS Width

Width is directly set the width of the label object, and note that the "equals" followed by the specific number width value (or percentage), the specific width value is not the same as the length of units, the default in pixels (PX), the table table label or picture img tag set width when its value is not the same as the HTML units, the default in pixels.

4. Css2.1spec: A detailed description of the Width property of the visual format model (top)

The Width property has several different ways of taking the values, several of which are:

(1) Width value: That is, the CSS length value to specify the width of a box, value units can be used in the CSS support length units, such as Px,em.

(2) Percent: The percentage is calculated based on the width of the containing block. However, if the width of the containing block needs to be determined based on what is included, then the final layout is undefined, that is, the standard does not explicitly specify how to calculate the width value. In addition, if the box is absolutely positioned, its percentage length is calculated based on the width of the padding edge containing the block.

(3) Auto: Calculated according to the width calculation method specified in the CSS standard, the specific algorithm will be described in detail below

(4) Inherit: In fact, the width property is not inherited, it is strange why there is inherit this option, in fact, the width property is rarely used inherit value

5. Css2.1spec: Detailed description of the Width property of the visual format model (bottom)

The computational process of the "Shrink-to-fit" algorithm:

[1] Calculation preferred-width: In the case of the inclusion of the content has a clear line break (such as with the <br/> tag), otherwise it will not be wrapped, the width of the content it contains.

[2] Calculation preferred-min-width: In the ability to change the line (the English encountered a space or punctuation, there is a block-level element, of course, also contains the <br/> tag) in the case of a newline, to accommodate the contents of the required width.

[3] Calculation available-width: That is, the use of the formula in the 2.2.3 section:

Available-width =width of containing block-' margin-left '-' border-left-width '-' padding-left '-' padding-right '-' Bor Der-right-width '-' margin-right, which also includes all the rolling out widths.

The final width is: min (preferred-width, Max (Preferred-min-width, Available-width)). The final formula can be summed up as follows: The final width is based on available-width, while the guarantee cannot be greater than preferred-width and cannot be less than preferred-min-width

Question and answer about width properties use

1. The list cannot be centered after width is set to 100%

2. PHP Editor Add the image in the article How to modify the style in the regular width:100%;height:auto;

3. Why do I see a lot of people write the adaptive page outside the container is not set width, only similar to section {Display:block;}?

"Recommended"

1. PHP Chinese entry: Width

2. PHP Chinese Web free video tutorial: CSS video Tutorial