How to set CSS min-width and max-width

Today I will introduce to you how to set the min-width and max-width of CSS. Many friends are wondering what the minimum width min-width and maximum width max-width styles are. Where is the minimum width and maximum width used? How to apply? So today we will explain it to you one by one.

Insert html img images into web pages in DIV+CSS layout

Next, DIVCSS5 allows everyone to learn to master the basic syntax structure of min-width and max-width and learn usage through cases.

min-width max-width directory

CSS basic syntaxStructure

min-width and max-width are both followed by specific numbers + html units

min-width:50px The minimum width is 50px

max-width:50px The maximum width is 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 instructions

Minimum width (min-width) and maximum width (max -width) is used to set the minimum and maximum width restrictions of the image. For example, when a picture is used as the main list and the size of the picture in the object is variable, in order to avoid making it too small and inconsistent, we can use the CSS minimum width style. For another example, when there are articles and pictures mixed in a box, sometimes the width of the picture cannot be determined. At this time, if the width of the html img picture exceeds the width of the p box, the picture may burst the p box and cause confusion.

Extended reading:

1.css to set the height and width of the image

2.CSS solves the problem of oversized images breaking the DIV web page

3.css img

4, html img tag

min-width and max-width usage cases

We set up 2 p boxes and set the maximum and minimum width respectively. Style, and set the css border to 1px, css color to red solid line box, and css height to 100px. The CSS names of the first and second boxes are css-min-width and css-max-width respectively; the original image size of the image in the first box is 165px wide and 60px high; the original image size of the image in the second box is width It is 375px with a height of 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注释：margin-top设置css-max-width对象上间距为10px */ 
.css-max-width img{ max-width:200px; }

CSS+DIV case html source code fragment

<p>原图片大小：<br /> 
<br /> 
<img src="http://www.php.cn" /><br /><br /> 
宽为165px 高度60px<br /> 
<br /> 
<img src="http://www.php.cn" /><br /><br />

The width is 375px and the height is 65px

94b3e26ee717c64999d7867364b1b4a3

The case is as follows:

<p class="css-min-width"> 
    <img src="http://www.PHP.com/img201301/PHP-logo-2013.gif" /> 
</p> 
<p class="css-max-width"> 
    <img src="http://www.PHP.com/img201301/topad1.gif" />

That’s all for how to set the min-width and max-width of CSS today. Friends who need it can save it. Please also continue to pay attention to other updates on this site.

Recommended reading:

What is the role of CSS margin

##How to make rounded corners in CSS3

How to set the table border style in CSS

The above is the detailed content of How to set CSS min-width and max-width. For more information, please follow other related articles on the PHP Chinese website!