Home>Article>Web Front-end> How to set CSS min-width and max-width
Today I will introduce to you how to set themin-widthand 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, cssmin-height
2, cssmax-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, htmlimg 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
原图片大小：
宽为165px 高度60px
The width is 375px and the height is 65px
94b3e26ee717c64999d7867364b1b4a3
The case is as follows:
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:
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!
