Home > Article > Web Front-end > Tips for using max-width and min-width

Tips for using max-width and min-width

php中世界最好的语言Original: 2018-03-20 09:39:267116browse

This time I will bring you the usage skills of max-width and min-width. There are precautions for using max-width and min-width. Which ones, the following are practical cases, let’s take a look.

max-width: As can be seen from the literal meaning, it specifies the maximum width of the element itself, and the width of the element itself should be less than or equal to the maximum width value.

min-width: As can be seen from the literal meaning, it specifies the minimum width of the element itself, and the width of the element itself should be greater than or equal to the minimum width value.

1. max-width

## Generally when we lay out, we don’t want to limit the width of the element. Dead, and you want its actual width to adapt to its own content, but you don’t want the width to be too large to destroy the overall layout. At this time, max-width will be applied to limit the maximum width of the element. The actual width of the element is between 0~max-width. between.

The sample code is as follows: ##

<!doctype html>
<html>
    <head>
        <style>
            .box1{max-width:100px;background:red;}
　　　　　　　.box2{max-width:800px;background:yellow;}

</style> </head> <body> <p class="box1">你好我是示例代码你好我是示例代码你好我是示例代码你好我是示例代码你好我是示例代码</p>

　　　　　<p class="box2">你好我是示例代码你好我是示例代码你好我是示例代码你好我是示例代码你好我是示例代码</p>

</body> <html>

The effect is as follows:

We can see from the above figure 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 max-width value; when the content The actual width is greater than the max-width value, and the width of the element is equal to the max-width value.

2, min-width

Generally when we lay out, we usually use Specify the minimum width of the element to min-width to prevent the element width from being too small and damaging the overall layout.

The sample code is as follows:



    
        
        
    
	你好我是示例代码你好我是示例代码你好我是示例代码你好我是        
        示例代码你好我是示例代码
　	你好我是示例代码你好我是示例代码你好我是示例代码你好我是 
        示例代码你好我是示例代码
    </body>
<html>

The effect is as follows:

##We can see from the above figure that when min-width When the value of is less than the actual width of the content, the width of the element is equal to min-width; when

contentactual width is less than ##max- The value of width , the width of the element is equal to min-width. Explanation:

max-height

and min-height are also based on the same principle.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website! Recommended reading:

Vue and Typescript construction project

Usage of JavaScript scope

The above is the detailed content of Tips for using max-width and min-width. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How text-align achieves alignment at both endsNext article：How text-align achieves alignment at both ends

See more

Tips for using max-width and min-width

Related articles