Summary of how to use the width attribute width in css

CSS width refers to setting the corresponding div width through CSS styles. The CSS width attribute is the word width. The width width can be set to calculate the width as a percentage, set the width as a pixel value, set the width in relative length units, etc. This attribute is supported by all major browsers. The following will summarize the use of the width attribute.

Usage of width attribute

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

If it is the width of p:100%, it means that the width of p will be 980px and it will be full of p area, and then it has padding, so it will exceed p. And when width: auto, it is the overall width (including width, margin, padding, border) equal to the parent width (width, excluding the parent's margin, padding, border), so if padding has occupied 10px of space, Then the value given by width is 960px. But whether it is width: 100% or auto, the calculation reference is the width value of the parent content area, not the total width value.

2. CSS adjusts the size of the image. You must know width, height

How to use css to adjust the size of an image, use the two attributes width and height. These two attributes are used to set the width and height of the element respectively. In the initial stage of CSS, everything uses pixels as units.

3. css width width

The width is to directly set the width of the label object, and pay attention to the "equal sign" followed by the specific numeric width value (or percentage), the specific width The value does not need to be followed by the length unit. The default unit is pixels (px). When setting the width in the TABLE table tag or image img tag, the value does not follow the html unit. The default unit is pixels.

4. CSS2.1SPEC: Detailed explanation of the width attribute of the visual formatting model (Part 1)

The width attribute has several different ways of taking values. Here are a few Type:

(1) Width value: That is, the CSS length value is used to clearly specify the width of a box. The value unit can be the length unit supported in CSS, such as px, em, etc.

(2) Percentage: The percentage is calculated based on the width of the containing block. But if the width of the containing block needs to be determined based on the contained content, then the final layout is undefined, that is, the standard does not clearly specify how to calculate the width value. Additionally, if the box is absolutely positioned, its percentage length is calculated based on the width of the containing block's padding edge.

(3)auto: Calculated according to the width calculation method specified in the CSS standard. The specific algorithm will be introduced in detail below

(4)inherit: In fact, the width attribute is not inheritable , it is strange why there is the option of inherit. In actual situations, the width attribute is generally rarely used to inherit the value

5. CSS2.1SPEC: Detailed explanation of the width attribute of the visual formatting model (Part 2)

The calculation process of "shrink-to-fit" algorithm:

[1] Calculate preferred-width: Unless the content contained has an explicit line break (such as
tag), otherwise the width required to accommodate the content it contains without wrapping.

[2] Calculate preferred-min-width: when line breaks are possible (English encounters spaces or punctuation marks, block-level elements appear, and of course when
tags appear) The width required to accommodate the contained content, without wrapping.

[3] Calculate available-width: use the formula in Section 2.2.3:

available-width =width of containing block - 'margin-left' - 'border-left- width' - 'padding-left' - 'padding-right' - 'border-right-width' - 'margin-right, this also includes the width of all scrolling out.

The final width is: min(preferred-width, max(preferred-min-width, available-width)). The final formula can be summarized as: the final width is based on available-width, while ensuring that it cannot be greater than preferred-width and cannot be less than preferred-min-width

Relevant use of width attribute width Questions and Answers

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

2. How to add images to articles in the php editor Use regular rules to modify width: 100%; height: auto;

3. Why do I see many people writing adaptive web page outer containers that do not set width, only something like section {display: block; }?

【Related recommendations】

1. php Chinese website entry: width

2. PHP Chinese website free video tutorial: CSS video tutorial

The above is the detailed content of Summary of how to use the width attribute width in css. For more information, please follow other related articles on the PHP Chinese website!