諾禾致源|諾禾：Web 技術
Web 技術：CSS最小和最大(寬度/高度)知識點及優缺點
通常，我們希望限制元素相對於其父元素的寬度，同時使其具有動態性。因此，有一個基礎寬度或高度的能力，使其擴充套件的基礎上，可用的空間。比如說，我們有一個按鈕，它的寬度應該是最小的，不應該低於它的寬度。這就是最大和最小屬性變得方便的地方。
在本文中，我們將詳細介紹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
<divclass="wrapper">
</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/pen/cfb600cf30acdae9cf6f9cb5347a37cf
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;
/*Otherstyles*/
}通過使用max-width，標籤寬度將被限制為特定值。 但是，這還不夠，標籤名稱應被截斷。
事例地址：https://codepen.io/shadeed/pen/320e42b7ad75c438a9e633417d737d16
按鈕
對於按鈕的最小值和最大值有不同的用例，因為按鈕元件有多種變體。考慮下面的圖：
請注意，按鈕的“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{
/*Otherstyles*/
min-width:0;
}下面是修復後的樣子
根據CSSWG：
在彈性專案的主軸上可見溢位的專案上，當在彈性專案的主軸min-size屬性中指定時，指定自動最小尺寸。
意味著，將overflow設定為visible值以外的值會導致min-width被計算為0，這解決了我們不設定min-width: 0的問題。
事例原始碼：https://codepen.io/shadeed/pen/398ccffcd437a2fb042f5ce3bdd68c57
使用 flexbox 將最小高度設定為零
雖然與min-width相比，這是一個不太常見的問題，但是它可能發生。 只是為了確認，問題與不能少於其內容的彈性專案有關。 結果min-height值被設定為與內容一樣長。
考慮以下示例：
用紅色表示的文字應該在父文字中裁剪。因為面板主體是一個flex專案，所以它的min-height與它的內容相等。為了防止這種情況，我們應該重新設定最小高度值。看看HTML和CSS是怎麼樣的。
HTML
<divclass="c-panel">
<h2class="c-panel__title"><!--Title--></h2>
<divclass="c-panel__body">
<divclass="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/pen/dea75b84b1fcfd03e5c21173a40afc20?editors=0100
混合最小寬度和最大寬度
在某些情況下，我們有一個最小寬度的元素，但同時，它沒有最大寬度。這可能會導致元件太寬，而我們並不想這樣做。考慮以下示例
由於寬度是以畫素為單位定義的，因此不能保證上面的方法適用於移動視口。為了解決這個問題，我們可以使用百分比來代替畫素作為最小和最大屬性。考慮下面這個具有article主體的示例。
我為影象添加了以下CSS：
img{
min-width:35%;
max-width:70%;
}事例原始碼:https://codepen.io/shadeed/pen/11f49fd1a35ad06ce241bee17c3d3124
#### 頁面包裝器/容器
最常用的｀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;
/*Otherstyles*/
}對高度未知的元素進行動畫處理
在某些情況下，我們面臨著使手風琴或移動選單具有意想不到的內容高度的挑戰。在這種情況下，max-height可能是一個很好的解決方案。
請考慮以下示例：
單擊選單按鈕後，選單應隨動畫從上到下滑動。 如果沒有固定的高度（不建議這樣做），除非使用JavaScript，否則這是不可能的。 但是，對於max-height，這是可能的。 想法是為高度新增一個較大的值，例如max-height：20rem，可能無法達到，然後我們可以使用動畫從max-height: 0變換到max-height: 20rem。
.c-nav{
max-height:0;
overflow:hidden;
transition:0.3slinear;
}
.c-nav.is-active{
max-height:22rem;
}點選選單按鈕可以看到動畫的執行。
事例原始碼：https://codepen.io/shadeed/pen/164c7ef67f5d4541bddb8bc12b2772da
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/pen/5dcb1c4c6773cc3a97a766c327c36443
最小高度和粘性頁尾
當一個網站的內容不夠長，它希望看到頁尾粘到底部。讓我們用一個視覺化的例子來更好地展示這一點。
請注意，頁尾未貼上在瀏覽器視窗的末尾。 那是因為內容不足以達到瀏覽器視窗高度的長度。 修復後，其外觀應如下所示：
首先，將body元素作為flexbox容器，然後將其最小高度設定為視口高度的100％。
事例原始碼：https://codepen.io/shadeed/pen/aeb14f2819b9cc4805275b88c2d55645?editors=1100
最大寬度/高度和視口單位的流體比率
為了使比例容器能夠根據視口大小進行響應縮放，引入了padding hack。 現在，我們可以通過組合CSS中的視口單位和最大寬度/高度來模仿相同的行為。
我們有一個尺寸為644 * 1000畫素的影象。 為了使其流暢，我們需要以下內容：
- 縱橫比：高度/寬度
- 容器的寬度：可以是固定數字，也可以是動態數字（100％）
- 設定height為視口寬度的100％乘以縱橫比
- 設定max-heigh，該高度是容器的寬度乘以縱橫比
- max-width設定為等於容器寬度
人才們的 【三連】 就是小智不斷分享的最大動力，如果本篇部落格有任何錯誤和建議，歡迎人才們留言，最後，謝謝大家的觀看。