學透CSS-7個場景讓你深入理解min/max - width/height

創作不易 拒絕白嫖 點個贊唄
關注專欄 學透CSS,帶你走進CSS的深處！！！

前言

日常開發的時候，大家有么有遇到下面這種情況：設定一個盒子，但是我們不知道有沒有內容，并且有多少內容我們也不能確定，而且又不想出現滾動條，這個時候我們就不能設定具體高度，但是我們可以設定min-height來用最小的高度撐開盒子，并且隨著內容的多少，盒子的高度可以動態調整，這樣是不是就滿足了我們的要求，min/max 寬高這個我們不常用的屬性，在某些時候還是能發揮奇效的，

min-width 與 max-width

min-width

給元素設定最小寬度，當width小于 min-width ，min-width會覆寫width的值，

min-width默認值是auto，

當然還有其他屬性值，本文我們主要討論應用，這里就不展開介紹了，

1. max-content 固有首選寬度，
2. min-content 固有最小寬度
3. fill-available包含塊的寬度減去水平 margin、border 和 padding，有些瀏覽器在實作時使用了該關鍵字的早期名字： available，
4. fit-content 等同于 min(max-content, max(min-content, fill-available).

div{
    min-width: 100px;
    height: 100px;
    width:20px;
    border: 1px solid #000;
}

針對這個div我們設定了width為20px,min-widthn:1000px，此時寬度是小于最小寬度的，導致最小寬度生效，最后div的寬度為100px，

max-width

給元素設定最大寬度，當width大于 max-width ，max-width會覆寫width的值，

max-width默認值是none，

當然還有其他屬性值，本文我們主要討論應用，這里就不展開介紹了，

1. max-content: 固有的首選寬度，
2. min-content: 固有最小寬度，
3. fill-available: 包含塊的寬度減去水平邊距、邊框和填充，一些瀏覽器為此關鍵字實作了一個古老的名稱，available，
4. fit-content與max-content等價.

min-width與max-width的優先級

min-width和 都max-width用于一個元素時，它們中的哪一個會覆寫另一個？換句話說，哪一個具有更高的優先級？

如果min-width的值 大于max-width，則該min-width值將被視為元素的寬度

.parent {
  width: 500px;
}
.child {
  min-width:100%;(500px)
  max-width: 50%;(250px)
}

通過效果圖可以才看出，child的寬度是100%

注意 當設定了width ,并且min-width大于width,min-width小于max-width時，這個時候min-width 生效，

.child {
  min-width: 50%;(250px)
  max-width: 100%;（500px）
  width: 200px;
}

此時child的寬度是250px，

min-height和 max-Height屬性

min-height

給元素設定最小高度，當height小于 min-height ，min-height會覆寫height的值，

min-height默認值是auto，

當然還有其他屬性值，本文我們主要討論應用，這里就不展開介紹了，

1. none：不限制容器的尺寸，
2. max-content 內在首選min-height，
3. min-content在最小值min-height，
4. fit-content 使用fit-content可用空間替換為指定引數的公式，即，min(max-content, max(min-content, argument))

.parent {
  height: 200px;
}
.child {
  min-height: 50%;
  height: 50px;
}

針對這個div我們設定了height為50px,min-height:50%(100px)，此時高度度是小于min-height的，導致min-height生效，最后div的高度為100px，

max-height

給元素設定最大高度，當height大于 max-height ，max-heighth會覆寫height的值，

max-height默認值是none，

當然還有其他屬性值，本文我們主要討論應用，這里就不展開介紹了，

1. auto: 瀏覽器將計算并選擇max-height指定元素的height，
2. max-content: 內容的最大值，
3. min-content：內容的最小值，
4. fit-content：使用fit-content可用空間替換為指定引數的公式，即，min(max-content, max(min-content, argument))

應用場景

flex布局 內部元素overflow:hidden;失效，

.parent {
  width: 250px;
  display: flex;
  background: rgb(182, 67, 67);
}
.child {
  border: 1px solid #000;
}
p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="parent">
  <div class="child">
    <p>
      我說道：“爸爸，你走吧，”他往車外看了看，說：“我買幾個橘子去，你就在此地，不要走動，”我看那邊月臺的柵欄外有幾個賣東西的等著顧客，
    </p>
  </div>
</div>

如圖所示，最終的效果：文字并沒有隱藏顯示省略號，這是因為啥呢？？？

div.parent在設定為flex的時候,其子元素div.child的min-width自動設定為auto,導致瀏覽器按照p標簽的寬度來自動設定寬度了，
也就是：

.child {
  border: 1px solid #000;
  min-width:auto;
}

所以我們只要設定min-width:0；覆寫掉auto，
效果如下圖所示，預期之中的效果，

頁面最大寬度

這個是用來干嘛的呢，由于市面上的顯示幕的尺寸各不相同，有的特別寬，這個時候我們就不能撐開整個網站，最好的辦法就是使用max-width限定寬度最大值，

這里我們用熟悉的掘金來舉例，
掘金首頁的文章串列頁，定義了max-width:960px;

高度未知的元素影片

其實這個問題，在我一開始學習CSS的時候就遇到了，我相信很多做過下拉選單的同學都有可能遇到這個問題，

場景：一個下拉選單，選單項未知，導致無法設定高度，當滑鼠放在上面可以緩慢的（影片）展開選單，

當然你也可以使用js解決，直接獲取高度，然后設定影片，這樣也是ok的，但是max-height也可以解決，

   #menu #list {
        max-height: 0;
        transition: max-height 0.15s ease-out;
        overflow: hidden;
        background: #d5d5d5;
      }

      #menu:hover #list {
        max-height: 500px;
        transition: max-height 5s ease-in;
      }
    <div id="menu">
      <a>選單</a>
      <ul id="list">
        <li>item</li>
        <li>item</li>
      </ul>
    </div>

這里大家可以直接拷貝，自己看一下效果，

適配移動設備的modal組件

公司有一款產品，是兼容PC和Mobile的,其中用到了modal，
因為螢屏尺寸的大小不同，modal需要設配不同的設備，
一開始是用的媒體查詢，后來發現越小的設備尺寸差不太多，臨界范圍比較難找，最后直接沒有使用媒體查詢，使用max-width;

modal{
  width: 80%;
  max-width: 450px;
}

高度為 100% 的 HTML/Body

這個場景真的是經常遇到，比如說側邊欄的高度要鋪滿，

html {
  height: 100%;
}

body {
  min-height: 100%;
}

最小寬的button

因為公司有自己的組件庫，在設計button的時候，領導要求buttonBun不能太小，
像下面著兩個按鈕，當文字只有一個的時候，會顯得特別小，所以這個時候領導為了統一樣式，設定最小寬度，

同樣的在做個人博客的標簽的時候，最好也設定一下最小寬度，

多列布局

比如常見的三欄布局，我們可以設定左側和右側布局的最大最小寬度，這樣可以保證在不同設備下主欄的寬度，同時也保證左右兩欄不會太小，
比較常見的應用應該是網站首頁的三欄布局型別，一般是兩邊的側邊欄會設定一個最大最小寬度，中間為主欄，這樣不管如何縮放都能突出主欄，且側邊欄也不會縮太小影響觀感

后記

其實應用場景還有很多，本文只是列舉了幾個比較常見的場景，大家可以在日常的開發中，多多使用這幾個屬性！