The applications of max-width and min-width in css, max-widthmin-width
Max-width: It can be seen from the literal meaning that the maximum width of the element itself is specified, and the width of the element itself should be less than or equal to the maximum width.
Min-width: It can be seen from the literal meaning that the minimum width of the element itself is specified, and the width of the element itself should be greater than or equal to the minimum width value.
1. max-width
In general, we do not want to limit the width of an element to death, and want its actual width to adapt with its own content, but do not want its width to be too large to damage the overall layout, in this case, the max-width limit is applied to the maximum width of the element. The actual width of the element is 0 ~ Between max-width.
The sample code is as follows:
<!doctype html> .box2{max-width:800px;background:yellow;}
</Style><Div class = "box2"> Hello, I'm the sample code. </div></body>
The effect is as follows:
We can see that when the value of max-width is greater than the actual width of the content, the width of the element is equal to the value of max-width. WhenContentThe actual width is greaterMax-width valueThe element width is equal to the max-width value.
2. min-width
In general, we usually use min-width to specify the minimum width of the element, so as to avoid the overall layout from being damaged if the element width is too small.
The sample code is as follows:
<! Doctype html>
The effect is as follows:
We can see that when the min-width value is less than the actual width of the content, the width of the element is equal to min-width. WhenContentThe actual width is lessMax-width valueThe width of the element is min-width.
Note: The principle of max-height and min-height is the same.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
