Michael Zippo
在設計網頁時，您可能希望為網頁上顯示的元素指定特定尺寸。例如，您可能希望一個框具有特定的高度或將一行文本延伸到特定的寬度。
這就是 CSS 高度和寬度屬性發揮作用的地方。 height 和 width 屬性用於定義 CSS 中元素的高度和寬度。
本教程將通過示例討論 CSS 高度和寬度屬性的基礎知識以及如何使用最小和最大高度和寬度屬性用於設計響應元素。在本教程結束時，您將熟練使用 CSS 高度和寬度屬性來設置網頁上元素的大小。
調整網頁上元素的高度和寬度允許您定義該元素將在網頁上佔據的空間。這可以幫助您開發網頁元素的結構，以便每個元素都能根據您的需要正確顯示。
要定義元素可以水平和垂直延伸的距離，您可以使用寬度和height 屬性。
width 和height 屬性允許您為框的內容區域設置特定的寬度和高度。這意味著 width 和 height 屬性控制框包含的空間量，並且不影響框的邊距或一組填充
height 和 width 屬性使用以下語法：。
p>HeightValue 和 widthValue 可以接受以下任何值：
現在我們已經了解了 height 和 width 屬性的基礎知識，我們可以探索其中的每一個示例
假設我們正在為當地一家名為 The Pickled Apple 的咖啡館設計一個網站。這家咖啡館要求我們在他們的“關於”上創建一個框網站，其中應包含咖啡館的簡短描述。
此區域應為 200 像素寬和 200 像素高，並具有淺灰色背景。選擇這些尺寸是為了確保我們要添加的其他元素到我們實現它們時的網頁形狀。
我們可以使用以下代碼來創建框：
點擊
讓我們分析一下我們的代碼。在我們的 HTML 文件中，我們使用
標籤。這個
標籤的類名是AboutBox，我們在CSS文件中使用它來設置文本段落的樣式。
在我們的CSS文件中，我們定義了一個樣式規則：適用於類名為 AboutBox 的任何元素。此樣式規則將元素的高度設置為 200px，將元素的寬度設置為 200px，並將元素的背景顏色設置為淺灰色。
如果我們希望我們的元素為 100px 寬。我們需要可以改變寬度屬性等於 100px。或者，如果我們希望我們的元素高度為 300px，我們可以將 Height 屬性更改為等於 300px
寬度和高度是固定值。這意味著指定的寬度和高度保持不變，並且在您調整窗口大小或在另一台設備上查看網頁時不會改變（除非您使用高度相對值，例如父元素大小的百分比）。
理解這一點很重要，因為如果你想設計一種可訪問的體驗，為元素設置特定的高度和寬度可能不切實際。例如，如果您將圖像寬度指定為 500 像素，如果用戶在移動設備上查看該網站，則圖片可能無法正常呈現，屏幕尺寸可能會更小。
是其中的最小值和最大長度值。
要使元素適應屏幕和窗口尺寸，您可以使用最小寬度、最大寬度、最小高度和最大高度屬性。當您指定這些屬性時，為 width 和 height 指定的值將被覆蓋。
min-height 屬性定義屬性的最小高度。如果指定了最小高度，則元素的高度永遠不能小於最小高度值。 min-width 屬性定義了一個屬性的最小寬度，工作方式相同。
同樣，如果你想設置一個屬性的最大高度或寬度，你可以使用最大高度和最大寬度，
讓我們回到之前的咖啡示例。假設我們想根據用戶的屏幕尺寸來改變盒子的寬度。最大盒子寬度應該是 500 像素，我們的盒子不能小於 100 像素。我們可以使用以下代碼做到這一點：
點擊
讓我們來分析一下我們的代碼和聊天。這個怎麼運作。在我們的 HTML 文件中，我們在
標記之間指定了一段文本，其中包含與第一個示例相同的文本。與此文本段落關聯的類的名稱是 AboutBox。
在我們的 CSS 文件中，我們指定了與 AboutBox 類關聯的三個屬性
屬性的寬度max- 設置為 500px，這意味著框的最大寬度為 500px。min width 屬性設置為 100px，這意味著無論用戶在什麼設備上查看網站，框都不會顯得比 100px 窄。 background-color 屬性設置為 LightGray，這會將我們的盒子的背景顏色設置為淺灰色。
這個區域的大小會根據瀏覽器的大小而變化。所以如果你讓瀏覽器窗口變小，框的大小會相應改變。但是，無論你的瀏覽器窗口出現多大，
標籤的寬度永遠不會超過500px。
CSS 高度和寬度屬性IES 允許您定義網頁上元素的高度和寬度。
但是，這些屬性為元素的高度和寬度設置了一個固定值。如果你想讓一個盒子的大小根據瀏覽器窗口的大小而改變，你可以使用 min height、min-width、max-height 和 max-width 屬性。
本教程已經討論過，參考例子，CSS中高度和寬度的基礎知識，如何使用高度和寬度屬性，以及如何使用最大高度和寬度以及最小匹配屬性來定義網頁元素的大小。你現在已經準備好了開始像專家一樣使用高度和寬度屬性！
