最小宽度与最大宽度

min-content 与 max-content 虽然属于 CSS3 提出的规则，但在 CSS2 的时代就已经存在这些特性了，CSS3 只是让这些特性标准化。

如果我们将包裹图片或文字的元素宽度设置为 0，图片或文字会以" 最小宽度 "进行表现，以保证图文信息的正确显示。

例子：

  
    div {
 width: 0;
 background: #FFEB3B;
    }



    世界中心

这种特性在 CSS3 中称为" min-content "，具体规则可以分为以下三种：

1. 汉字的最小宽度为每个汉字的宽度；
2. 英语和数字的最小宽度由连续的字符单元决定；
3. 图片的最小宽度就是图片本身的宽度。

例子：

  
    div {
 width: 0;
 background: #FFEB3B;
    }



    世界中心


    hello


    1234567890

在 table 中比较容易出现最小宽度的情况( 或者设置元素的 display 为 table-cell )：

例子：

    table td:first-child {
 background: #FFEB3B;
    }



    

 
Hi大连
 
大连是辽宁省副省级市，是中央确定的计划单列市，别称滨城，位于辽东半岛南端，地处黄渤海之滨，背依中国东北腹地，与山东半岛隔海相望。
    

可以使用" 固定表格布局 "的方式来优化表格布局：

例子：

    table {
 table-layout: fixed;
    }
    
    table td:first-child {
 background: #FFEB3B;
 width: 25%;
 word-break: break-all;
    }



    

 
Hi大连
 
大连是辽宁省副省级市，是中央确定的计划单列市，别称滨城，位于辽东半岛南端，地处黄渤海之滨，背依中国东北腹地，与山东半岛隔海相望。
    

具有包裹性的元素，比如绝对定位元素，它的最大宽度不会超过其包含块( 不包括造成" 最小宽度 “的情况 )。如果我们为其设置属性 white-space: nowrap，元素就会突破其包含块的宽度限制，让元素表现出” 最大可用宽度 "特性。

例子1：

//元素未设置"最大宽度"，文字发生换行

    p {
 position: relative;
 width: 68px;
 height: 25px;
 line-height: 25px;
    }
    
    span {
 background: #ccc;
 position: absolute;
 top: 25px;
 left: 0;
    }


世界中心The Center of the World

例子2：

//元素设置"最大宽度"，元素超出包含块，文字没有换行

    p {
 position: relative;
 width: 68px;
 height: 25px;
 line-height: 25px;
    }
    
    span {
 background: #ccc;
 position: absolute;
 top: 25px;
 left: 0;
 white-space: nowrap;
    }


世界中心The Center of the World

min-width 和 max-width 是为自适应布局而产生的，比如我们经常使用的，让图片自适应的写法：

代码如下：

img { 
 max-width: 100%; 
 height: auto!important; 
} 

min-width 和 max-width 的特点

1.权重比 !important 更大。

例子：

    div {
 width: 100px !important;
 height: 100px;
 background: #ccc;
 min-width: 150px;
    }

2.min-width 权重比 max-width 更大。

例子：

    div {
 height: 100px;
 background: #ccc;
 max-width: 100px;
 min-width: 150px;
    }

*min-height、max-height 与 min-width 、 max-width 特点相同，在此就不再举例说明。

如有错误，欢迎指正，本人不胜感激。