CSS 中的尺寸調整元素

事物的自然尺寸或固有尺寸

HTML 元素具有自然尺寸，在受到任何 CSS 影響之前就已設定。一個簡單的例子是圖片。圖片檔案包含尺寸資訊，被稱為其固有尺寸。這個尺寸由圖片本身決定，而不是由我們碰巧應用的任何格式決定。

如果您將圖片放在頁面上，並且不透過使用 <img> 屬性或 CSS 改變其高度或寬度，它將使用其固有尺寸顯示。我們在下面的示例中給圖片添加了邊框，以便您可以看到其檔案中定義的尺寸範圍。

<img
  alt="star"
  src="https://mdn.github.io/shared-assets/images/examples/big-star.png" />

img {
  border: 5px solid darkblue;
}

另一方面，一個空的 <div> 沒有自己的尺寸。如果您在 HTML 中新增一個沒有內容的 <div>，然後像我們處理圖片一樣給它新增一個邊框，您會在頁面上看到一條線。這是 <div> 的摺疊邊框——它沒有內容來支撐。

在我們的下面的示例中，該邊框覆蓋了容器的整個寬度，因為它是一個塊級元素，這種行為對您來說應該開始變得熟悉。它沒有高度（或塊維度的尺寸），因為它沒有內容。

<div class="box"></div>

.box {
  border: 5px solid darkblue;
}

在上面的示例中，嘗試在空元素內新增一些文字。您會看到邊框展開，因為元素的高度由內容定義。同樣，這是元素的固有尺寸——它的尺寸由其內容定義。

設定特定尺寸

當然，我們可以給設計中的元素一個特定尺寸。當給定一個元素的尺寸時（其內容需要適應該尺寸），我們稱之為外在尺寸。

在下一個示例中，我們給兩個 <div> 設定了特定的 width 和 height 值，無論其中放置什麼內容，它們都將具有該尺寸。正如右側的 <div> 所示，如果內容量超過其包含元素的容量，設定固定高度可能會導致內容溢位（您將在後續課程中瞭解更多關於 溢位 的內容）。

<div class="wrapper">
  <div class="box"></div>
  <div class="box">
    These boxes both have a height set, this box has content in it which will
    need more space than the assigned height, and so we get overflow.
  </div>
</div>

body {
  font: 1.2em sans-serif;
}
.wrapper {
  display: flex;
}

.wrapper > * {
  margin: 20px;
}

.box {
  border: 5px solid darkblue;
  height: 100px;
  width: 200px;
}

由於溢位問題，我們必須非常小心地在網頁上用長度或百分比來固定元素的高度。

使用百分比

在許多方面，百分比的作用類似於長度單位，正如我們在關於值和單位的課程中討論的，它們通常可以與長度互換使用。使用百分比時，您需要清楚它所佔的百分比是什麼。在一個容器內的盒子的情況下，如果您給子盒子一個百分比寬度，它將是父容器寬度的百分比。

<div class="container">
  <div class="box">I have a percentage width.</div>
</div>

body {
  font: 1.2em sans-serif;
}

.box {
  border: 5px solid darkblue;
  width: 50%;
}

這是因為百分比是相對於包含塊的尺寸來解析的。如果未應用百分比，我們的 box <div> 會佔據 100% 的可用空間，因為它是一個塊級元素。如果我們給它一個百分比寬度，這就會成為它通常會填充的空間的百分比。

嘗試編輯上面的示例

1. 移除 box <div> 的 width 宣告，以驗證它預設佔用 100% 的可用 width。
2. 恢復之前的更改 — 再次將 box <div> 的 width 設定為 50%。
3. 現在將 container <div> 的 width 設定為 50%。您會看到 box <div> 的 width 變小了，因為它相對於其容器的 width。

百分比外邊距和內邊距

如果您將 margins 和 padding 設定為百分比，您可能會注意到一些奇怪的行為。

在下面的示例中，我們有一個盒子，我們為其設定了 10% 的 margin 和 10% 的 padding。盒子頂部和底部的內邊距和外邊距與左右兩側的內邊距和外邊距大小相同。

<div class="box">I have margin and padding set to 10% on all sides.</div>

body {
  font: 1.2em sans-serif;
}
.box {
  border: 5px solid darkblue;
  width: 200px;
  margin: 10%;
  padding: 10%;
}

您可能會認為百分比的頂部和底部外邊距是元素高度的百分比，而百分比的左側和右側外邊距是元素寬度的百分比。然而，情況並非如此！

當您使用百分比設定外邊距和內邊距時，其值是根據包含塊的行內尺寸計算的——因此在水平語言中是寬度。在我們的示例中，所有的外邊距和內邊距都是寬度的 10%。這意味著您可以讓盒子四周具有相等尺寸的外邊距和內邊距。如果您以這種方式使用百分比，這是一個值得記住的事實。

最小和最大尺寸

除了賦予事物固定尺寸之外，我們還可以要求 CSS 賦予元素最小或最大尺寸。如果您有一個可能包含可變數量內容的盒子，並且您總是希望它至少達到某個高度，您可以在其上設定 min-height 屬性。該盒子將始終至少有這個高度，但如果內容超出其最小高度所能容納的空間，它將變得更高。

在下一個示例中，您可以看到兩個盒子，它們都定義了 100 畫素的 min-height。左側的盒子高 100 畫素；右側的盒子內容需要更多空間，因此它變得比 100 畫素更高。

<div class="wrapper">
  <div class="box"></div>
  <div class="box">
    These boxes both have a min-height set, this box has content in it which
    will need more space than the assigned height, and so it grows from the
    minimum.
  </div>
</div>

body {
  font: 1.2em sans-serif;
}
.wrapper {
  display: flex;
  align-items: flex-start;
}

.wrapper > * {
  margin: 20px;
}

.box {
  border: 5px solid darkblue;
  min-height: 100px;
  width: 200px;
}

這對於處理可變內容量時避免溢位非常有用。

圖片上的 max-width

max-width 的一個常見用途是，如果空間不足以以其固有寬度顯示圖片，則讓圖片縮小，同時確保它們不會變得大於該寬度。

例如，如果您在一張圖片上設定 width: 100%，並且其固有寬度小於其容器，圖片將被迫拉伸並變大，導致看起來畫素化。

如果您改用 max-width: 100%，並且其固有寬度小於其容器，圖片將不會被強制拉伸變大，從而防止畫素化。

在下面的示例中，我們嵌入了同一張圖片三次

• 第一張圖片設定了 width: 100%，並且在一個比它大的容器中，因此它會拉伸以適應容器的寬度。
• 第二張圖片設定了 max-width: 100%，因此它不會拉伸以填滿容器。
• 第三個盒子再次包含相同的圖片，也設定了 max-width: 100%；在這種情況下，您可以看到它是如何縮小以適應盒子。

<div class="wrapper">
  <div class="box">
    <img
      alt="star"
      class="width"
      src="https://mdn.github.io/shared-assets/images/examples/big-star.png" />
  </div>
  <div class="box">
    <img
      alt="star"
      class="max"
      src="https://mdn.github.io/shared-assets/images/examples/big-star.png" />
  </div>
  <div class="mini-box">
    <img
      alt="star"
      class="max"
      src="https://mdn.github.io/shared-assets/images/examples/big-star.png" />
  </div>
</div>

.wrapper {
  display: flex;
  align-items: flex-start;
}

.wrapper > * {
  margin: 20px;
}

.box,
.mini-box {
  border: 5px solid darkblue;
}

.box {
  width: 200px;
}
.mini-box {
  width: 30px;
}
.width {
  width: 100%;
}
.max {
  max-width: 100%;
}

這種技術用於使影像具有響應性，以便在較小的裝置上觀看時，它們能夠適當縮小。然而，您不應該使用這種技術來載入真正大的影像，然後在瀏覽器中縮小它們。影像應適當調整大小，使其不超過設計中顯示的最大尺寸。下載過大的影像會導致您的網站變慢，如果使用者按兆位元組付費資料，這可能會讓他們花費更多錢。

視口單位

視口——您用於檢視網站的瀏覽器中頁面的可見區域——也有一個尺寸。在 CSS 中，我們有與視口尺寸相關的單位——vw 單位表示視口寬度，vh 表示視口高度。使用這些單位，您可以根據使用者的視口尺寸來調整大小。

1vh 等於視口高度的 1%，1vw 等於視口寬度的 1%。您可以使用這些單位來調整盒子的大小，也可以調整文字的大小。在下面的示例中，我們有一個大小為 20vh 和 20vw 的盒子。盒子中包含一個字母 A，其 font-size 設定為 10vh。

<div class="box">A</div>

body {
  font-family: sans-serif;
}

.box {
  border: 5px solid darkblue;
  width: 20vw;
  height: 20vh;
  font-size: 10vh;
}

如果您更改 vh 和 vw 值，這將改變盒子和字型的大小；更改視口大小也會改變它們的大小，因為它們是相對於視口調整大小的。要檢視當您更改視口大小時示例的變化，您需要在一個可以調整大小的新瀏覽器視窗中載入示例（因為包含上面所示示例的嵌入式 <iframe> 就是它的視口）。開啟示例，調整瀏覽器視窗大小，並觀察盒子和文字大小的變化。

根據視口調整元素大小在您的設計中可能很有用。例如，如果您希望在內容的其餘部分之前顯示一個全屏英雄部分，將頁面的該部分設定為 100vh 高度將把內容的其餘部分推到視口下方，這意味著只有在文件滾動後才會出現。

總結

本課程向您概述了在網頁上調整元素尺寸時可能遇到的一些關鍵問題。當您進入 CSS 佈局 時，尺寸調整在掌握不同的佈局方法中將變得非常重要，因此在繼續之前值得理解這裡的概念。

在下一篇文章中，我們將為您提供一些測試，您可以使用它們來檢查您對我們提供的 CSS 尺寸調整資訊的理解和記憶程度。

• 上一頁
• 概述：CSS 樣式基礎
• 下一頁