最小宽度与最大宽度

Min-content 与 Max-content

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

Min-content

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

例子：

<style>  
    div {
        width: 0;
        background: #FFEB3B;
    }
</style>

<div>
    世界中心
</div>

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

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

例子：

<style>  
    div {
        width: 0;
        background: #FFEB3B;
    }
</style>

<div>
    世界中心
</div>
<div>
    hello
</div>
<div>
    1234567890
</div>

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

例子：

<style>
    table td:first-child {
        background: #FFEB3B;
    }
</style>

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

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

例子：

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

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

Max-content

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

例子1：

//元素未设置"最大宽度"，文字发生换行
<style>
    p {
        position: relative;
        width: 68px;
        height: 25px;
        line-height: 25px;
    }
    
    span {
        background: #ccc;
        position: absolute;
        top: 25px;
        left: 0;
    }
</style>

<p>世界中心<span>The Center of the World</span></p>

例子2：

//元素设置"最大宽度"，元素超出包含块，文字没有换行
<style>
    p {
        position: relative;
        width: 68px;
        height: 25px;
        line-height: 25px;
    }
    
    span {
        background: #ccc;
        position: absolute;
        top: 25px;
        left: 0;
        white-space: nowrap;
    }
</style>

<p>世界中心<span>The Center of the World</span></p>

Min-width 和 Max-width

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

代码如下：

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

min-width 和 max-width 的特点

1.权重比 !important 更大。

例子：

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

<div></div>

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

例子：

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

<div></div>

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

---

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