# 區塊版面配置
### 主講人：黃夙賢
---
## CSS版面配置
- \<div>與\<span>
- \<div>是會換行的區塊，\<span>是不會換行的區塊
- CSS版面配置可以透過以下屬性進行操控
- display: none | block | inline | inline-block | <font color=red>flex</font>
- 威力最強大的是<font color=red>flex</font>參數
---
## 範例
- 給定三個區塊1、2、3
```html=
<div class='d1'>
<div class='d2'>1</div>
<div class='d2'>2</div>
<div class='d2'>3</div>
</div>
```
---
## 靠左靠上顯示(預設)
- display:flex;
- justify-content: flex-start; (靠左)
- align-items:flex-start; (靠上)
---
## 靠右靠上顯示
- justify-content: flex-end; (靠右)
- align-items:flex-start; (靠上)
---
## 靠中靠上顯示
- justify-content: center; (靠中)
- align-items:flex-start; (靠上)
---
## 間隔靠上顯示
- justify-content: space-between; (間隔)
- align-items:flex-start; (靠上)
---
## 前後間隔靠上顯示
- justify-content: space-around; (前後間隔)
- align-items:flex-start; (靠上)
---
## 前後間隔靠下顯示
- justify-content: space-around; (前後間隔)
- align-items:flex-end; (靠下)
---
## 前後間隔靠中顯示
- justify-content: space-around; (前後間隔)
- align-items:center; (靠中)
---
## [div-nav應用](https://github.com/shhuangmust/html/blob/master/34.div-nav.html)
- 利用display flex技術，建立選單列
---
```html=
<html>
<head>
<title>Div-nav</title>
<style>
body {
margin: 0px;
}
#b1 {
background-color: lightgray;
height: 100px;
line-height: 100px; //高度置中的訣竅，把行高設定跟height相同
}
#b1 h1 {
width: 400px;
margin: auto; //高度置中的第二訣竅
color: blue;
text-align: center;
//border:1px red solid;
}
#b2 {
height: 50px;
background-color: gray;
color: white;
display: flex;
align-items: center;
justify-content: space-around;
padding: 0px 600px;
}
.b2-1 {
line-height: 50px;
//border: 1px red solid;
}
#b3 {
height: 730px;
background-image: url(https://github.com/shhuangmust/html/raw/111-1/slider1.JPG);
}
#b3 h2 {
color: white;
padding: 50px 150px;
margin: 0px; //會影響#b2的margin
}
#b5 {
height: 70px;
line-height: 70px;
background-color: gray;
}
#b5 h4 {
color: white;
text-align: center;
margin: 0px;
}
</style>
</head>
<body>
<div id='b1'>
<h1>明新科技大學</h1>
</div>
<div id="b2">
<div class="b2-1">首頁</div>
<div class="b2-1">系所簡介</div>
<div class="b2-1">教師簡介</div>
<div class="b2-1">聯絡資訊</div>
</div>
<div id="b3">
<h2>加入明新 成為明星</h2>
</div>
<div id="b5">
<h4>明新科技大學資訊管理系 版權所有© All Rights Reserved. Designed and Maintained by IM MUST</h4>
</div>
</body>
</html>
```
---
## [Div-faculty應用](https://github.com/shhuangmust/html/blob/master/35.div-faculty.html)
---
```html=
<html>
<head>
<title>Div-faculty</title>
<style>
body {
margin: 0px;
}
#b1 {
background-color: lightgray;
height: 100px;
line-height: 100px; //高度置中的訣竅，把行高設定跟height相同
}
#b1 h1 {
width: 400px;
margin: auto; //高度置中的第二訣竅
color: blue;
text-align: center;
//border:1px red solid;
}
#b2 {
height: 50px;
background-color: gray;
color: white;
display: flex;
align-items: center;
justify-content: space-around;
padding: 0px 600px;
}
.b2-1 {
line-height: 50px;
//border: 1px red solid;
}
#b3 {
height: 730px;
background-image: url(https://github.com/shhuangmust/html/raw/111-1/slider1.JPG);
}
#b3 h2 {
color: white;
padding: 50px 150px;
margin: 0px; //會影響#b2的margin
}
#b4 {
height: 400px;
display: flex;
align-items: center;
justify-content: space-around;
padding: 0px 300px;
}
img {
width: 200px;
height: 300px;
//border: 1px red solid;
}
#b5 {
height: 70px;
line-height: 70px;
background-color: gray;
}
#b5 h4 {
color: white;
text-align: center;
margin: 0px;
}
</style>
</head>
<body>
<div id='b1'>
<h1>明新科技大學</h1>
</div>
<div id="b2">
<div class="b2-1">首頁</div>
<div class="b2-1">系所簡介</div>
<div class="b2-1">教師簡介</div>
<div class="b2-1">聯絡資訊</div>
</div>
<div id="b3">
<h2>加入明新 成為明星</h2>
</div>
<div id="b4">
<img src=https://github.com/shhuangmust/html/blob/master/faculty1.jpg?raw=true>
<img src=https://github.com/shhuangmust/html/blob/master/faculty2.jpg?raw=true>
<img src=https://github.com/shhuangmust/html/blob/master/faculty3.jpg?raw=true>
</div>
<div id="b5">
<h4>明新科技大學資訊管理系 版權所有© All Rights Reserved. Designed and Maintained by IM MUST</h4>
</div>
</body>
</html>
```
---
{"metaMigratedAt":"2023-06-17T14:54:28.777Z","metaMigratedFrom":"YAML","title":"區塊版面配置","breaks":true,"description":"<div>與<span>","contributors":"[{\"id\":\"ef0225b9-6c2a-4012-82c9-fa1031d2c4db\",\"add\":5956,\"del\":197,\"latestUpdatedAt\":1764642321759}]"}