CSS Min-width and max-width how to set

Today to introduce to you is the CSS Min-width and max-width How to set, a lot of friends are puzzled about the minimum width min-width and the maximum width of the max-width style has any effect? What is the maximum width of the minimum width for? How is it applied? So today we are going to read it all.

Inserting an HTML IMG image into a page in a div+css layout

Next DIVCSS5 let everyone learn to master Min-width and max-width basic grammatical structure and use case study.

Min-width Max-width Directory

CSS BASIC Syntax structure

Min-width and Max-width are followed by specific numbers +html units

min-width:50px Minimum width of 50px

max-width:50px Maximum width of 50px

CSS style structure

p{min-width:50px}

p{max-width:50px}

1. CSS Min-height

2. CSS Max-height

3, CSS width

4. CSS Height

Practical Application Notes

The minimum width (min-width) and maximum width (max-width) are used to set the minimum maximum width limit for the picture to be more. For example, a picture-based list, objects in the size of the picture is uncertain, in order not to let him too small not uniform this time we can use the CSS minimum width style. Another example, a box of articles with pictures mixed, sometimes the width of the picture can not be determined, this time if the HTML IMG image width beyond the width of P box, may be the picture will burst p box cause the picture confusion.

Extended reading:

1, CSS set height width of the picture

2, CSS resolution picture too big bursting div page

3. CSS img

4. HTML img Tag

Min-width and Max-width usage cases

We set up 2 p-boxes, set the maximum and minimum width styles, set the CSS border to 1px CSS color red solid box, the CSS height is 100px. The first and second boxes of CSS are named Css-min-width, Css-max-width; the original picture in the first box has a width of 165px height of 60px; the picture in the second box has a width of 375px height 65px.

Case CSS Code

. css-min-width,.css-max-width{height:100px; border:1px solid #F00}. Css-min-width img{min-width:200px}. css-max-width{margin-top:10px}///CSS Comment: margin-top set the spacing on the Css-max-width object to 10px */. Css-max-width img{max-width:200px;}

Css+div Case HTML Source snippet

<p> Original picture size: <br/> <br/> <br/><br/> width 165px height 60px <br/> <br/> <br/><br/>

Width 375px height 65px

</p>

The cases are as follows:

<p class= "Css-min-width" >      </p> <p class=" Css-max-width ">     

Today CSS Min-width and max-width How to set up to say so much, need friends can save, also please continue to pay attention to the other updates of this site.

Recommended reading:

What is the margin of CSS?

CSS3 how to make rounded corners

CSS how to set table border style