Css width and width

CSS width style attribute. CSS width refers to setting the corresponding div width through CSS style. The following describes the width of traditional html, adaptive width, fixed width, and other widths. CSS width style attributes

Traditional Html width attribute words:WidthFor example, width = "300 ";

CSS widthAttribute word: width, for example, width: 300px;

I. Width syntax structure knowledge:

. Manongjc {Width: 200px}

Set the manongjc class width to 200px (pixel)

. Manongjc {width: 20%}

Set the manongjc class width to 20% (relative to the parent class percentage width)

Ii. css width usage

1. Width: 100% (calculated in percentage)

2. width: 200px; (the width is 200 pixels (px ))

3. Width: 20em (the Width is 20 relative length units)

3. Attribute of the width element in the original html Tag

1) set the html table width:ContentOrContent

2) set the img image width:

The above width is directly set the label object width, and pay attention to the "equal sign" followed by the specific number width value (or percentage), the specific width value does not need to follow the length unit, the default is pixel (px) the unit is. When the width is set in the TABLE label or image img label, the value is not in html Unit. The Unit is pixel by default.

Iv. Case study of css fixed width

Case Description:

We set the width of a class object named "manongjc" to 200px. To see the effect, we add a red css border (css border) to the object)

Css code:

.manongjc{width:200px;border:1px solid #F00}

Html code:

My width is 200px

V. CSS percentage width adaptive width

We often see that the width of a Web page automatically changes with the browser width, and the width is adaptive width. The adaptive width can be achieved by using the percentage.

If the total width of a webpage is 80%, that is, width: 80%;, the adaptive width is 80% for the browser. Of course, the premise is to set the outermost layer without the Width limit.

Examples of css adaptive width:

Css code:

body{ margin:0 auto; text-align:center;} .yangshi{ width:80%; border:1px solid #003; margin:0 auto;} 

Body p code in Html:

 
I am 80% adaptive width

In this way, the content is set to center. In order to facilitate the test, a black frame of 1px is added. You can test and observe that the content changes the width of the browser as the browser expands and the adaptive width is 80%. The width of the left and right sides is always 10%, because the box width is set to 80%.

Vi. Summary of css width and width

Generally, to set the width of an object, you only need to set the width attribute word plus the specific length, number unit, and unit in the CSS selector. Sometimes you need to set the width to the percentage, remember that the percentage value is calculated by the number + "%" percent. I have explained the following to you through the legend and basic knowledge DIVCSS5:Css widthKnowledge, hope you can grasp its width and application.

VII. Related reading:

1. Minimum css min-width
2. css max-width maximum width
3. css height