通常，我們希望限制元素相對于其父元素的寬度，同時使其具有動態性。因此，有一個基礎寬度或高度的能力，使其擴展的基礎上，可用的空間。比如說，我們有一個按鈕，它的寬度應該是最小的，不應該低于它的寬度。這就是最大和最小屬性變得方便的地方。

在本文中，我們將詳細介紹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

"wrapper">"sub">

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;
??/*Other?styles*/
}

通過使用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?{
????/*Other?styles*/
????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

"c-panel">

"c-panel__title">

"c-panel__body">"c-panel__content">

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。

0000

/*?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/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是一個

元素，因此它已經具有其父元素的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設置為等于容器寬度

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

作者：Ahmad shaded ?譯者：前端小智 ?來源：sitepoint 原文：https://www.impressivewebs.com/min-max-width-height-css

?相關推薦

很多人不知道的 Vue 組件的隱藏知識點

最簡單的微前端實現方式【微前端實現的十種方式 】

幾個你不一定知道的超實用網絡狀態屬性

Vue 開發必須知道的 36 個技巧

消息未讀之點不完的小紅點設計思路(Node+Websocket)

使用Canvas實現一個在線發牌游戲 ?[純前端、附源碼]

Kbone原理解析，小程序技術該如何選型？

Node.js結合ProtoBuffer,從零實現一個redis!

詳解 ES10 中 Object.fromEntries() 的緣起

JS執行上下文的兩個階段做了些啥？

讓你徹底掌握 TS 枚舉

遇到這些 TS 問題你會頭暈么？

在 TS 中如何減少重復代碼

用上這幾招，輕松實現 TS 類型提取

TypeScript 期中考試現在開始

前端學習數據結構與算法系列(八)：快速排序與三路快排

前端學習數據結構與算法系列(七)：堆排序與歸并排序

前端學習數據結構與算法系列(六)：選擇排序與插入排序

前端學習數據結構與算法系列(五)：冒泡排序的理解與實現

前端學習數據結構與算法系列(四)：哈希、堆和二叉查找樹

前端學習數據結構與算法系列(三)：棧與隊列的基礎知識

前端學習數據結構與算法系列(二)：鏈表與數組的基礎知識

前端學習數據結構與算法系列(一)：初識數據結構與算法

騰訊文檔原來是這樣用 webpack5 的 Module federation 特性的！

絕大部分的開源項目都投入TypeScript了！你呢？

【收藏系列】JS靈魂之問(下) - 附個人成長經驗分享

【收藏系列】JS靈魂之問, 是否有offer看你接到多少個(中)

【收藏系列】JS靈魂之問, 請問你能接得住幾個？(上)

【JS進階深挖】完全弄懂數據類型轉換(上)

點在看的人特別帥/美

總結

以上是生活随笔為你收集整理的css按钮居中_你不一定知道的CSS最小和最大(宽度/高度)知识点及优缺点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。