Web 技術：CSS最小和最大(寬度/高度)知識點及優缺點

做者：Ahmad shaded
譯者：前端小智
來源：sitepoint

點贊再看，微信搜索 【大遷世界】關注這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

一般，咱們但願限制元素相對於其父元素的寬度，同時使其具備動態性。所以，有一個基礎寬度或高度的能力，使其擴展的基礎上，可用的空間。好比說，咱們有一個按鈕，它的寬度應該是最小的，不該該低於它的寬度。這就是最大和最小屬性變得方便的地方。

在本文中，咱們將詳細介紹CSS的最大和最小寬度和高度屬性，並使用可能的用例和技巧詳細解釋每個屬性。

width 屬性

首先要討論的是與寬度相關的屬性。咱們有min-width和max-width，它們中的每個都很重要，都有本身的用例。

Min Width

設置min-width的值時，其好處在於防止width屬性使用的值變得小於min-width的指定值。 請注意，min-width的默認值是auto，它解析爲0。

讓咱們舉一個基本的例子來講明這一點。

咱們有一個按鈕，裏面有一個變化的文本。文本的範圍可能從一個單詞到多個單詞。爲了確保即便只有一個單詞，它也有最小寬度，應該使用min-width。

最小寬度爲100px，這樣即便按鈕的內容很短，好比Done，或者只有一個圖標，它仍然足夠大，能夠被注意到。在使用阿拉伯語等多語言網站時，這一點很是重要。 考慮如下來自Twitter的示例：

在之前的狀況下，按鈕上帶有單詞「تم」，表示完成。 按鈕的寬度過小，所以在後面的案例中，我增長了它的最小寬度。

min-width 和 padding

在內容較長的狀況下，min-width能夠擴展按鈕的寬度，而水平方向上的padding應該被添加，以實現一個合適的外觀按鈕。

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

Max Width

在設置max-width值時，它的好處在於防止width屬性使用的值超過max-width的指定值。max-width的默認值是none。

max-width的常見且簡單的用例是將其與圖像一塊兒使用。 考慮如下示例：

圖像比它的父元素大。經過使用max-width: 100%，圖像的寬度不會超過其父圖像的寬度。若是圖像比父圖像小，則max-width: 100%不會對圖像產生實際影響，由於它比父圖像小。

使用最小寬度和最大寬度

當min-width和max-width都用於一個元素時，它們中的哪個將覆蓋另外一個?換句話說，哪一個優先級更高?

html

<div class="wrapper">
  <div class="sub"></div>
</div>

css

.sub {
  width: 100px;
  min-width: 50%;
  max-width: 100%;
}

初始width值爲100px，並在其上加上min-width和max-width值。 結果是元素寬度未超過其包含的塊/父元素的50％。

height 屬性

除了最小和最大寬度屬性外，咱們還具備與高度相同的屬性。

min-height

設置min-height的值時，其好處在於防止使用的height屬性值變得小於min-height的指定值。 請注意，最小高度的默認值爲auto，它解析爲0。

咱們用一個簡單的例子來演示一下。

咱們有一個帶有描述文本的部分。目標是爲section設置一個最小高度，這樣它就能夠處理短或長內容。考慮下面的基本狀況

.sub {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  min-height: 100px;
  color: #fff;
  background: #3c78dB;
}

最小高度爲100px，使用flexbox時，內容水平和垂直居中。 若是內容更長，會發生什麼？ 例如一段？

是的，你猜對了!section的高度將展開以包含新內容。有了它，咱們就能夠構建靈活的組件，並對其內容作出響應。

事例源碼:https://codepen.io/shadeed/pe...

max-height

在設置max-height值時，它的好處在於防止height屬性使用的值超過max-height的指定值。注意，max-height的默認值是none。

考慮下面的示例，其中我爲內容設置了max-height。 可是，由於它大於指定的空間，因此會發生溢出。 所以，文本超出了其父邊界。

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

最小和最大屬性的用例

咱們將介紹min-width，min-height，max-width和max-height的一些常見和不常見的用例。

標籤列表

當有一個標籤列表時，建議限制一個標籤的最小寬度，這樣若是它的內容很短，它的外觀就不會受到影響。

經過具備這種靈活性，不管內容有多短，標籤都將看起來不錯。 可是，若是內容做者輸入了一個很是長的標籤名稱，而他使用的內容管理系統沒有標籤的最大字符長度，將會發生什麼狀況呢？ 咱們也可使用max-width。

.c-tag {
  display: inline-block;
  min-width: 100px;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /*Other styles*/
}

經過使用max-width，標籤寬度將被限制爲特定值。 可是，這還不夠，標籤名稱應被截斷。

事例地址：https://codepen.io/shadeed/pe...

按鈕

對於按鈕的最小值和最大值有不一樣的用例，由於按鈕組件有多種變體。考慮下面的圖：

請注意，按鈕的 「Get」 寬度過小。 若是不設置最小寬度，則因爲任何緣由而沒有文本時，狀況可能會變得更糟。 在這種狀況下，設置最小寬度很重要。

使用 flexbox 將最小寬度設置爲零

min-width的默認值是auto，它被計算爲0。當一個元素是一個flex 項時，min-width的值不會計算爲零。flex 項目的最小大小等於其內容的大小。

根據CSSWG：

默認狀況下， flex項目不會縮小到它們的最小內容大小(最長單詞或固定大小元素的長度)如下。要更改此設置，請設置 min-width或 min-height屬性。

考慮下面的例子

這我的的名字有一個很長的單詞，這致使了溢出和水平滾動。儘管如此，我仍是在標題中添加了下面的CSS來截斷它

.c-person__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

因爲title是flex項目，所以解決方案是重置min-width並將其強制爲零。

.c-person__name {
    /*Other styles*/
    min-width: 0;
}

下面是修復後的樣子

根據CSSWG：

在彈性項目的主軸上可見溢出的項目上，當在彈性項目的主軸 min-size屬性中指定時，指定自動最小尺寸。

意味着，將 overflow設置爲 visible值之外的值會致使 min-width被計算爲 0，這解決了咱們不設置 min-width: 0的問題。

事例源碼：https://codepen.io/shadeed/pe...

使用 flexbox 將最小高度設置爲零

雖然與min-width相比，這是一個不太常見的問題，可是它可能發生。 只是爲了確認，問題與不能少於其內容的彈性項目有關。 結果min-height值被設置爲與內容同樣長。

考慮如下示例：

用紅色表示的文本應該在父文本中裁剪。由於面板主體是一個flex項目，因此它的min-height與它的內容相等。爲了防止這種狀況，咱們應該從新設置最小高度值。看看HTML和CSS是怎麼樣的。

HTML

<div class="c-panel">
  <h2 class="c-panel__title"><!-- Title --></h2>
  <div class="c-panel__body">
    <div class="c-panel__content"><!-- Content --></div>
  </div>
</div>

CSS

.c-panel {
  display: flex;
  flex-direction: column;
  height: 180px;
}

.c-panel__body {
  min-height: 0;
}

.c-panel__content {
  overflow-y: scroll;
  height: 100%;
}

經過向面板主體添加min-height: 0，這將重置該屬性，而且如今應該能夠正常工做。

事例源碼：https://codepen.io/shadeed/pe...

混合最小寬度和最大寬度

在某些狀況下，咱們有一個最小寬度的元素，但同時，它沒有最大寬度。這可能會致使組件太寬，而咱們並不想這樣作。考慮如下示例

因爲寬度是以像素爲單位定義的，所以不能保證上面的方法適用於移動視口。爲了解決這個問題，咱們可使用百分比來代替像素做爲最小和最大屬性。考慮下面這個具備article主體的示例。

我爲圖像添加了如下CSS：

img {
  min-width: 35%;
  max-width: 70%;
}

事例源碼:https://codepen.io/shadeed/pe...

　頁面包裝器/容器

最經常使用的｀max-width｀用例之一是頁面包裝器或容器。經過向頁面添加最大寬度，咱們能夠確保內容對用戶來講是可讀的、易於瀏覽的。

下面是一個包裝器的例子，它是居中的，左右兩邊有水平的填充。

.wrapper {
    max-width: 1170px;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: auto;
    margin-right: auto;
}

最大寬度和ch單位

ch 是一個相對於數字0的大小，1ch 就是數字 0 的寬度。如定義一個3ch的寬度，那麼就只能裝下 3個0。

<!-- HTML代碼 -->

<div>0000</div>

/* CSS代碼 */

div {
  width: 3ch;
  background: powderblue;
}

在前面的wrapper元素示例中，咱們能夠利用ch單元，由於它是一個article 主體。

.wrapper {
    max-width: 70ch;
    /* Other styles */
}

對高度未知的元素進行動畫處理

在某些狀況下，咱們面臨着使手風琴或移動菜單具備意想不到的內容高度的挑戰。在這種狀況下，max-height多是一個很好的解決方案。

請考慮如下示例：

單擊菜單按鈕後，菜單應隨動畫從上到下滑動。 若是沒有固定的高度（不建議這樣作），除非使用JavaScript，不然這是不可能的。 可是，對於max-height，這是可能的。 想法是爲高度添加一個較大的值，例如max-height：20rem，可能沒法達到，而後咱們可使用動畫從max-height: 0變換到max-height: 20rem。

.c-nav {
    max-height: 0;
    overflow: hidden;
    transition: 0.3s linear;
}

.c-nav.is-active {
    max-height: 22rem;
}

點擊菜單按鈕能夠看到動畫的運行。

事例源碼：https://codepen.io/shadeed/pe...

Hero 元素的最小高度

通常來講，我不喜歡給元素添加固定的高度。我以爲這樣作，會破壞流式佈局的結構。但有些狀況設置固定高度卻頗有用。

考慮下面的例子，在這裏咱們有一個設置了固定高度的hero部分。

是，當內容較長時，它會溢出並離開hero包裝器，這可不太好。

爲了預先解決這個問題，咱們可使用min-height來代替height。咱們能夠用這種方式先解決問題，儘管這可能會致使頁面看起來很奇怪，可是我認爲應該首先防止內容管理系統(CMS)中發生這樣的事情。這樣，問題就解決了，看起來也不錯。

內容溢出的問題不只在於內容是否大於固定的hero 高度。它能夠發生在屏幕大小調整做爲文本換行的結果。

若是改用min-height，則上述狀況根本不會發生。

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

模態組件

對於模態組件，它須要最小和最大寬度，以即可以適應移動設備到PC的屏幕上的適應。

思路1

.c-modal__body {
    width: 600px;
    max-width: 100%;
}

思路2

.c-modal__body {
    width: 100%;
    max-width: 600px;
}

對於我來講，我更喜歡第二個思路，由於我只須要定義max-width: 600px。modal是一個<div>元素，所以它已經具備其父元素的100％寬度，對嗎？

考慮下面爲模態設計簡化的測試案例。 請注意，若是可用視口空間不足，則寬度如何更改成其父級的100％。

事例源碼：https://codepen.io/shadeed/pe...

最小高度和粘性頁腳

當一個網站的內容不夠長，它但願看到頁腳粘到底部。讓咱們用一個可視化的例子來更好地展現這一點。

請注意，頁腳未粘貼在瀏覽器窗口的末尾。 那是由於內容不足以達到瀏覽器窗口高度的長度。 修復後，其外觀應以下所示：

首先，將body元素做爲flexbox容器，而後將其最小高度設置爲視口高度的100％。

事例源碼：https://codepen.io/shadeed/pe...

最大寬度/高度和視口單位的流體比率

爲了使比例容器可以根據視口大小進行響應縮放，引入了padding hack。 如今，咱們能夠經過組合CSS中的視口單位和最大寬度/高度來模仿相同的行爲。

咱們有一個尺寸爲644 * 1000像素的圖像。 爲了使其流暢，咱們須要如下內容：

• 縱橫比：高度/寬度
• 容器的寬度：能夠是固定數字，也能夠是動態數字（100％）
• 設置height爲視口寬度的100％乘以縱橫比
• 設置max-heigh，該高度是容器的寬度乘以縱橫比
• max-width設置爲等於容器寬度

人才們的 【三連】 就是小智不斷分享的最大動力，若是本篇博客有任何錯誤和建議，歡迎人才們留言，最後，謝謝你們的觀看。

---

原文： https://www.impressivewebs.co...

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

---

交流

文章每週持續更新，能夠微信搜索【大遷世界 】第一時間閱讀，回覆【福利】有多份前端視頻等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，歡迎Star。