※ Layout佈局介紹：網頁畫面整體的框架
設計稿解構：
佈局：
- header：表頭
- main：主要內容
- footer：表尾
- row：列
- colum：行
元件：
欄位：
排版屬性：
※ Inline– Block範例：
1.建立layout_example專案：
2.建立多欄式結構：index.html
<!-- inline block -->
<!-- 標題 -->
<h2>inline-block</h2>
<!-- 多欄式 -->
<div class="row">
<div class="col"></div
><div class="col"></div
><div class="col"></div>
</div>
3.建立多欄式樣式：style.css
/* Global */
* {
box-sizing: border-box;
position: relative;
}/* inline-block */
.row {
border: 1px solid #000;
height: 500px;
}
.col {
/* 三欄式寫法 */
width: 33.333333%;
height: 400px;
border: 1px solid red;
display: inline-block;
}
成果顯示：
4.建立假元件結構：index.html
<div class="row">
<div class="col">
<div class="card"></div></div
><div class="col">
<div class="card"></div></div
><div class="col">
<div class="card"></div></div>
</div>
5.建立假元件樣式：style.css
/* inline-block */
.row {
border: 1px solid #000;
/* height: 500px;不需要了 */
background-color: #aacbff;
}
.col {
/* 三欄式寫法 */
width: 33.333333%;
/* height: 400px;不需要了 */
border: 1px solid #fff;
background-color: #2f66bc;
display: inline-block;
/* 強制向上對齊 */
vertical-align: top;
/* 建立中間間距 ，在左右兩邊推出一個距離*/
padding-left: 16px;
padding-right: 16px;
}
/* card */
.card{
height: 300px;
/* 寬度隨著layout去做改變 */
width: 100%;
background-color: pink;
}
成果顯示：
※ 畫面置中排版範例：
index.html：
<div class="container">
<!-- inline block -->
<!-- 標題 -->
<h2>inline-block</h2>
<!-- 多欄式 -->
<div class="row">
<div class="col">
<div class="card"></div></div
><div class="col">
<div class="card"></div></div
><div class="col">
<div class="card"></div></div>
</div>
style.css：
/* container 畫面置中排版*/成果顯示：
.container{
display: block;
margin: 0 auto;
width: 960px;
border: 1px solid #000;
}
※ Float：
※ Float範例：
index.html：
<h2>Float</h2>
<div class="float-row">
<div class="float-col">
<div class="card">1</div>
</div>
<div class="float-col">
<div class="card">2</div>
</div>
<div class="float-col">
<div class="card">3</div>
</div>
</div>
style.css：
/* float */
.float-row {
border: 2px solid blue;
}
.float-col {
border: 1px solid #fff;
background-color: #2f66bc;
/* 三欄式寫法 */
width: 33.333333%;
/* 建立中間間距 ，在左右兩邊推出一個距離*/
padding-left: 16px;
padding-right: 16px;
/* 向左浮動的邏輯 ，會脫離原本block的屬性*/
float: left;
}
成果顯示：
※ Float浮動問題範例：
index.html：
<!-- Float -->
<h2>Float</h2>
<div class="float-row">
<div class="float-col">
<div class="card">1</div>
</div>
<div class="float-col">
<div class="card">2</div>
</div>
<div class="float-col">
<div class="card">3</div>
</div>
</div>
<div class="footer"></div>
style.css：
.footer{
background-color: #333;
height: 100px;
}
成果顯示：
※ 解決Float浮動問題範例：
方法一：
index.html：
<!-- 清除浮動 -->
<div class="clearfix"></div>
style.css：
/* 清除浮動 */
.clearfix{
clear: both;
}
成果顯示：
方法二：使用偽元素
style.css：
/* 使用偽元素清除浮動 */
.float-row:after{
content: '';
display: block;
clear: both;
}
成果顯示：
※ Float和Inline– Block各自的問題有什麼？
Float：
- 脫離正常文流：浮動元素不再佔據原本的位置，可能導致父元素高度塌陷。
- 需要清除浮動：為了讓父元素包住浮動子元素，必須使用
clearfix。 - 元素重疊或排版錯亂。
- 不易垂直對齊。
inline-block：
- 空白間距問題：換行會在
inline-block元素之間產生間距4px。 - 垂直對齊困難。
差別成果顯示：
※ Flex：彈性排版
Flex 排版的核心概念：排版是建立在 父子層結構之上的。
- 父層（容器）要設定
display: flex或display: inline-flex。 - 子層（項目）才會受到 Flex 排版的影響。
index.html：
<!-- Flex -->
<h2>Flex</h2>
<div class="flex-row">
<div class="flex-col">
<div class="card">1</div>
</div>
<div class="flex-col">
<div class="card">2</div>
</div>
<div class="flex-col">
<div class="card">3</div>
</div>
<div class="flex-col">
<div class="card">4</div>
</div>
</div>
style.css：
/* flex */
.flex-row{
border: 2px solid orange;
background-color: #aacbff;
/* 彈性排版 */
display: flex;
/* 自適應排版，抓出區間 */
/* justify-content: space-between; */
/* 項目左右都留空，空間平均分配在項目周圍 */
/* justify-content: space-around; */
/* 所有項目靠主軸起點對齊（預設值） */
/* justify-content: flex-start; */
/* 所有項目靠主軸終點對齊 */
/* justify-content: flex-end; */
}
.flex-col{
border: 1px solid #fff;
background-color: #2f66bc;
/* 建立中間間距 ，在左右兩邊推出一個距離*/
padding-left: 16px;
padding-right: 16px;
/* 三欄式寫法 */
width: 200px
}
成果顯示：
※ Flex：填滿功能
index.html：
<!-- Flex -->
<h2>Flex</h2>
<div class="flex-row">
<div class="flex-col flex-col-1">
<div class="card">1</div>
</div>
<div class="flex-col flex-col-2">
<div class="card" >2</div>
</div>
<div class="flex-col flex-col-3">
<div class="card">3</div>
</div>
</div>
style.css：
.flex-col-1{
width: 200px
}
.flex-col-2{
/* 彈性排版比例 */
/* 用1:1的比例去做排列 */
flex: 1;
}
.flex-col-3{
flex: 1;
}
成果顯示：
※ Flex：解決瀏覽器適應的問題
- 使用「Can I use」工具確認支援度。
- 加入前綴詞（對舊版瀏覽器有幫助）。
- 使用
flex-wrap處理換行問題，某些瀏覽器預設不會自動換行，導致排版錯亂。
※ Flex使用手冊：
網址：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
