CSS width width property

 The CSS width property is used to control the width of web page elements. The width can accept automatic judgment width (auto), custom width percentage (%) or inherited from the parent layer wi dth property value, CSS width property can be used in DIV Blocks , span areas, images ( img tags ), text input fields ( textarea ), buttons ( button )... and many other web page elements are designed for width, and are supported by all major browsers. The CSS width property is often used to Use the height attribute to design the height of web page elements .

CSS width width attribute syntax

width: width value;

The width property of CSS can be used only by filling in the property value, and the acceptable property values ​​of width are organized as follows:

Width value	grammar	Description
auto	width:auto;	Automatically determine the width of web page elements.
length	width: number + unit;	Acceptable units are px, em, cm and other web standard units.
%	width: number%;	Use percentages to set the width of web page elements, you need a reference for comparison.
inherit	width:inherit;	The width attribute value inherited from the parent layer.

The last inherit attribute value is not supported in IE browser and is not recommended.

CSS width example of width property 1. Set image width

Automatically determine the image width<br>
<img src="upload/20141007145509.png" style="width:auto;"><br><br>
Set the image width to 100px<br>
<img src="upload/20141007145509 .png" style="width:100px;"><br><br>
Set the image width to 50%<br>
<img src="upload/20141007145509.png" style="width:50%;">< br>

Example output

Automatically determine the image width,


set the image width to 100px and


the image width to 50%

Example 1 provides you three pictures modified with CSS width property. The first picture uses "width:auto;" to let the browser automatically determine the width of the picture. In this example, the result of the judgment is the original picture For the second picture, use "width:100px;" to force the width of the picture to be 100px. The height is the result of the browser’s automatic scaling down. The third picture uses “width:50%” to automatically zoom the picture to 50% of the page, this design will make the picture automatically zoom according to the display area of ​​the page. For the grammar and width adjustment of the page picture itself, please refer to the following two chapters for detailed introduction.

• HTML img image tag
• HTML img width Image width

CSS width example of width property 2. Setting the width of DIV block

<div style="border:1px black solid; width:200px; ">The width of this DIV is 200px</div>
<div style="border:1px black solid; width:400px; ">The width of this DIV is 400px</div> div>

Example output

The width of this DIV is 200px

The width of this DIV is 400px

The second is an example of two DIV blocks width design, through width: 200px and width: 400px width difference between the two designed to double the DIV block , CSS width is DIV block standard syntax width design, in addition to the use of examples of In addition to the px unit, other commonly used standard network units such as em, cm,% can be used. If you want to further study the DIV width design, please refer to the detailed introduction of " CSS DIV Width and Height Settings ".

The scope of application of the CSS width property is very wide. In addition to directly using the width property to design the width of web page elements, web designers can also use higher-level min-width , max-width and other advanced properties to limit The minimum and maximum width limits of web page elements.