通常，我們希望限制元素相對于其父元素的寬度，同時使其具有動态性。是以，有一個基礎寬度或高度的能力，使其擴充的基礎上，可用的空間。比如說，我們有一個按鈕，它的寬度應該是最小的，不應該低于它的寬度。這就是最大和最小屬性變得友善的地方。
在本文中，我們将詳細介紹CSS的最大和最小寬度和高度屬性，并使用可能的用例和技巧詳細解釋每一個屬性。
width 屬性
首先要讨論的是與寬度相關的屬性。我們有
min-width
和
max-width
，它們中的每一個都很重要，都有自己的用例。
Min Width
設定
min-width
的值時，其好處在于防止
width
屬性使用的值變得小于
min-width
的指定值。 請注意，
min-width
的預設值是
auto
，它解析為
。
讓我們舉一個基本的例子來說明這一點。
我們有一個按鈕，裡面有一個變化的文本。文本的範圍可能從一個單詞到多個單詞。為了確定即使隻有一個單詞，它也有最小寬度，應該使用
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
"wrapper">
"sub">
css
初始
width
值為
100px
，并在其上加上
min-width
和
max-width
值。 結果是元素寬度未超過其包含的塊/父元素的
50％
。
height 屬性
除了最小和最大寬度屬性外，我們還具有與高度相同的屬性。
min-height
設定
min-height
的值時，其好處在于防止使用的
height
屬性值變得小于
min-height
的指定值。 請注意，最小高度的預設值為
auto
，它解析為
。
我們用一個簡單的例子來示範一下。
我們有一個帶有描述文本的部分。目标是為
section
設定一個最小高度，這樣它就可以處理短或長内容。考慮下面的基本情況
最小高度為
100px
，使用flexbox時，内容水準和垂直居中。 如果内容更長，會發生什麼？ 例如一段？
是的，你猜對了!
section
的高度将展開以包含新内容。有了它，我們就可以建構靈活的元件，并對其内容做出響應。
事例源碼:https://codepen.io/shadeed/pen/cfb600cf30acdae9cf6f9cb5347a37cf
max-height
在設定
max-height
值時，它的好處在于防止
height
屬性使用的值超過
max-height
的指定值。注意，
max-height
的預設值是
none
。
考慮下面的示例，其中我為内容設定了
max-height
。 但是，因為它大于指定的空間，是以會發生溢出。 是以，文本超出了其父邊界。
最小和最大屬性的用例
我們将介紹
min-width
，
min-height
，
max-width
和
max-height
的一些常見和不常見的用例。
标簽清單
當有一個标簽清單時，建議限制一個标簽的最小寬度，這樣如果它的内容很短，它的外觀就不會受到影響。
通過具有這種靈活性，無論内容有多短，标簽都将看起來不錯。 但是，如果内容作者輸入了一個非常長的标簽名稱，而他使用的内容管理系統沒有标簽的最大字元長度，将會發生什麼情況呢？ 我們也可以使用
max-width
。
通過使用
max-width
，标簽寬度将被限制為特定值。 但是，這還不夠，标簽名稱應被截斷。
事例位址：https://codepen.io/shadeed/pen/320e42b7ad75c438a9e633417d737d16
按鈕
對于按鈕的最小值和最大值有不同的用例，因為按鈕元件有多種變體。考慮下面的圖：
請注意，按鈕的
“Get”
寬度太小。 如果不設定最小寬度，則由于任何原因而沒有文本時，情況可能會變得更糟。 在這種情況下，設定最小寬度很重要。
使用 flexbox
flexbox
min-width
的預設值是
auto
，它被計算為
。當一個元素是一個
flex
項時，
min-width
的值不會計算為零。flex 項目的最小大小等于其内容的大小。
根據CSSWG：
預設情況下，項目不會縮小到它們的最小内容大小(最長單詞或固定大小元素的長度)以下。要更改此設定，請設定flex
或min-width
屬性。min-height
考慮下面的例子
這個人的名字有一個很長的單詞，這導緻了溢出和水準滾動。盡管如此，我還是在标題中添加了下面的CSS來截斷它
由于
title
是
flex
項目，是以解決方案是重置
min-width
并将其強制為零。
下面是修複後的樣子
根據CSSWG：
在彈性項目的主軸上可見溢出的項目上，當在彈性項目的主軸 min-size
意味着，将設定為overflow
值以外的值會導緻visible
被計算為 ，這解決了我們不設定min-width
的問題。min-width: 0
事例源碼：https://codepen.io/shadeed/pen/398ccffcd437a2fb042f5ce3bdd68c57
使用 flexbox 将最小高度設定為零
雖然與
min-width
相比，這是一個不太常見的問題，但是它可能發生。 隻是為了确認，問題與不能少于其内容的彈性項目有關。 結果
min-height
值被設定為與内容一樣長。
考慮以下示例：
用紅色表示的文本應該在父文本中裁剪。因為面闆主體是一個
flex
項目，是以它的
min-height
與它的内容相等。為了防止這種情況，我們應該重新設定最小高度值。看看HTML和CSS是怎麼樣的。
HTML
"c-panel">
"c-panel__title">
"c-panel__title">
"c-panel__body">
"c-panel__content">
CSS
通過向面闆主體添加
min-height: 0
，這将重置該屬性，并且現在應該可以正常工作。
事例源碼：https://codepen.io/shadeed/pen/dea75b84b1fcfd03e5c21173a40afc20?editors=0100
混合最小寬度和最大寬度
在某些情況下，我們有一個最小寬度的元素，但同時，它沒有最大寬度。這可能會導緻元件太寬，而我們并不想這樣做。考慮以下示例
由于寬度是以像素為機關定義的，是以不能保證上面的方法适用于移動視口。為了解決這個問題，我們可以使用百分比來代替像素作為最小和最大屬性。考慮下面這個具有
article
主體的示例。
我為圖像添加了以下CSS：
事例源碼:https://codepen.io/shadeed/pen/11f49fd1a35ad06ce241bee17c3d3124
#### 頁面包裝器/容器
最常用的｀max-width｀用例之一是頁面包裝器或容器。通過向頁面添加最大寬度，我們可以確定内容對使用者來說是可讀的、易于浏覽的。
下面是一個包裝器的例子，它是居中的，左右兩邊有水準的填充。
最大寬度和 ch
ch
ch
是一個相對于數字0的大小，
1ch
就是數字
的寬度。如定義一個
3ch
的寬度，那麼就隻能裝下
3
個
。
0000
div {
width: 3ch;
background: powderblue;
}
在前面的wrapper元素示例中，我們可以利用
ch
單元，因為它是一個
article
主體。
對高度未知的元素進行動畫處理
在某些情況下，我們面臨着使手風琴或移動菜單具有意想不到的内容高度的挑戰。在這種情況下，
max-height
可能是一個很好的解決方案。
請考慮以下示例：
單擊菜單按鈕後，菜單應随動畫從上到下滑動。 如果沒有固定的高度(不建議這樣做)，除非使用JavaScript，否則這是不可能的。 但是，對于
max-height
，這是可能的。 想法是為高度添加一個較大的值，例如
max-height：20rem
，可能無法達到，然後我們可以使用動畫從
max-height: 0
變換到
max-height: 20rem
。
點選菜單按鈕可以看到動畫的運作。
事例源碼：https://codepen.io/shadeed/pen/164c7ef67f5d4541bddb8bc12b2772da
Hero 元素的最小高度
一般來說，我不喜歡給元素添加強定的高度。我覺得這樣做，會破壞流式布局的結構。但有些情況設定固定高度卻很有用。
考慮下面的例子，在這裡我們有一個設定了固定高度的
hero
部分。
是，當内容較長時，它會溢出并離開
hero
包裝器，這可不太好。
為了預先解決這個問題，我們可以使用
min-height
來代替
height
。我們可以用這種方式先解決問題，盡管這可能會導緻頁面看起來很奇怪，但是我認為應該首先防止内容管理系統(CMS)中發生這樣的事情。這樣，問題就解決了，看起來也不錯。
内容溢出的問題不僅在于内容是否大于固定的
hero
高度。它可以發生在螢幕大小調整作為文本換行的結果。
如果改用
min-height
，則上述情況根本不會發生。
模态元件
對于模态元件，它需要最小和最大寬度，以便可以适應移動裝置到PC的螢幕上的适應。
思路1
思路2
對于我來說，我更喜歡第二個思路，因為我隻需要定義
max-width: 600px
。
modal
是一個
元素，是以它已經具有其父元素的
100％
寬度，對嗎？
考慮下面為模态設計簡化的測試案例。 請注意，如果可用視口空間不足，則寬度如何更改為其父級的
100％
。
css按鈕居中_Web 技術：CSS最小和最大(寬度/高度)知識點及優缺點 事例源碼：https://codepen.io/shadeed/pen/5dcb1c4c6773cc3a97a766c327c36443
最小高度和粘性頁腳
最小高度和粘性頁腳
當一個網站的内容不夠長，它希望看到頁腳粘到底部。讓我們用一個可視化的例子來更好地展示這一點。
css按鈕居中_Web 技術：CSS最小和最大(寬度/高度)知識點及優缺點 請注意，頁腳未粘貼在浏覽器視窗的末尾。 那是因為内容不足以達到浏覽器視窗高度的長度。 修複後，其外觀應如下所示：
css按鈕居中_Web 技術：CSS最小和最大(寬度/高度)知識點及優缺點 首先，将
body
元素作為
flexbox
容器，然後将其最小高度設定為視口高度的
100％
。
事例源碼：https://codepen.io/shadeed/pen/aeb14f2819b9cc4805275b88c2d55645?editors=1100
最大寬度/高度和視口機關的流體比率
最大寬度/高度和視口機關的流體比率
為了使比例容器能夠根據視口大小進行響應縮放，引入了padding hack。 現在，我們可以通過組合CSS中的視口機關和最大寬度/高度來模仿相同的行為。
css按鈕居中_Web 技術：CSS最小和最大(寬度/高度)知識點及優缺點 我們有一個尺寸為
644 * 1000
像素的圖像。 為了使其流暢，我們需要以下内容：
縱橫比：高度/寬度容器的寬度：可以是固定數字，也可以是動态數字(100％)設定
height
為視口寬度的100％乘以縱橫比設定
max-heigh
，該高度是容器的寬度乘以縱橫比
max-width
設定為等于容器寬度
css按鈕居中_Web 技術：CSS最小和最大(寬度/高度)知識點及優缺點 人才們的 【三連】 就是小智不斷分享的最大動力，如果本篇部落格有任何錯誤和建議，歡迎人才們留言，最後，謝謝大家的觀看。