css中max-width和min-width的应用

1.一般我们在布局时，不想要元素的宽度限定死，并且想要它的实际宽度随其本身内容自适应，但又不想宽度过大破坏整体布局，这个时候就会应用到max-width限制元素的最大宽度，元素实际宽度在0~max-width之间。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1 {
            max-width: 100px;
            background: red;
        }
        
        .box2 {
            max-width: 800px;
            background: yellow;
        }
    </style>
</head>

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

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

</body>

</html>

如果不规定最大宽度，默认宽度为auto，box会随着屏幕变宽而越来越宽，规定了最大宽度，到达最大宽度后会固定为最大宽度

 

2.一般我们在布局时，通常会用到min-width规定元素的最小宽度，以免元素宽度过小破坏整体布局.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: inline-block;
        }
        
        .box1 {
            min-width: 100px;
            background: red;
        }
        
        .box2 {
            min-width: 800px;
            background: yellow;
        }
    </style>
</head>

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

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

</body>

</html>

屏幕缩小到一定程度，box会保持他的宽度，超过屏幕的话出现进度条

 

posted @ 2019-06-25 10:45  手指乐  阅读(442)  评论(0)  编辑  收藏  举报