CSS 佈局簡介

常規佈局流

如果您沒有應用任何 CSS 來改變元素的行為方式，網頁上的元素會按照常規流進行佈局。您可以透過調整元素在常規流中的位置或完全將它們從常規流中移除來改變它們的行為方式。從一個結構良好、在常規流中可讀的穩固文件開始是建立任何網頁的最佳方式。它確保即使使用者使用非常有限的瀏覽器或螢幕閱讀器等裝置來閱讀頁面內容，您的內容仍然可讀。此外，由於常規流旨在建立可讀文件，因此透過這種方式開始，您在進行佈局更改時是與文件協同工作，而不是對抗它。

在深入研究不同的佈局方法之前，值得回顧一下您在之前的模組中關於常規文件流所學到的一些內容。

元素預設是如何佈局的？

該過程首先將各個元素的盒子進行佈局，使得它們可能擁有的任何內邊距、邊框或外邊距都新增到其內容中。這就是我們所說的盒模型。

預設情況下，塊級元素的內容會填充其父元素中可用的行內空間，並沿塊維度增長以適應其內容。行內元素的大小就是其內容的大小。您可以為某些預設 display 屬性值為 inline 的元素（例如 <img>）設定 width 或 height，但 display 值仍將保持 inline。

如果您想以這種方式控制行內元素的 display 屬性，請使用 CSS 將其設定為塊級元素的行為（例如，使用 display: block; 或 display: inline-block;，它結合了兩者的特性）。

這解釋了元素是如何獨立構造的，但是當它們相互作用時，它們是如何構造的呢？常規佈局流（在佈局介紹文章中提到）是元素在瀏覽器視口內放置的系統。預設情況下，塊級元素按照塊流方向佈局，該方向基於父元素的書寫模式（初始：horizontal-tb）。每個元素都會出現在前一個元素下方的新行上，每個元素之間由指定的外邊距隔開。例如，在英語中（或任何其他水平、從上到下的書寫模式），塊級元素是垂直佈局的。

行內元素的行為方式不同。它們不會出現在新行上；相反，只要父塊級元素的寬度內有足夠的空間，它們就會與任何相鄰（或換行）的文字內容一起位於同一行。如果沒有足夠的空間，那麼溢位的內容將移動到新行。

如果兩個垂直相鄰的元素都設定了外邊距並且它們的外邊距相接觸，則較大的外邊距保留，較小的外邊距消失。這被稱為外邊距摺疊。摺疊外邊距僅在垂直方向上相關。

常規流示例

讓我們看一個簡單的例子來解釋所有這些

<h1>Basic document flow</h1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
</p>

<p>
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
</p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the size of one of our margins, not both.
</p>

<p>
  Inline elements <span>like this one</span> and <span>this one</span> sit on
  the same line along with adjacent text nodes, if there is space on the same
  line. Overflowing inline elements will
  <span>wrap onto a new line if possible (like this one containing text)</span>,
  or just go on to a new line if not, much like this image will do:
  <img
    src="https://mdn.github.io/shared-assets/images/examples/long.jpg"
    alt="snippet of cloth" />
</p>

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: rgb(255 84 104 / 30%);
  border: 2px solid rgb(255 84 104);
  padding: 10px;
  margin: 10px;
}

span {
  background: white;
  border: 1px solid black;
}

請注意 HTML 如何以其在原始碼中出現的精確順序顯示，塊級元素彼此堆疊。

對於頁面上的許多元素，常規流將建立您需要的精確佈局。但是，對於更復雜的佈局，您需要使用 CSS 中可用的一些工具來更改此預設行為。從一個結構良好的 HTML 文件開始非常重要，因為這樣您就可以與事物預設的佈局方式協同工作，而不是與它作鬥爭。

覆蓋常規流

可以覆蓋常規流並更改元素在 CSS 中佈局方式的方法，我們將在本模組中詳細介紹，它們是

display 屬性

標準值（如 block、inline 或 inline-block）可以改變元素在常規流中的行為方式，例如，使塊級元素像行內元素一樣行為（我們在盒模型課程中已經介紹過這些）。

浮動

應用 float 值（例如 left）可以使塊級元素圍繞元素的某一邊緣浮動，就像影像在雜誌佈局中有文字圍繞它們一樣。

定位

position 屬性允許您精確控制盒子在其他盒子內部的放置。static 定位是常規流中的預設值，但您可以使用其他值使元素以不同方式佈局，例如，使用 position: fixed 將它們固定在瀏覽器視口的頂部。

透過 display 訪問的特定佈局系統

我們還有透過特定 display 值啟用的整個佈局方法。您需要了解的最重要的是 CSS 網格 和 Flexbox，它們都改變了子元素在其父元素內部的佈局方式。

響應式設計

響應式設計指的是建立適應網頁渲染的不同裝置（例如，桌上型電腦和行動電話）的佈局。響應式設計本身不提供任何特定的佈局工具；其最重要的組成部分是 @media at-rule，它允許您根據螢幕寬度或解析度等裝置屬性應用不同的佈局。

其他佈局技術

還有其他不太常用的佈局技術，我們不會在本模組中介紹

表格佈局

旨在為 HTML 表格的某些部分設定樣式的特性可以使用 display: table 和相關屬性應用於非表格元素。

多列布局

多列布局屬性可以使塊的內容以列的形式佈局，就像您在報紙中看到的那樣。

總結

本文簡要總結了您在學習的這個階段應該瞭解的所有佈局技術！請繼續閱讀以獲取每種技術的更多資訊。接下來，我們將瞭解浮動。

• 概覽：CSS 佈局
• 下一頁