內容目錄
box-model介紹
box-model是CSS的基礎，而CSS的本質就是包裝HTML的外框，而box-model就是由四個重要的值組合而成，分別由外到內為margin ( 外邊距 )、border ( 邊框 ) 、padding ( 內邊距 )、content ( 內容 ) (參考下圖)
margin ( 外邊距 )
是盒子的外邊距離，是盒子之間的距離，呈現為透明無色
呈現方式
先設定全部的盒子都有
- 背景粉
- 邊框1px，紅色
- 高跟寬都100px
- 設定盒子2、3跟6、7到中間，方便觀察
- 最後在6、7設定margin 10px，觀看差別
※這裡用到CSS選擇器跟display屬性呈現，可以參考以下文章：
HTML
<div class="box">我是盒子1</div>
<div class="box-mid">我是盒子2</div>
<div class="box-mid">我是盒子3</div>
<div class="box">我是盒子4</div>
<div class="box">我是盒子5</div>
<div class="box-mid box-margin">我是盒子6</div>
<div class="box-mid box-margin">我是盒子7</div>
<div class="box">我是盒子8</div>
CSS
<style>
[class^="box"] {
height: 100px;
width: 100px;
background: pink;
border: 1px solid red;
}
.box-mid {
display: inline-block;
}
.box-margin {
margin: 10px;
}
</style>
程式執行結果
可以看到每個盒子的大小不變，唯一改變的是被設定margin的6跟7盒子之間的上下左右距離被拉大了
我是盒子1
我是盒子2
我是盒子3
我是盒子4
我是盒子5
我是盒子6
我是盒子7
我是盒子8
padding ( 內邊距 )
box裡面的間距，裡面的顏色依照背景色所控制
呈現方式
先設定全部的盒子都有
- 背景粉
- 邊框1px，紅色
- 高跟寬都100px
- 設定盒子2、3跟6、7到中間，方便觀察
- 最後在6、7設定 padding 10px，觀看差別
※這裡用到CSS選擇器跟display屬性呈現，可以參考以下文章：
HTML
<div class="box">我是盒子1</div>
<div class="box-mid">我是盒子2</div>
<div class="box-mid">我是盒子3</div>
<div class="box">我是盒子4</div>
<div class="box">我是盒子5</div>
<div class="box-mid box-padding">我是盒子6</div>
<div class="box-mid box-padding">我是盒子7</div>
<div class="box">我是盒子8</div>
CSS
<style>
[class^="box"] {
height: 100px;
width: 100px;
background: pink;
border: 1px solid red;
}
.box-mid {
display: inline-block;
}
.box-padding {
padding: 10px;
}
</style>
程式執行結果
可以看到每個盒子的距離不變，唯一改變的是被設定padding的6跟7盒子大小發生改變，盒子裡面粉色空間變大了，因為內邊距變大了
我是盒子1
我是盒子2
我是盒子3
我是盒子4
我是盒子5
我是盒子6
我是盒子7
我是盒子8
border
是盒子上面的邊框大小，可以使元素有邊框效果，還可以改變顏色
呈現方式
先設定全部的盒子都有
- 背景粉
- 邊框1px，紅色
- 高跟寬都100px
- 設定盒子2、3跟6、7到中間，方便觀察
- 最後在6、7設定 border 15px，觀看差別
※這裡用到CSS選擇器跟display屬性呈現，可以參考以下文章：
HTML
<div class="box">我是盒子1</div>
<div class="box-mid">我是盒子2</div>
<div class="box-mid">我是盒子3</div>
<div class="box">我是盒子4</div>
<div class="box">我是盒子5</div>
<div class="box-mid box-border">我是盒子6</div>
<div class="box-mid box-border">我是盒子7</div>
<div class="box">我是盒子8</div>
CSS
<style>
[class^="box"] {
height: 100px;
width: 100px;
background: pink;
border: 1px solid red;
}
.box-mid {
display: inline-block;
}
.box-border {
border: 10px solid red;
}
</style>
程式執行結果
可以看到每個盒子的大小跟距離不變，唯一改變的是被設定border15px的6跟7盒子邊框發生改變，盒子邊框紅色部分變大了，因為邊寬變大了
我是盒子1
我是盒子2
我是盒子3
我是盒子4
我是盒子5
我是盒子6
我是盒子7
我是盒子8