CSS佈局概念與技術教程

孤飞發表於2024-05-14

以下是一份CSS佈局學習大綱，它涵蓋了基本到高階的CSS佈局概念和技術

引言

歡迎來到CSS教程！如果你已經掌握了HTML的基礎知識，那麼你即將進入一個全新的世界，透過學習CSS（Cascading Style Sheets，層疊樣式表），你將能夠賦予網頁豐富的視覺效果和佈局。CSS是前端開發中不可或缺的一部分，它可以將你的HTML頁面變得更加美觀、整潔和使用者友好。

1.什麼是CSS？

CSS是用於描述HTML或XML（包括各種基於XML的語言，如SVG、MathML）的顯示樣式的語言。與HTML用於構建網頁的內容結構不同，CSS則負責定義內容的呈現方式。透過使用CSS，你可以控制網頁的顏色、字型、佈局、間距、尺寸、背景影像及其他視覺效果。

2.CSS的基本語法

在開始使用CSS之前，瞭解CSS的基本語法是非常重要的。CSS的規則由選擇器和宣告塊組成，選擇器用於指定要應用樣式的HTML元素，而宣告塊則包含一個或多個宣告，每個宣告由屬性和值組成。

示例：

selector {
  property: value;
}

例如，下面的CSS規則會將所有<p>元素的文字顏色設定為藍色，字型大小設定為16畫素：

p為 選擇器 大括號裡面為 宣告塊

p {
  color: blue;
  font-size: 16px;
}

3.常見的選擇器

選擇器是CSS的核心部分，它用於選擇需要應用樣式的HTML元素。以下是幾種常見的選擇器：

元素選擇器：直接選中HTML標籤，如p、div、h1等。例如：
```
p {
  color: red;
}
```
上述選擇器會將所有<p>元素的文字顏色設定為紅色。
類選擇器：透過類名選擇元素，使用.表示。例如：
```
.example {
  font-size: 20px;
}
```
上述選擇器會將所有具有example類的元素的字型大小設定為20畫素。
ID選擇器：透過ID選擇唯一元素，使用#表示。例如：
```
#header {
  background-color: yellow;
}
```
上述選擇器會將ID為header的元素背景顏色設定為黃色。

4.CSS佈局

學習CSS佈局是掌握網頁設計的關鍵部分。以下是幾種常見的佈局方式及其特點：

盒模型：這是CSS佈局的基礎概念，所有的HTML元素都可以看作一個矩形盒子，盒模型定義了元素內容、內邊距（padding）、邊框（border）和外邊距（margin）之間的關係。
浮動佈局：透過使用float屬性，可以讓元素向左或向右浮動，使其旁邊的元素環繞著它。浮動佈局常用於建立多列布局。
彈性盒子（Flexbox）：Flexbox是一種一維佈局模型，主要用於解決在不同螢幕尺寸上的對齊問題。它可以輕鬆地控制元素在容器中的排列和分佈。
網格佈局（Grid）：Grid是一種二維佈局模型，允許你建立複雜的佈局結構。透過定義行和列，Grid可以實現更加靈活和精確的佈局。
響應式設計：響應式設計是一種使網頁在不同裝置和螢幕尺寸上都有良好顯示效果的方法。使用媒體查詢（Media Queries）和靈活的佈局單元（如百分比和視口單位），可以建立適應各種裝置的網頁。

5.開始你的CSS學習之旅

透過本教程，你將逐步掌握CSS的基本概念、各種佈局技術以及實際應用。我們將從最基礎的CSS語法和選擇器開始，逐步介紹盒模型、浮動佈局、Flexbox、Grid佈局以及響應式設計，最終透過實踐專案幫助你鞏固所學知識。

無論你是初學者還是有一定基礎的開發者，本教程都將幫助你提升CSS技能，打造出更加精美和專業的網頁設計。讓我們開始這段CSS學習之旅吧！

一、CSS基礎

1.CSS概述

（1）什麼是CSS:

CSS（Cascading Style Shee

ts，層疊樣式表）是一種用來描述HTML或XML文件外觀和格式的樣式表語言。透過CSS，可以控制網頁的佈局、顏色、字型、背景等各種樣式，使網頁設計和內容分離，提高了開發效率和網頁的可維護性。

（2）CSS的語法和結構:

CSS規則由選擇器和宣告塊組成。選擇器用於指定要應用樣式的HTML元素，宣告塊包含一個或多個宣告，每個宣告由屬性和值組成。

示例:

selector {
  property: value;
}

例如：

p {
  color: blue;
  font-size: 16px;
}

上述CSS規則會將所有<p>元素的文字顏色設定為藍色，並且字型大小設定為16畫素。

2.選擇器

（1）基本選擇器：

元素選擇器：
- 選擇HTML文件中的所有指定元素。
- 示例：
```
p {
  color: red;
}
```
- 該選擇器會將所有<p>元素的文字顏色設定為紅色。
類選擇器：
- 選擇所有具有指定類屬性的元素。
- 使用.表示類選擇器。
- 示例：
```
.example {
  font-size: 20px;
}
```
- 該選擇器會將所有類名為example的元素字型大小設定為20畫素。
ID選擇器：
- 選擇具有指定ID屬性的唯一元素。
- 使用#表示ID選擇器。
- 示例：
```
#header {
  background-color: yellow;
}
```
- 該選擇器會將ID為header的元素背景顏色設定為黃色。

（2）組合選擇器：

後代選擇器：
- 選擇位於某元素後代（子孫）的所有指定元素。
- 示例：
```
div p {
  color: green;
}
```
- 該選擇器會將所有位於<div>元素內部的<p>元素文字顏色設定為綠色。
子代選擇器：
- 選擇位於某元素直接子代的指定元素。
- 使用>表示子代選擇器。
- 示例：
```
ul > li {
  list-style-type: none;
}
```
- 該選擇器會將所有<ul>元素的直接子代<li>元素的列表樣式設定為無。
相鄰兄弟選擇器：
- 選擇緊接在指定元素後的兄弟元素。
- 使用+表示相鄰兄弟選擇器。
- 示例：
```
h1 + p {
  margin-top: 0;
}
```
- 該選擇器會將緊接在<h1>元素後的第一個<p>元素的上外邊距設定為0。
通用兄弟選擇器：
- 選擇位於指定元素之後的所有兄弟元素。
- 使用~表示通用兄弟選擇器。
- 示例：
```
h1 ~ p {
  color: orange;
}
```
- 該選擇器會將位於<h1>元素之後的所有<p>元素的文字顏色設定為橙色。

（3）屬性選擇器：

選擇具有指定屬性的元素。

示例：

input[type="text"] {
  border: 1px solid #000;
}

該選擇器會將所有type屬性為text的<input>元素的邊框設定為1畫素實線黑色。

（4）偽類和偽元素選擇器：

偽類選擇器：
- 選擇某種狀態的元素。
- 常見偽類選擇器示例：
```
a:hover {
  color: red;
}
```
- 該選擇器會將滑鼠懸停在<a>元素上的文字顏色設定為紅色。
偽元素選擇器：
- 選擇文件中特定部分的元素。
- 常見偽元素選擇器示例：
```
p::first-line {
  font-weight: bold;
}
```
- 該選擇器會將所有<p>元素的首行文字設定為粗體。

這些基礎知識是學習CSS佈局的起點，理解並掌握這些內容將幫助你在後續學習中更好地運用CSS進行網頁設計。

二、盒模型

1. 盒模型概述

(1) 內容（Content）

內容是盒子內部實際顯示的內容部分，例如文字、圖片等。

(2) 內邊距（Padding）

內邊距是內容與邊框之間的空間。透過設定內邊距，可以控制內容與邊框之間的距離。
示例：
```
div {
  padding: 10px;
}
```
上述程式碼會在<div>元素內容周圍設定10畫素的內邊距。

(3) 邊框（Border）

邊框是包圍在內容和內邊距外的可見線條。可以設定邊框的寬度、樣式和顏色。
示例：
```
div {
  border: 2px solid black;
}
```
上述程式碼會在<div>元素周圍設定2畫素寬的黑色實線邊框。

(4) 外邊距（Margin）

外邊距是盒子與其他元素之間的距離。透過設定外邊距，可以控制盒子與其他元素之間的空間。
示例：
```
div {
  margin: 20px;
}
```
上述程式碼會在<div>元素周圍設定20畫素的外邊距。

2. 盒模型的應用

(1) 盒模型的寬度和高度計算

元素的總寬度和高度計算公式為：
- 總寬度 = 內容寬度 + 左右內邊距 + 左右邊框寬度 + 左右外邊距
- 總高度 = 內容高度 + 上下內邊距 + 上下邊框高度 + 上下外邊距

示例：

div {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}

上述程式碼中，<div>元素的總寬度 = 200px（內容寬度） + 20px（內邊距） + 10px（邊框寬度） + 40px（外邊距） = 270px。總高度 = 100px（內容高度） + 20px（內邊距） + 10px（邊框高度） + 40px（外邊距） = 170px。

(2) `box-sizing`屬性

box-sizing屬性用於控制盒模型的計算方式。常見的取值有content-box和border-box。
- content-box（預設值）：寬度和高度只包含內容區域，不包括內邊距和邊框。
- border-box：寬度和高度包含內容區域、內邊距和邊框。

示例：

div {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
}

上述程式碼中，<div>元素的總寬度為200px（內容、內邊距和邊框的總和），因為box-sizing屬性設定為border-box。

理解和掌握盒模型對於進行精確的佈局和控制元素間距非常重要。在後續的CSS佈局學習中，盒模型是一個非常基礎且關鍵的概念。

三、佈局方式

1. 塊級元素與行內元素

（1）區別和應用

塊級元素（Block Elements）
- 通常佔據其父容器的全部寬度，獨佔一行。
- 可以設定寬度、高度、內邊距、邊框和外邊距。
- 常見塊級元素有：<div>、<p>、<h1>、<ul>、<li>等。
行內元素（Inline Elements）
- 只佔據其內容的寬度，不會獨佔一行。
- 不能設定寬度和高度，但可以設定左右內邊距和外邊距。
- 常見行內元素有：<span>、<a>、<img>、<strong>、<em>等。

2. 浮動佈局

（1）浮動的概念

浮動（Float）用於將元素從文件的正常流中取出，使其向左或向右浮動，直到碰到包含框或其他浮動元素。

示例：

.float-left {
  float: left;
}
.float-right {
  float: right;
}

上述程式碼會使元素向左或向右浮動。

（2）清除浮動的方法

清除浮動（Clear）用於防止浮動元素影響後續元素的佈局。

常見方法：

在浮動元素後新增一個具有clear屬性的元素：

<div class="float-left">浮動元素</div>
<div class="clear-both"></div>

.clear-both {
  clear: both;
}

使用偽元素清除浮動：

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

（3）浮動佈局的應用

浮動佈局常用於建立多列布局、圖片環繞文字等。

示例：

<div class="column float-left">列1</div>
<div class="column float-left">列2</div>
<div class="clearfix"></div>

.column {
  width: 45%;
  margin: 2.5%;
}

3. 定位

（1）靜態定位（Static Positioning）

預設的定位方式，元素按照正常的文件流進行排列。
示例：
```
.static {
  position: static;
}
```

（2）相對定位（Relative Positioning）

元素相對於其正常位置進行偏移，仍佔據原有空間。

示例：

.relative {
  position: relative;
  top: 10px;
  left: 20px;
}

（3）絕對定位（Absolute Positioning）

元素相對於最近的已定位祖先元素進行偏移，不佔據原有空間。

示例：

.absolute {
  position: absolute;
  top: 50px;
  left: 100px;
}

（4）固定定位（Fixed Positioning）

元素相對於視口進行偏移，不隨頁面滾動而改變位置。

示例：

.fixed {
  position: fixed;
  top: 0;
  left: 0;
}

（5）粘性定位（Sticky Positioning）

元素在正常文件流中滾動，當到達指定位置時變為固定定位。

示例：

.sticky {
  position: sticky;
  top: 20px;
}

理解這些佈局方式可以幫助你更好地控制網頁元素的位置和排列方式，從而實現各種複雜的網頁佈局。

四、彈性盒子（Flexbox）

1. Flexbox概述

（1）Flex容器和Flex專案

Flex容器（Flex Container）
- 透過設定display: flex;或display: inline-flex;將一個元素定義為Flex容器。
- 示例：
```
.container {
  display: flex;
}
```
Flex專案（Flex Items）
- Flex容器內的直接子元素成為Flex專案。

2. Flex容器屬性

（1）`display: flex;`

定義一個Flex容器，使其內部的子元素成為Flex專案。
示例：
```
.container {
  display: flex;
}
```

（2）`flex-direction`

定義Flex專案在Flex容器中的排列方向。
取值：
- row（預設值）：從左到右排列。
- row-reverse：從右到左排列。
- column：從上到下排列。
- column-reverse：從下到上排列。
示例：
```
.container {
  flex-direction: row;
}
```

（3）`flex-wrap`

定義Flex專案是否換行。
取值：
- nowrap（預設值）：不換行。
- wrap：換行，第一行在上方。
- wrap-reverse：換行，第一行在下方。
示例：
```
.container {
  flex-wrap: wrap;
}
```

（4）`justify-content`

定義Flex專案在主軸（橫軸）方向上的對齊方式。
取值：
- flex-start（預設值）：從主軸起點對齊。
- flex-end：從主軸終點對齊。
- center：居中對齊。
- space-between：兩端對齊，專案之間間距相等。
- space-around：專案之間間距相等，專案兩側間距為專案間距的一半。

示例：

.container {
  justify-content: center;
}

（5）`align-items`

定義Flex專案在交叉軸（縱軸）方向上的對齊方式。
取值：
- flex-start：從交叉軸起點對齊。
- flex-end：從交叉軸終點對齊。
- center：居中對齊。
- baseline：專案的基線對齊。
- stretch（預設值）：如果專案未設定高度或設為auto，將佔滿容器高度。
示例：
```
.container {
  align-items: stretch;
}
```

（6）`align-content`

定義多根軸線的對齊方式。如果只有一根軸線，該屬性不起作用。
取值：
- flex-start：與交叉軸的起點對齊。
- flex-end：與交叉軸的終點對齊。
- center：與交叉軸的中點對齊。
- space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
- space-around：軸線之間的間隔平均分佈，軸線兩端間隔為間隔的一半。
- stretch（預設值）：軸線將佔滿整個交叉軸。

示例：

.container {
  align-content: space-between;
}

3. Flex專案屬性

（1）`order`

定義Flex專案的排列順序。數值越小，排列越靠前，預設值為0。
示例：
```
.item {
  order: 1;
}
```

（2）`flex-grow`

定義Flex專案的放大比例。預設值為0，即如果存在剩餘空間，也不放大。
示例：
```
.item {
  flex-grow: 1;
}
```

（3）`flex-shrink`

定義Flex專案的縮小比例。預設值為1，即如果空間不足，該專案將縮小。
示例：
```
.item {
  flex-shrink: 1;
}
```

（4）`flex-basis`

定義Flex專案的初始大小。預設值為auto。
示例：
```
.item {
  flex-basis: 100px;
}
```

（5）`align-self`

允許單個Flex專案有與其他專案不同的對齊方式，可覆蓋align-items屬性。預設值為auto。
取值與align-items相同：
- auto
- flex-start
- flex-end
- center
- baseline
- stretch
示例：
```
.item {
  align-self: center;
}
```

Flexbox佈局方式非常靈活，適用於建立各種複雜的網頁佈局。理解和掌握這些屬性，可以幫助你更好地設計和實現響應式佈局。

五、網格佈局（Grid）

1. Grid概述

（1）網格容器和網格專案

網格容器（Grid Container）
- 透過設定display: grid;或display: inline-grid;將一個元素定義為網格容器。
- 示例：
```
.container {
  display: grid;
}
```
網格專案（Grid Items）
- 網格容器內的直接子元素成為網格專案。

2. Grid容器屬性

（1）`display: grid;`

定義一個網格容器，使其內部的子元素成為網格專案。
示例：
```
.container {
  display: grid;
}
```

（2）`grid-template-columns`

定義網格容器的列結構。

示例：

.container {
  grid-template-columns: 100px 200px 100px;
}

（3）`grid-template-rows`

定義網格容器的行結構。

示例：

.container {
  grid-template-rows: 50px 150px;
}

（4）`grid-template-areas`

定義網格區域，用命名的區域簡化佈局。

示例：

.container {
  grid-template-areas:
    'header header header'
    'main main sidebar'
    'footer footer footer';
}
.header {
  grid-area: header;
}
.main {
  grid-area: main;
}
.sidebar {
  grid-area: sidebar;
}
.footer {
  grid-area: footer;
}

（5）`grid-column-gap` 和 `grid-row-gap`

定義網格專案之間的間距。

示例：

.container {
  grid-column-gap: 20px;
  grid-row-gap: 10px;
}

（6）`grid-auto-flow`

控制自動佈局演算法，定義自動放置網格專案的順序。
取值：
- row（預設值）：按行放置。
- column：按列放置。
- dense：儘量填滿空格。
示例：
```
.container {
  grid-auto-flow: row;
}
```

3. Grid專案屬性

（1）`grid-column`

定義網格專案在網格容器中的列起始和結束位置。
示例：
```
.item {
  grid-column: 1 / 3;
}
```

（2）`grid-row`

定義網格專案在網格容器中的行起始和結束位置。
示例：
```
.item {
  grid-row: 2 / 4;
}
```

（3）`grid-area`

定義網格專案的位置和跨越的區域，可以與grid-template-areas屬性配合使用。
示例：
```
.item {
  grid-area: header;
}
```

（4）`justify-self`

定義網格專案在單元格內的水平對齊方式。
取值：
- start：對齊單元格的起始邊緣。
- end：對齊單元格的結束邊緣。
- center：居中對齊。
- stretch（預設值）：拉伸佔滿單元格寬度。
示例：
```
.item {
  justify-self: center;
}
```

（5）`align-self`

定義網格專案在單元格內的垂直對齊方式。
取值：
- start：對齊單元格的起始邊緣。
- end：對齊單元格的結束邊緣。
- center：居中對齊。
- stretch（預設值）：拉伸佔滿單元格高度。
示例：
```
.item {
  align-self: end;
}
```

（6）`place-self`

簡寫屬性，結合了justify-self和align-self。
示例：
```
.item {
  place-self: center end;
}
```

理解和掌握網格佈局，可以幫助你實現更復雜和精確的網頁佈局。網格佈局提供了一種強大且靈活的方式來建立二維的佈局結構。

六、響應式設計

1. 媒體查詢

（1）媒體查詢的語法

媒體查詢（Media Queries）用於針對不同的裝置和螢幕尺寸應用不同的CSS樣式。

基本語法：

@media (媒體特性) {
  /* CSS規則 */
}

常見媒體特性：
- max-width：最大寬度
- min-width：最小寬度
- max-height：最大高度
- min-height：最小高度

示例：

@media (max-width: 600px) {
  .container {
    background-color: lightblue;
  }
}

（2）使用媒體查詢進行響應式佈局

響應式佈局（Responsive Layout）是指根據不同裝置的螢幕尺寸調整佈局和樣式，以提供良好的使用者體驗。

示例：

.container {
  width: 100%;
  padding: 20px;
}

@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}

@media (max-width: 480px) {
  .container {
    width: 100%;
    padding: 5px;
  }
}

2. 彈性佈局

（1）使用百分比和視口單位

使用百分比設定元素的寬度和高度，使其相對於父容器進行調整。

示例：

.container {
  width: 50%;
  height: 50%;
}

使用視口單位（Viewport Units）設定元素的尺寸，使其相對於視口進行調整。
- vw：視口寬度的百分比
- vh：視口高度的百分比
- vmin：視口寬度和高度中較小值的百分比
- vmax：視口寬度和高度中較大值的百分比

示例：

.container {
  width: 50vw;
  height: 50vh;
}

（2）靈活圖片和媒體

使用百分比或視口單位設定圖片和媒體的尺寸，使其在不同裝置上自適應。

示例：

img {
  max-width: 100%;
  height: auto;
}

該規則會確保圖片在容器寬度變小的時候自動縮放，並保持其寬高比。
使用object-fit屬性可以更好地控制圖片和媒體的顯示方式：
- cover：保持寬高比縮放圖片，覆蓋整個容器。
- contain：保持寬高比縮放圖片，使其完全適應容器。

示例：

.image-container {
  width: 100%;
  height: 300px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

掌握響應式設計的技巧，可以使你建立的網頁在各種裝置上都有良好的顯示效果和使用者體驗。

七、 CSS框架

1. CSS框架概述

（1）常見的CSS框架（Bootstrap、Foundation等）

Bootstrap
- 由Twitter開發，提供了一系列預定義的CSS和JavaScript元件。
- 特點：響應式設計、易用的柵格系統、豐富的元件庫。
- 官方網站：Bootstrap
Foundation
- 由ZURB開發，強調響應式設計和移動優先。
- 特點：靈活的佈局系統、豐富的UI元件、相容性強。
- 官方網站：Foundation
其他常見框架：
- Bulma
- Tailwind CSS
- Semantic UI

2. 使用CSS框架進行佈局

（1）框架的柵格系統

柵格系統（Grid System）是CSS框架中用於建立響應式佈局的核心元件，透過將頁面劃分為列和行，簡化佈局設計。
Bootstrap的柵格系統
- 基本結構：
```
<div class="container">
  <div class="row">
    <div class="col-md-4">列1</div>
    <div class="col-md-4">列2</div>
    <div class="col-md-4">列3</div>
  </div>
</div>
```
- 關鍵類名：
  - .container：定義一個固定寬度的容器。
  - .row：定義一行。
  - .col-：定義列，後接尺寸字首（如-md-）和列數（如-4）。
- 響應式列類名：
  - .col-xs-：超小螢幕（<576px）
  - .col-sm-：小螢幕（≥576px）
  - .col-md-：中等螢幕（≥768px）
  - .col-lg-：大螢幕（≥992px）
  - .col-xl-：超大螢幕（≥1200px）
Foundation的柵格系統
- 基本結構：
```
<div class="grid-container">
  <div class="grid-x grid-padding-x">
    <div class="cell small-4">列1</div>
    <div class="cell small-4">列2</div>
    <div class="cell small-4">列3</div>
  </div>
</div>
```
- 關鍵類名：
  - .grid-container：定義一個固定寬度的容器。
  - .grid-x：定義一行。
  - .cell：定義列，後接尺寸字首（如-small-）和列數（如-4）。

（2）自定義框架樣式

大多數CSS框架允許你自定義預設樣式，以便根據專案需求進行調整。
Bootstrap自定義
- 使用Sass變數自定義Bootstrap樣式：
```
$primary-color: #ff5733;
@import "bootstrap";
```
- 線上定製工具：Bootstrap Customize
Foundation自定義
- 使用Sass變數自定義Foundation樣式：
```
$primary-color: #ff5733;
@import "foundation";
```
- 線上定製工具：Foundation Customize

使用CSS框架可以大大提高開發效率，減少重複勞動，同時確保設計的一致性。

八、高階佈局技術

1. CSS Grid與Flexbox結合

（1）何時使用Grid，何時使用Flexbox

Grid佈局

適用於建立二維佈局（同時處理行和列）。
適用於需要精確控制整體佈局結構的場景。
示例：網頁主結構佈局、複雜的表格佈局。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;
}
.header {
  grid-column: 1 / 4;
}
.main {
  grid-column: 2 / 3;
}
.sidebar {
  grid-column: 1 / 2;
}
.footer {
  grid-column: 1 / 4;
}

Flexbox佈局
- 適用於建立一維佈局（處理行或列）。
- 適用於需要對元素進行動態分佈和對齊的場景。
- 示例：導航欄、工具欄、單行或單列的內容對齊。
```
.container {
  display: flex;
  justify-content: space-between;
}
.item {
  flex: 1;
}
```
結合使用
- 可以在專案中同時使用Grid和Flexbox，分別用於不同部分的佈局。
- 示例：使用Grid佈局網頁主結構，使用Flexbox佈局導航欄。
```
.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto;
}
.nav {
  display: flex;
  justify-content: space-between;
}
```

2. CSS變數和前處理器

（1）使用CSS變數

CSS變數（Custom Properties）允許你在CSS中定義變數，並在多個地方重複使用這些變數。

定義變數：

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
}

使用變數：

body {
  color: var(--primary-color);
  font-size: var(--font-size);
}
.button {
  background-color: var(--secondary-color);
}

（2）常見的CSS前處理器（Sass、LESS）

Sass
- Sass（Syntactically Awesome Stylesheets）是一種CSS前處理器，提供了變數、巢狀、混合宏和函式等功能，增強了CSS的可維護性和靈活性。
- 基本語法：
```
$primary-color: #3498db;
$secondary-color: #2ecc71;

body {
  color: $primary-color;
  font-size: 16px;
}

.button {
  background-color: $secondary-color;
  @include border-radius(5px);
}

@mixin border-radius($radius) {
  border-radius: $radius;
}
```
- 使用工具：可以透過安裝node-sass或使用GUI工具（如Koala）進行編譯。

LESS

LESS（Leaner Style Sheets）是一種CSS前處理器，提供了變數、巢狀、混合宏和函式等功能，簡化了CSS編寫。

基本語法：

@primary-color: #3498db;
@secondary-color: #2ecc71;

body {
  color: @primary-color;
  font-size: 16px;
}

.button {
  background-color: @secondary-color;
  .border-radius(5px);
}

.border-radius(@radius) {
  border-radius: @radius;
}

使用工具：可以透過安裝less或使用GUI工具進行編譯。

掌握這些高階佈局技術和工具，可以大大提高你在實際專案中的開發效率和程式碼維護性。

九、實踐專案

1. 基本網頁佈局

（1）建立一個簡單的頁面佈局

目標：建立一個包含頭部、內容區和底部的基本網頁佈局。

步驟：

建立HTML結構：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本網頁佈局</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>頭部</header>
<main>內容區</main>
<footer>底部</footer>
</body>
</html>

新增CSS樣式：

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

header, footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1em;
}

main {
  flex: 1;
  padding: 1em;
}

2. 複雜網頁佈局

（1）建立一個多列布局的複雜頁面

目標：使用CSS Grid和Flexbox建立一個包含頭部、側邊欄、主內容區和底部的複雜佈局。

步驟：

建立HTML結構：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>複雜網頁佈局</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
  <header>頭部</header>
  <aside>側邊欄</aside>
  <main>主內容區</main>
  <footer>底部</footer>
</div>
</body>
</html>

新增CSS樣式：

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 200px 1fr;
  min-height: 100vh;
}

header {
  grid-area: header;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1em;
}

aside {
  grid-area: sidebar;
  background-color: #f4f4f4;
  padding: 1em;
}

main {
  grid-area: main;
  padding: 1em;
}

footer {
  grid-area: footer;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1em;
}

3. 響應式網頁

（1）建立一個響應式頁面，適應不同裝置尺寸

目標：使用媒體查詢和靈活佈局建立一個響應式頁面，使其適應不同的裝置尺寸。

步驟：

建立HTML結構：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>響應式網頁</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>頭部</header>
<main>內容區</main>
<footer>底部</footer>
</body>
</html>

新增CSS樣式：

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

header, footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1em;
}

main {
  flex: 1;
  padding: 1em;
}

@media (max-width: 768px) {
  header, footer {
    padding: 0.5em;
  }

  main {
    padding: 0.5em;
  }
}

@media (max-width: 480px) {
  header, footer {
    padding: 0.25em;
  }

  main {
    padding: 0.25em;
  }
}

透過這些實踐專案，你可以逐步掌握從基礎到複雜的網頁佈局設計，並學會如何建立適應不同裝置的響應式網頁。

CSS佈局概念與技術教程

引言

1.什麼是CSS？

2.CSS的基本語法

3.常見的選擇器

4.CSS佈局

5.開始你的CSS學習之旅

一、CSS基礎

1.CSS概述

（1）什麼是CSS:

（2）CSS的語法和結構:

2.選擇器

（1）基本選擇器：

（2）組合選擇器：

（3）屬性選擇器：

（4）偽類和偽元素選擇器：

二、 盒模型

1. 盒模型概述

(1) 內容（Content）

(2) 內邊距（Padding）

(3) 邊框（Border）

(4) 外邊距（Margin）

2. 盒模型的應用

(1) 盒模型的寬度和高度計算

(2) box-sizing屬性

三、 佈局方式

1. 塊級元素與行內元素

（1）區別和應用

2. 浮動佈局

（1）浮動的概念

（2）清除浮動的方法

（3）浮動佈局的應用

3. 定位

（1）靜態定位（Static Positioning）

（2）相對定位（Relative Positioning）

（3）絕對定位（Absolute Positioning）

（4）固定定位（Fixed Positioning）

（5）粘性定位（Sticky Positioning）

四、 彈性盒子（Flexbox）

1. Flexbox概述

（1）Flex容器和Flex專案

2. Flex容器屬性

（1）display: flex;

（2）flex-direction

（3）flex-wrap

（4）justify-content

（5）align-items

（6）align-content

3. Flex專案屬性

（1）order

（2）flex-grow

（3）flex-shrink

（4）flex-basis

（5）align-self

五、 網格佈局（Grid）

1. Grid概述

（1）網格容器和網格專案

2. Grid容器屬性

（1）display: grid;

（2）grid-template-columns

（3）grid-template-rows

（4）grid-template-areas

（5）grid-column-gap 和 grid-row-gap

（6）grid-auto-flow

3. Grid專案屬性

（1）grid-column

（2）grid-row

（3）grid-area

（4）justify-self

（5）align-self

（6）place-self

六、 響應式設計

1. 媒體查詢

（1）媒體查詢的語法

（2）使用媒體查詢進行響應式佈局

2. 彈性佈局

（1）使用百分比和視口單位

（2）靈活圖片和媒體

七、 CSS框架

1. CSS框架概述

二、盒模型

(2) `box-sizing`屬性

三、佈局方式

四、彈性盒子（Flexbox）

（1）`display: flex;`

（2）`flex-direction`

（3）`flex-wrap`

（4）`justify-content`

（5）`align-items`

（6）`align-content`

（1）`order`

（2）`flex-grow`

（3）`flex-shrink`

（4）`flex-basis`

（5）`align-self`

五、網格佈局（Grid）

（1）`display: grid;`

（2）`grid-template-columns`

（3）`grid-template-rows`

（4）`grid-template-areas`

（5）`grid-column-gap` 和 `grid-row-gap`

（6）`grid-auto-flow`

（1）`grid-column`

（2）`grid-row`

（3）`grid-area`

（4）`justify-self`

（5）`align-self`

（6）`place-self`

六、響應式設計

八、高階佈局技術

九、實踐專案