zoukankan      html  css  js  c++  java
  • width和max-width和min-width的区别

    width和max-width和min-width的区别

    一、总结

    一句话总结:

    心性还是需要磨砺一下,增加一点禅性,少一点计较

    二、CSS中width,min-width和max-width之间的联系_卡卡的笔录-CSDN博客

    转自或参考:CSS中width,min-width和max-width之间的联系_卡卡的笔录-CSDN博客
    https://blog.csdn.net/m0_38102188/article/details/80612233

    字面意思来看,width,min-width和max-width分别代表的是元素的宽度,最小宽度和最大宽度,那么他们之间有什么联系呢?

    <div class="container">
    </div>
    <style>
    .container {
        background-color: red;
        height: 100px;
        width: 100px
    }
    </style>

    当我们只设置width时,如100px,显示结果如下图:
     


    .container {
    background-color: red;
    height: 100px;
    100px;
    max- 50px
    }
    这时如果我们同时设置了max-50px,则max-width的值会覆盖width的值,container显示为50px,如下图所示:
     


    .container {
    background-color: red;
    height: 100px;
    100px;
    max- 150px
    }
    但是如果我们设置max-150px,那么width的值会覆盖max-width的值,container显示为100px,如下图所示:

    即width和max-width谁的值小,那么就显示为谁的宽度
    .container {
    background-color: red;
    height: 100px;
    100px;
    max- 50px;
    min- 20px
    }
    这时再设置min-20px, width的值依然会覆盖min-width的值,container显示为100px,如下图所示:
     


    .container {
    background-color: red;
    height: 100px;
    100px;
    max- 50px;
    min- 120px
    }
    再设置min-120px,则min-width的值会覆盖width的值,container显示为120px,如下图所示:
     


    那么我们可以认为优先级:min-width>width和max-width
    当三个属性都设置时,相当于取Math.max(min-width, Math.min(width, max-width)),

     
     
  • 相关阅读:
    Vue日常报错
    VUE学习笔记二
    VUE学习笔记一
    Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured
    Apache Shiro安全(权限框架)学习笔记二
    Apache Shiro安全(权限框架)学习笔记一
    SSH框架整合
    Spring SpringMVC 和 Springboot 的关系(转载)
    SSM日常报错
    Mybatis笔记二
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12128422.html
Copyright © 2011-2022 走看看