盒子模型

當瀏覽器渲染 HTML 檔案時，它會將每個塊元素放在一個框中，這使我們可以更改框的大小、邊框以及框內（和框外）的間距。這被稱為盒子模型.

每個框都有以下可以設定的屬性：內容區域的尺寸（高度和寬度）、填充、邊框和邊距.

佈局決定頁面上元素/框的相對位置。預設佈局（文件/普通流）只是堆疊塊元素並使用“流佈局”來定位父元素中的子元素。這是確定元素位置的預設方式。

有三種方法可以更改元素的預設位置：對齊、浮動和定位。要將元素重新定位到所需的位置，我們應該首先嚐試使用對齊，因為它是最簡單的方法，最後嘗試使用定位，因為它最具侵入性。

尺寸

要水平對齊塊元素中的內容，我們可以為塊元素設定text-align屬性。可以透過為內聯元素設定vertical-align屬性來更改內聯元素在其包含元素中的垂直對齊方式。內聯元素應垂直對齊，相對於同一包含元素中同一行上的其他內容。

塊元素可以透過設定其寬度屬性並在頁面上居中，並將它們的左右邊距設定為“auto”。透過使一個具有設定寬度的塊浮動，可以將其推到左側或右側。

CSS 定位屬性允許我們使用相對於參考點的偏移量來設定元素，這將四種定位方法區分開來。

偏移量可以是 left、right、top 和 bottom。

您可以使用float屬性將元素從普通佈局（流）中取出，並將其推到左側或右側。元素的垂直位置與其在普通佈局中的垂直位置相同。如果浮動元素位於某些文字上方，瀏覽器會將文字環繞在浮動元素周圍。浮動元素通常會設定其寬度屬性，因為否則它將佔據可用的水平空間，而不會出現浮動。

浮動子元素保留在其父元素內，即封閉關係，這是物理性的，不會改變。浮動子元素可能會超出其父元素框，因為它沒有考慮浮動子元素。overflow屬性決定了當內容超出元素框時會發生什麼。clear屬性，當設定在元素上時，會將元素向下推，以避免（“保持清除”）左側或右側的浮動元素。

要建立多列布局，我們可以使用浮動和清除元素。

這裡有一個示例.

如果可能，透過對齊元素的內容來佈局元素
- 水平對齊：text-align（使用此屬性對齊塊元素的內容）
- 垂直對齊：vertical-align（使用此屬性在其包含元素中對齊內聯元素）
如果對齊不起作用，請嘗試浮動元素
如果浮動不起作用，請嘗試定位元素
- 絕對/固定定位是最後的手段，不應過度使用