前端學習筆記（HTML&CSS）（06）
CSS盒子模型（Box Model）
盒子模型（Box Model）簡介
- CSS将頁面中的所有元素都設定為了一個矩形的盒子
- 将元素設定為矩形的盒子後，對頁面的布局就變成将不同的盒子擺放到不同的位置
-
每一個盒子都由一下幾個部分組成：
内容區（content）
内邊距（padding）
邊框（border）
外邊距（margin）
前端學習筆記（HTML&CSS）（06）CSS盒子模型CSS盒子模型（Box Model）
<head>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
盒子模型_邊框
邊框
- 邊框的寬度 border-width
- 邊框的顔色 border-color
- 邊框的樣式 border-style
border-width可以用來指定四個方向的邊框的寬度
值的情況
- 四個值：上 右 下 左
- 三個值：上 左右 下
- 兩個值：上下 左右
- 一個值：上下左右
border-style 指定邊框的樣式
- solid 表示實線
- dotted 點狀虛線
- dashed 虛線
- double 雙線
本例示範如何設定四邊框樣式。
<html>
<head>
<style type="text/css">
p.dotted {border-style: dotted}
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}
</style>
</head>
<body>
<p class="dotted">A dotted border</p>
<p class="dashed">A dashed border</p>
<p class="solid">A solid border</p>
<p class="double">A double border</p>
<p class="groove">A groove border</p>
<p class="ridge">A ridge border</p>
<p class="inset">An inset border</p>
<p class="outset">An outset border</p>
</body>
</html>
本例示範如何在元素的各邊設定不同的邊框。
<html>
<head>
<style type="text/css">
p.soliddouble {border-style: solid double}
p.doublesolid {border-style: double solid}
p.groovedouble {border-style: groove double}
p.three {border-style: solid double groove}
</style>
</head>
<body>
<p class="soliddouble">Some text</p>
<p class="doublesolid">Some text</p>
<p class="groovedouble">Some text</p>
<p class="three">Some text</p>
</body>
</html>
盒子模型_内邊距
内邊距（padding）
内容區和邊框之間的距離是内邊距,一共有四個方向的内邊距：
- padding-top
- padding-right
- padding-bottom
- padding-left
本例示範使用簡寫屬性将所有的内邊距屬性設定于一個聲明中，可以有一到四個值。
<html>
<head>
<style type="text/css">
td.test1 {padding: 1.5cm}
td.test2 {padding: 0.5cm 2.5cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td class="test1">
這個表格單元的每個邊擁有相等的内邊距。
</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td class="test2">
這個表格單元的上和下内邊距是 0.5cm，左和右内邊距是 2.5cm。
</td>
</tr>
</table>
</body>
</html>
盒子模型_外邊距
外邊距（margin）
- 外邊距不會影響盒子可見框的大小
- 但是外邊距會影響盒子的位置
- 一共有四個方向的外邊距：
- margin-top - 上外邊距，設定一個正值，元素會向下移動
- margin-right - 預設情況下設定margin-right不會産生任何效果
- margin-bottom - 下外邊距，設定一個正值，其下邊的元素會向下移動
- margin-left - 左外邊距，設定一個正值，元素會向右移動
本例示範如何将所有的外邊距屬性設定于一個聲明中。
<html>
<head>
<style type="text/css">
p.margin {margin: 2cm 4cm 3cm 4cm}
</style>
</head>
<body>
<p>這個段落沒有指定外邊距。</p>
<p class="margin">這個段落帶有指定的外邊距。這個段落帶有指定的外邊距。這個段落帶有指定的外邊距。這個段落帶有指定的外邊距。這個段落帶有指定的外邊距。</p>
<p>這個段落沒有指定外邊距。</p>
</body>
</html>
盒子模型_外邊距合并(摘自W3school)
外邊距合并（疊加）是一個相當簡單的概念。但是，在實踐中對網頁進行布局時，它會造成許多混淆。
簡單地說，外邊距合并指的是，當兩個垂直外邊距相遇時，它們将形成一個外邊距。合并後的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。
- 當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合并。
前端學習筆記（HTML&CSS）（06）CSS盒子模型CSS盒子模型（Box Model） - 當一個元素包含在另一個元素中時（假設沒有内邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合并。 盡管看上去有些奇怪，但是外邊距甚至可以與自身發生合并。
前端學習筆記（HTML&CSS）（06）CSS盒子模型CSS盒子模型（Box Model） - 假設有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合并： 如果這個外邊距遇到另一個元素的外邊距，它還會發生合并：
前端學習筆記（HTML&CSS）（06）CSS盒子模型CSS盒子模型（Box Model） 這就是一系列的段落元素占用空間非常小的原因，因為它們的所有外邊距都合并到一起，形成了一個小的外邊距。 前端學習筆記（HTML&CSS）（06）CSS盒子模型CSS盒子模型（Box Model）
外邊距合并初看上去可能有點奇怪，但是實際上，它是有意義的。以由幾個段落組成的典型文本頁面為例。第一個段落上面的空間等于段落的上外邊距。如果沒有外邊距合并，後續所有段落之間的外邊距都将是相鄰上外邊距和下外邊距的和。這意味着段落之間的空間是頁面頂部的兩倍。如果發生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一緻了。