CSS 中的尺寸專案
在之前的課程中，您已經瞭解了使用 CSS 為網頁上的專案設定尺寸的多種方法。瞭解設計中不同功能的尺寸很重要。因此，在本課中，我們將總結使用 CSS 為元素設定尺寸的各種方法，並定義一些關於尺寸的術語，這些術語將幫助您在未來。
事物的自然或固有尺寸
HTML 元素在受到任何 CSS 影響之前，都具有自然尺寸。一個簡單的例子就是圖片。圖片檔案包含尺寸資訊，稱為其**固有尺寸**。此尺寸由圖片本身決定，而不是由我們碰巧應用的任何格式決定。
如果您將圖片放置在頁面上，並且沒有使用 <img> 標籤上的屬性或 CSS 更改其高度或寬度，它將使用該固有尺寸顯示。我們為下面示例中的圖片添加了邊框，以便您可以看到其在檔案中定義的尺寸範圍。
另一方面，空 <div> 本身沒有尺寸。如果您將一個 <div> 新增到您的 HTML 中，並且沒有內容，然後像我們對圖片所做的那樣為其新增邊框，您將看到頁面上有一條線。這是元素上摺疊的邊框 — 沒有內容可以將其撐開。在我們下面的示例中，該邊框延伸到容器的寬度，因為它是一個塊級元素，這是一種您應該開始熟悉的行為。它沒有高度（或塊維度的尺寸），因為沒有內容。
在上面的示例中，嘗試在空元素內新增一些文字。現在邊框包含該文字，因為元素的高度由內容定義。因此，此 <div> 在塊維度上的尺寸來自內容的尺寸。同樣，這是元素的固有尺寸 — 它的尺寸由其內容定義。
設定特定尺寸
當然，我們可以為設計中的元素賦予特定的尺寸。當為元素賦予尺寸時（其內容需要適合該尺寸），我們稱之為**外在尺寸**。以我們上面示例中的 <div> 為例 — 我們可以為其指定特定的 width 和 height 值，現在無論放置什麼內容，它都將具有該尺寸。正如我們 在關於溢位的上一課中發現的那樣，如果內容多於元素可以容納的空間，則設定的高度會導致內容溢位。
由於溢位問題，我們必須非常小心地在網頁上使用固定高度的元素，這些元素具有長度或百分比。
使用百分比
在許多方面，百分比類似於長度單位，正如我們在 關於值和單位的課程中討論的那樣，它們通常可以與長度互換使用。使用百分比時，您需要知道它是相對於什麼值的百分比。對於位於另一個容器內的框，如果您為子框指定百分比寬度，它將是父容器寬度的百分比。
這是因為百分比相對於包含塊的尺寸解析。沒有應用百分比的情況下，我們的 <div> 將佔據 100% 的可用空間，因為它是一個塊級元素。如果我們為其指定百分比寬度，這將是其通常填充空間的百分比。
百分比邊距和填充
如果您將`margins`和`padding`設定為百分比，您可能會注意到一些奇怪的行為。在下面的示例中，我們有一個框。我們給內部框設定了margin為 10% 和padding為 10%。框頂部和底部的填充和邊距與左右兩側的填充和邊距大小相同。
您可能會期望例如百分比的頂部和底部邊距是元素高度的百分比，而百分比的左側和右側邊距是元素寬度的百分比。但是，事實並非如此！
當您使用百分比設定的邊距和填充時，該值將根據包含塊的**內聯大小**計算——因此在使用水平語言時為寬度。在我們的示例中，所有邊距和填充都是寬度的 10%。這意味著您可以在框的周圍設定大小相同的邊距和填充。如果您以這種方式使用百分比，這一點值得記住。
最小和最大尺寸
除了賦予事物固定大小外，我們還可以要求 CSS 為元素賦予最小或最大大小。如果您有一個可能包含可變數量內容的框，並且始終希望它至少具有特定高度，則可以在其上設定min-height屬性。該框將始終至少具有該高度，但如果內容超過框在最小高度下所能容納的空間，則會變高。
在下面的示例中，您可以看到兩個框，它們都定義了 150 畫素的min-height。左側的框是 150 畫素高；右側的框包含需要更多空間的內容，因此它比 150 畫素高。
這對處理可變數量的內容同時避免溢位非常有用。
max-width的常見用途是使影像在沒有足夠空間以其固有寬度顯示時縮小，同時確保它們不會大於該寬度。
例如，如果您在影像上設定了width: 100%，並且其固有寬度小於其容器，則影像將被強制拉伸並變大，導致它看起來畫素化。
如果您改用max-width: 100%，並且其固有寬度小於其容器，則影像不會被強制拉伸並變大，從而防止畫素化。
在下面的示例中，我們使用了相同的影像三次。第一個影像被賦予了width: 100%，並且在一個比它大的容器中，因此它會拉伸到容器寬度。第二個影像設定了max-width: 100%，因此不會拉伸以填充容器。第三個框再次包含相同的影像，也設定了max-width: 100%；在這種情況下，您可以看到它是如何縮小以適應框的。
此技術用於使影像**響應式**，以便在較小的裝置上檢視時，它們會相應地縮小。但是，您不應該使用此技術來載入非常大的影像，然後在瀏覽器中縮小它們。影像的大小應該適合它們在設計中顯示的最大尺寸。下載過大的影像會導致您的網站變慢，如果使用者使用的是計量連線，則會花費他們更多錢。
注意：瞭解有關響應式影像技術的更多資訊。
視窗單位
視窗——即您用來檢視網站的瀏覽器中網頁的可見區域——也具有大小。在 CSS 中，我們有與視窗大小相關的單位——vw 單位用於視窗寬度，vh 用於視窗高度。使用這些單位，您可以根據使用者的視窗大小調整某個東西的大小。
1vh 等於視窗高度的 1%，1vw 等於視窗寬度的 1%。您可以使用這些單位調整框的大小，也可以調整文字的大小。在下面的示例中，我們有一個大小為 20vh 和 20vw 的框。該框包含一個字母`A`，它被賦予了font-size為 10vh。
如果您更改vh 和vw 值，這將改變框或字型的尺寸；改變視窗大小也會改變它們的尺寸，因為它們是相對於視窗大小的。要檢視更改視窗大小時的示例變化，您需要在一個可以調整大小的新瀏覽器視窗中載入該示例（因為上面顯示的示例使用的嵌入式<iframe>是其視窗）。開啟示例，調整瀏覽器視窗大小，並觀察框和文字大小的變化。
根據視窗大小調整事物的大小在您的設計中可能很有用。例如，如果您希望在顯示其餘內容之前顯示一個全屏英雄部分，將該部分頁面設定為 100vh 高將把其餘內容推到視窗下方，這意味著它只有在滾動文件時才會出現。
測試您的技能！
您已經閱讀到本文的結尾，但是您能記住最重要的資訊嗎？您可以在繼續之前找到一些額外的測試來驗證您是否保留了這些資訊——請參閱測試您的技能：尺寸。
總結
本課程為您介紹了在 Web 上調整事物大小時可能會遇到的一些關鍵問題。當您進入CSS 佈局時，尺寸在掌握不同的佈局方法中變得非常重要，因此在繼續之前瞭解這些概念是值得的。
在下一篇文章中，我們將探討 CSS 如何處理影像、媒體和表單元素。