本文目錄導讀：

1. 基本布局示例
2. 更復雜的布局示例

CSS入門布局示例怎么做

CSS（級聯樣式表）是用于描述HTML元素在網頁上的顯示樣式的語言，在CSS中，布局是一個重要的方面，它涉及到如何定位和對齊元素，對于初學者，理解CSS布局的基本原理和常見方法是非常重要的。

基本布局示例

下面是一個簡單的CSS布局示例，其中包含一個頭部、一個主體和一個底部，這個示例將幫助你理解如何創(chuàng)建基本的網頁布局。

HTML結構：

<div id="header">頭部</div>
<div id="main">主體</div>
<div id="footer">底部</div>

CSS樣式：

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}
#header {
  height: 100px;
  background-color: #f00;
}
#main {
  flex-grow: 1;
  background-color: #0f0;
}
#footer {
  height: 50px;
  background-color: #00f;
}

在這個示例中，我們使用display: flex將body元素設置為彈性布局，這樣可以讓其子元素在垂直方向上排列。#header和#footer元素的高度是固定的，而#main元素則會自動填充剩余的空間，這個示例可以幫助你理解如何使用CSS來創(chuàng)建基本的網頁布局。

更復雜的布局示例

如果你需要更復雜的布局，例如包含多個列的布局，你可以使用CSS的列布局（Column Layout）來實現，下面是一個包含兩個列的布局示例：

HTML結構：

<div id="container">
  <div id="column1">列1</div>
  <div id="column2">列2</div>
</div>

CSS樣式：

#container {
  display: flex;
  justify-content: space-between;
}
#column1 {
  width: 50%;
  background-color: #f00;
}
#column2 {
  width: 50%;
  background-color: #0f0;
}

在這個示例中，我們使用justify-content: space-between來確保兩個列之間有足夠的空間，每個列的寬度設置為50%，這樣它們就可以平均分配空間了，這個示例可以幫助你理解如何使用CSS來創(chuàng)建更復雜的網頁布局。