CSS 的屬性最小和最大長度
寬度和高度是固定值。這意味著指定的寬度和高度保持不變,並且在您調整窗口大小或在另一台設備上查看網頁時不會改變(除非您使用高度相對值,例如父元素大小的百分比)。
理解這一點很重要,因為如果你想設計一種可訪問的體驗,為元素設置特定的高度和寬度可能不切實際。例如,如果您將圖像寬度指定為 500 像素,如果用戶在移動設備上查看該網站,則圖片可能無法正常呈現,屏幕尺寸可能會更小。
是其中的最小值和最大長度值。
要使元素適應屏幕和窗口尺寸,您可以使用最小寬度、最大寬度、最小高度和最大高度屬性。當您指定這些屬性時,為 width 和 height 指定的值將被覆蓋。
min-height 屬性定義屬性的最小高度。如果指定了最小高度,則元素的高度永遠不能小於最小高度值。 min-width 屬性定義了一個屬性的最小寬度,工作方式相同。
同樣,如果你想設置一個屬性的最大高度或寬度,你可以使用最大高度和最大寬度,
讓我們回到之前的咖啡示例。假設我們想根據用戶的屏幕尺寸來改變盒子的寬度。最大盒子寬度應該是 500 像素,我們的盒子不能小於 100 像素。我們可以使用以下代碼做到這一點:
點擊
讓我們來分析一下我們的代碼和聊天。這個怎麼運作。在我們的 HTML 文件中,我們在
標記之間指定了一段文本,其中包含與第一個示例相同的文本。與此文本段落關聯的類的名稱是 AboutBox
。
在我們的 CSS 文件中,我們指定了與 AboutBox
類關聯的三個屬性
屬性的寬度max- 設置為 500px,這意味著框的最大寬度為 500px。min width 屬性設置為 100px,這意味著無論用戶在什麼設備上查看網站,框都不會顯得比 100px 窄。 background-color 屬性設置為 LightGray,這會將我們的盒子的背景顏色設置為淺灰色。
但是,這些屬性為元素的高度和寬度設置了一個固定值。如果你想讓一個盒子的大小根據瀏覽器窗口的大小而改變,你可以使用 min height、min-width、max-height 和 max-width 屬性。
本教程已經討論過,參考例子,CSS中高度和寬度的基礎知識,如何使用高度和寬度屬性,以及如何使用最大高度和寬度以及最小匹配屬性來定義網頁元素的大小。你現在已經準備好了開始像專家一樣使用高度和寬度屬性!