zoukankan      html  css  js  c++  java
  • 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会保持他的宽度,超过屏幕的话出现进度条

  • 相关阅读:
    创建vlan 和 节点vlan 连通性排查
    FRRouting SR-MPLS
    mpls over gre
    linux mpls
    交换机vlan
    neutron subnet + router
    neutron 层次绑定 +binding_levels
    frrouting命令补全 + 启动失败排查
    Paper Pal:一个中英文论文及其代码大数据搜索平台
    游戏服务器设计 Unity3d + photon + grpc + nodejs + postgis/postgresql
  • 原文地址:https://www.cnblogs.com/cowboybusy/p/11081474.html
Copyright © 2011-2022 走看看