整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
常，我們希望限制元素相對(duì)于其父元素的寬度，同時(shí)使其具有動(dòng)態(tài)性。因此，有一個(gè)基礎(chǔ)寬度或高度的能力，使其擴(kuò)展的基礎(chǔ)上，可用的空間。比如說(shuō)，我們有一個(gè)按鈕，它的寬度應(yīng)該是最小的，不應(yīng)該低于它的寬度。這就是最大和最小屬性變得方便的地方。
在本文中，我們將詳細(xì)介紹CSS的最大和最小寬度和高度屬性，并使用可能的用例和技巧詳細(xì)解釋每一個(gè)屬性。
首先要討論的是與寬度相關(guān)的屬性。我們有min-width和max-width，它們中的每一個(gè)都很重要，都有自己的用例。
設(shè)置min-width的值時(shí)，其好處在于防止width屬性使用的值變得小于min-width的指定值。 請(qǐng)注意，min-width的默認(rèn)值是auto，它解析為0。
讓我們舉一個(gè)基本的例子來(lái)說(shuō)明這一點(diǎn)。
我們有一個(gè)按鈕，里面有一個(gè)變化的文本。文本的范圍可能從一個(gè)單詞到多個(gè)單詞。為了確保即使只有一個(gè)單詞，它也有最小寬度，應(yīng)該使用min-width。
最小寬度為100px，這樣即使按鈕的內(nèi)容很短，比如Done，或者只有一個(gè)圖標(biāo)，它仍然足夠大，可以被注意到。在使用阿拉伯語(yǔ)等多語(yǔ)言網(wǎng)站時(shí)，這一點(diǎn)非常重要。 考慮以下來(lái)自Twitter的示例：
在以前的情況下，按鈕上帶有單詞“??”，表示完成。 按鈕的寬度太小，因此在后面的案例中，我增加了它的最小寬度。
在內(nèi)容較長(zhǎng)的情況下，min-width可以擴(kuò)展按鈕的寬度，而水平方向上的padding應(yīng)該被添加，以實(shí)現(xiàn)一個(gè)合適的外觀按鈕。
在設(shè)置max-width值時(shí)，它的好處在于防止width屬性使用的值超過(guò)max-width的指定值。max-width的默認(rèn)值是none。
max-width的常見(jiàn)且簡(jiǎn)單的用例是將其與圖像一起使用。 考慮以下示例：
圖像比它的父元素大。通過(guò)使用max-width: 100%，圖像的寬度不會(huì)超過(guò)其父圖像的寬度。如果圖像比父圖像小，則max-width: 100%不會(huì)對(duì)圖像產(chǎn)生實(shí)際影響，因?yàn)樗雀笀D像小。
當(dāng)min-width和max-width都用于一個(gè)元素時(shí)，它們中的哪一個(gè)將覆蓋另一個(gè)?換句話說(shuō)，哪個(gè)優(yōu)先級(jí)更高?
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值。 結(jié)果是元素寬度未超過(guò)其包含的塊/父元素的50％。
除了最小和最大寬度屬性外，我們還具有與高度相同的屬性。
設(shè)置min-height的值時(shí)，其好處在于防止使用的height屬性值變得小于min-height的指定值。 請(qǐng)注意，最小高度的默認(rèn)值為auto，它解析為0。
我們用一個(gè)簡(jiǎn)單的例子來(lái)演示一下。
我們有一個(gè)帶有描述文本的部分。目標(biāo)是為section設(shè)置一個(gè)最小高度，這樣它就可以處理短或長(zhǎng)內(nèi)容。考慮下面的基本情況
.sub {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
min-height: 100px;
color: #fff;
background: #3c78dB;
}最小高度為100px，使用flexbox時(shí)，內(nèi)容水平和垂直居中。 如果內(nèi)容更長(zhǎng)，會(huì)發(fā)生什么？ 例如一段？
是的，你猜對(duì)了!section的高度將展開(kāi)以包含新內(nèi)容。有了它，我們就可以構(gòu)建靈活的組件，并對(duì)其內(nèi)容做出響應(yīng)。
事例源碼:https://codepen.io/shadeed/pen/cfb600cf30acdae9cf6f9cb5347a37cf
在設(shè)置max-height值時(shí)，它的好處在于防止height屬性使用的值超過(guò)max-height的指定值。注意，max-height的默認(rèn)值是none。
考慮下面的示例，其中我為內(nèi)容設(shè)置了max-height。 但是，因?yàn)樗笥谥付ǖ目臻g，所以會(huì)發(fā)生溢出。 因此，文本超出了其父邊界。
我們將介紹min-width，min-height，max-width和max-height的一些常見(jiàn)和不常見(jiàn)的用例。
當(dāng)有一個(gè)標(biāo)簽列表時(shí)，建議限制一個(gè)標(biāo)簽的最小寬度，這樣如果它的內(nèi)容很短，它的外觀就不會(huì)受到影響。
通過(guò)具有這種靈活性，無(wú)論內(nèi)容有多短，標(biāo)簽都將看起來(lái)不錯(cuò)。 但是，如果內(nèi)容作者輸入了一個(gè)非常長(zhǎng)的標(biāo)簽名稱，而他使用的內(nèi)容管理系統(tǒng)沒(méi)有標(biāo)簽的最大字符長(zhǎng)度，將會(huì)發(fā)生什么情況呢？ 我們也可以使用max-width。
.c-tag {
display: inline-block;
min-width: 100px;
max-width: 250px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/*Other styles*/
}通過(guò)使用max-width，標(biāo)簽寬度將被限制為特定值。 但是，這還不夠，標(biāo)簽名稱應(yīng)被截?cái)唷?/p>
事例地址：https://codepen.io/shadeed/pen/320e42b7ad75c438a9e633417d737d16
對(duì)于按鈕的最小值和最大值有不同的用例，因?yàn)榘粹o組件有多種變體?？紤]下面的圖：
請(qǐng)注意，按鈕的“Get”寬度太小。 如果不設(shè)置最小寬度，則由于任何原因而沒(méi)有文本時(shí)，情況可能會(huì)變得更糟。 在這種情況下，設(shè)置最小寬度很重要。
min-width的默認(rèn)值是auto，它被計(jì)算為0。當(dāng)一個(gè)元素是一個(gè)flex項(xiàng)時(shí)，min-width的值不會(huì)計(jì)算為零。flex 項(xiàng)目的最小大小等于其內(nèi)容的大小。
根據(jù)CSSWG：
默認(rèn)情況下，flex項(xiàng)目不會(huì)縮小到它們的最小內(nèi)容大小(最長(zhǎng)單詞或固定大小元素的長(zhǎng)度)以下。要更改此設(shè)置，請(qǐng)?jiān)O(shè)置min-width或 min-height屬性。
考慮下面的例子
這個(gè)人的名字有一個(gè)很長(zhǎng)的單詞，這導(dǎo)致了溢出和水平滾動(dòng)。盡管如此，我還是在標(biāo)題中添加了下面的CSS來(lái)截?cái)嗨?/p>
.c-person__name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}由于title是flex項(xiàng)目，因此解決方案是重置min-width并將其強(qiáng)制為零。
.c-person__name {
/*Other styles*/
min-width: 0;
}下面是修復(fù)后的樣子
根據(jù)CSSWG：
在彈性項(xiàng)目的主軸上可見(jiàn)溢出的項(xiàng)目上，當(dāng)在彈性項(xiàng)目的主軸min-size屬性中指定時(shí)，指定自動(dòng)最小尺寸。
意味著，將overflow設(shè)置為visible值以外的值會(huì)導(dǎo)致min-width被計(jì)算為0，這解決了我們不設(shè)置min-width: 0的問(wèn)題。
事例源碼：https://codepen.io/shadeed/pen/398ccffcd437a2fb042f5ce3bdd68c57
雖然與min-width相比，這是一個(gè)不太常見(jiàn)的問(wèn)題，但是它可能發(fā)生。 只是為了確認(rèn)，問(wèn)題與不能少于其內(nèi)容的彈性項(xiàng)目有關(guān)。 結(jié)果min-height值被設(shè)置為與內(nèi)容一樣長(zhǎng)。
考慮以下示例：
用紅色表示的文本應(yīng)該在父文本中裁剪。因?yàn)槊姘逯黧w是一個(gè)flex項(xiàng)目，所以它的min-height與它的內(nèi)容相等。為了防止這種情況，我們應(yīng)該重新設(shè)置最小高度值?？纯碒TML和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%;
}通過(guò)向面板主體添加min-height: 0，這將重置該屬性，并且現(xiàn)在應(yīng)該可以正常工作。
事例源碼：https://codepen.io/shadeed/pen/dea75b84b1fcfd03e5c21173a40afc20?editors=0100
在某些情況下，我們有一個(gè)最小寬度的元素，但同時(shí)，它沒(méi)有最大寬度。這可能會(huì)導(dǎo)致組件太寬，而我們并不想這樣做?？紤]以下示例
由于寬度是以像素為單位定義的，因此不能保證上面的方法適用于移動(dòng)視口。為了解決這個(gè)問(wèn)題，我們可以使用百分比來(lái)代替像素作為最小和最大屬性?？紤]下面這個(gè)具有article主體的示例。
我為圖像添加了以下CSS：
img {
min-width: 35%;
max-width: 70%;
}事例源碼:https://codepen.io/shadeed/pen/11f49fd1a35ad06ce241bee17c3d3124
#### 頁(yè)面包裝器/容器
最常用的｀max-width｀用例之一是頁(yè)面包裝器或容器。通過(guò)向頁(yè)面添加最大寬度，我們可以確保內(nèi)容對(duì)用戶來(lái)說(shuō)是可讀的、易于瀏覽的。
下面是一個(gè)包裝器的例子，它是居中的，左右兩邊有水平的填充。
.wrapper {
max-width: 1170px;
padding-left: 16px;
padding-right: 16px;
margin-left: auto;
margin-right: auto;
}ch 是一個(gè)相對(duì)于數(shù)字0的大小，1ch 就是數(shù)字 0 的寬度。如定義一個(gè)3ch的寬度，那么就只能裝下 3個(gè)0。
<!-- HTML代碼 -->
<div>0000</div>
/* CSS代碼 */
div {
width: 3ch;
background: powderblue;
}在前面的wrapper元素示例中，我們可以利用ch單元，因?yàn)樗且粋€(gè)article 主體。
.wrapper {
max-width: 70ch;
/* Other styles */
}在某些情況下，我們面臨著使手風(fēng)琴或移動(dòng)菜單具有意想不到的內(nèi)容高度的挑戰(zhàn)。在這種情況下，max-height可能是一個(gè)很好的解決方案。
請(qǐng)考慮以下示例：
單擊菜單按鈕后，菜單應(yīng)隨動(dòng)畫(huà)從上到下滑動(dòng)。 如果沒(méi)有固定的高度（不建議這樣做），除非使用JavaScript，否則這是不可能的。 但是，對(duì)于max-height，這是可能的。 想法是為高度添加一個(gè)較大的值，例如max-height：20rem，可能無(wú)法達(dá)到，然后我們可以使用動(dòng)畫(huà)從max-height: 0變換到max-height: 20rem。
.c-nav {
max-height: 0;
overflow: hidden;
transition: 0.3s linear;
}
.c-nav.is-active {
max-height: 22rem;
}點(diǎn)擊菜單按鈕可以看到動(dòng)畫(huà)的運(yùn)行。
事例源碼：https://codepen.io/shadeed/pen/164c7ef67f5d4541bddb8bc12b2772da
一般來(lái)說(shuō)，我不喜歡給元素添加固定的高度。我覺(jué)得這樣做，會(huì)破壞流式布局的結(jié)構(gòu)。但有些情況設(shè)置固定高度卻很有用。
考慮下面的例子，在這里我們有一個(gè)設(shè)置了固定高度的hero部分。
是，當(dāng)內(nèi)容較長(zhǎng)時(shí)，它會(huì)溢出并離開(kāi)hero包裝器，這可不太好。
為了預(yù)先解決這個(gè)問(wèn)題，我們可以使用min-height來(lái)代替height。我們可以用這種方式先解決問(wèn)題，盡管這可能會(huì)導(dǎo)致頁(yè)面看起來(lái)很奇怪，但是我認(rèn)為應(yīng)該首先防止內(nèi)容管理系統(tǒng)(CMS)中發(fā)生這樣的事情。這樣，問(wèn)題就解決了，看起來(lái)也不錯(cuò)。
內(nèi)容溢出的問(wèn)題不僅在于內(nèi)容是否大于固定的hero 高度。它可以發(fā)生在屏幕大小調(diào)整作為文本換行的結(jié)果。
如果改用min-height，則上述情況根本不會(huì)發(fā)生。
對(duì)于模態(tài)組件，它需要最小和最大寬度，以便可以適應(yīng)移動(dòng)設(shè)備到PC的屏幕上的適應(yīng)。
思路1
.c-modal__body {
width: 600px;
max-width: 100%;
}思路2
.c-modal__body {
width: 100%;
max-width: 600px;
}對(duì)于我來(lái)說(shuō)，我更喜歡第二個(gè)思路，因?yàn)槲抑恍枰xmax-width: 600px。modal是一個(gè)<div>元素，因此它已經(jīng)具有其父元素的100％寬度，對(duì)嗎？
考慮下面為模態(tài)設(shè)計(jì)簡(jiǎn)化的測(cè)試案例。 請(qǐng)注意，如果可用視口空間不足，則寬度如何更改為其父級(jí)的100％。
事例源碼：https://codepen.io/shadeed/pen/5dcb1c4c6773cc3a97a766c327c36443
當(dāng)一個(gè)網(wǎng)站的內(nèi)容不夠長(zhǎng)，它希望看到頁(yè)腳粘到底部。讓我們用一個(gè)可視化的例子來(lái)更好地展示這一點(diǎn)。
請(qǐng)注意，頁(yè)腳未粘貼在瀏覽器窗口的末尾。 那是因?yàn)閮?nèi)容不足以達(dá)到瀏覽器窗口高度的長(zhǎng)度。 修復(fù)后，其外觀應(yīng)如下所示：
首先，將body元素作為flexbox容器，然后將其最小高度設(shè)置為視口高度的100％。
事例源碼：https://codepen.io/shadeed/pen/aeb14f2819b9cc4805275b88c2d55645?editors=1100
為了使比例容器能夠根據(jù)視口大小進(jìn)行響應(yīng)縮放，引入了padding hack。 現(xiàn)在，我們可以通過(guò)組合CSS中的視口單位和最大寬度/高度來(lái)模仿相同的行為。
我們有一個(gè)尺寸為644 * 1000像素的圖像。 為了使其流暢，我們需要以下內(nèi)容：
人才們的 【三連】 就是小智不斷分享的最大動(dòng)力，如果本篇博客有任何錯(cuò)誤和建議，歡迎人才們留言，最后，謝謝大家的觀看。
作者：Ahmad shaded 譯者：前端小智 來(lái)源：sitepoint 原文：https://www.impressivewebs.com/min-max-width-height-css
TML5提供了一個(gè)新屬性naturalWidth/naturalHeight可以直接獲取圖片的原始寬高。這兩個(gè)屬性在Firefox/Chrome/Safari/Opera及IE9里已經(jīng)實(shí)現(xiàn)。下面改造下獲取圖片尺寸的方法，方便后面直接使用，不要謝我哦。
js獲取圖片寬高
索 HTML 圖像的不同概念，以及如何有效地使用它們?cè)谀木W(wǎng)站上增加視覺(jué)吸引力、傳達(dá)信息和表達(dá)情感。 本指南包含大量示例和實(shí)用技巧，可幫助您創(chuàng)建一個(gè)視覺(jué)效果驚人且用戶友好的網(wǎng)站。
圖像是網(wǎng)頁(yè)設(shè)計(jì)師和開(kāi)發(fā)人員的強(qiáng)大工具，它們可用于傳達(dá)信息、表達(dá)情感并使網(wǎng)站更具視覺(jué)吸引力。 HTML 圖像概念是網(wǎng)頁(yè)設(shè)計(jì)和開(kāi)發(fā)的重要方面。 它們用于將圖像嵌入到網(wǎng)頁(yè)中，以便于顯示和共享圖片和圖形。 在這篇博文中，我們將探討 HTML 圖像的不同概念以及如何有效地使用它們。
首先，讓我們談?wù)劜煌愋偷?HTML 圖像。 有兩種主要類型的圖像：內(nèi)嵌圖像和背景圖像。 內(nèi)聯(lián)圖像直接嵌入到 HTML 代碼中，而背景圖像則應(yīng)用于元素的背景。
在此示例中，內(nèi)聯(lián)圖像“image.jpg”直接嵌入到 HTML 代碼中并顯示給用戶。
在此示例中，背景圖像“image.jpg”應(yīng)用于 div 元素的背景并顯示給用戶。
以合乎邏輯且一致的方式使用圖像也很重要。 這意味著您應(yīng)該使用它們來(lái)傳達(dá)與網(wǎng)頁(yè)內(nèi)容相關(guān)的信息或表達(dá)情感，而不是隨意使用它們。 此外，使用 alt 屬性為圖像添加文本替代也很重要，它允許可能使用屏幕閱讀器的用戶訪問(wèn)圖像，或者以防圖像加載失敗。
在此示例中，替代文本“日落的美麗圖像”讓用戶清楚地了解圖像所代表的內(nèi)容。
另一個(gè) HTML 圖像概念是使用寬度和高度屬性調(diào)整圖像大小的能力。 這些屬性允許您調(diào)整圖像大小以適合您的布局和設(shè)計(jì)。
在此示例中，圖像的寬度設(shè)置為 300 像素，圖像的高度設(shè)置為 200 像素。
HTML 圖像概念是網(wǎng)頁(yè)設(shè)計(jì)和開(kāi)發(fā)的重要方面。 它們用于將圖像嵌入到網(wǎng)頁(yè)中，以便于顯示和共享圖片和圖形。 通過(guò)了解不同類型的圖像并正確使用它們，您可以為您的網(wǎng)站增加額外的視覺(jué)吸引力，并以有力的方式傳達(dá)信息或表達(dá)情感。 無(wú)論是使用內(nèi)聯(lián)圖片還是背景圖片，添加替代文本或調(diào)整大小，這些概念都是創(chuàng)建視覺(jué)效果驚人且用戶友好的網(wǎng)站的關(guān)鍵。
但不要只相信我們的話，您自己試試吧！ 嘗試使用 HTML 圖像，看看它們?nèi)绾卧鰪?qiáng)您網(wǎng)站的整體外觀。 通過(guò)每一行代碼，您離創(chuàng)建一個(gè)您的訪問(wèn)者會(huì)喜歡的美觀且引人入勝的網(wǎng)站又近了一步。 請(qǐng)記住，圖像具有喚起情感和傳達(dá)信息的力量，因此請(qǐng)明智地使用它們并將它們作為您網(wǎng)頁(yè)設(shè)計(jì)策略的重要組成部分。 通過(guò)正確組合 HTML 和圖像，您將創(chuàng)建一個(gè)脫穎而出并給訪問(wèn)者留下持久印象的網(wǎng)站。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
