CSS盒子模型

CSS盒子模型（上）

盒子模型（Box Model）是CSS控制頁面時一個很重要的概念。隻有很好地掌握了盒子模型以及其中每個元素的用法，才能真正地控制好頁面中的各個元素。

所有頁面中的元素都可以看成是一個盒子，占據着一定的頁面空間。一般來說這些被占據的空間往往都要比單純的内容大。可以通過調整盒子的邊框和邊距等參數，來調節盒子的位置和大小。一個頁面由很多這樣的盒子組成，這些盒子之間會互相影響。

掌握盒子模型需要從兩方面來了解：一是了解單個的盒子的内部結構；二是了解多個盒子之間的互相關系。

本文首先講解獨立的盒子相關的性質，然後介紹在普通情況下盒子的排列關系。下一次将更深入地講解浮動和定位的相關内容。

一．盒子模型概念

1.現實生活中的盒子：

圖1 現實生活中的盒子

2. 盒子模型（Box Model）

在網頁布局中，為了能夠使紛繁複雜的各個部分合理地進行組織，通過研究，總結出了一套完整的、行之有效的原則和規範，這就是“盒子模型”的由來。

在CSS中，一個獨立的盒子模型由内容(content)、邊框(border)、填充(padding)和邊界(margin)4個部分組成：

内容(content)：對應盒内物品

邊框(border)：對應包裝盒的紙殼，具有厚度

填充(padding)：位于邊框内部，是内容與邊框的距離，對應包裝盒的填充部分

邊界(margin)：位于邊框外部，是邊框外面周圍的間隙，對應紙殼外圍間隙

圖2 标準盒子模型

3. 盒子模型的三維立體結構圖

圖3 CSS2.0盒子模型的三維立體結構圖

▪邊框（border），位于盒子的第一層。

▪元素内容（content）、内邊距（padding），兩者同位于第二層。

▪背景圖（background-image），位于第三層。

▪背景色（background-color），位于第四層。

▪整個盒子的外邊距（margin），位于第五層。

二．盒子模型屬性

1. 邊框（border）：用于分隔不同元素、會占據空間、有4條邊框、可無邊框（設定為0）。

文法：

border : border-width || border-style || border-color

取值：

該屬性是複合屬性。預設值為： medium none 。 border-color 的預設值将采用文本顔色。

邊框屬性簡寫

同時設定邊框的三個屬性：border: 3px solid blue;

示例代碼1：邊框屬性簡寫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>邊框屬性簡寫</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 3px solid blue;
        }
    </style>
</head>
<body>
    <div>盒子</div>
</body>
</html>

① border-width：設定對象邊框的寬度。

border-width : medium | thin | thick | length

medium : 預設值。預設寬度

thin : 小于預設寬度

thick : 大于預設寬度

length : 由浮點數字和機關辨別符組成的長度值。不可為負值。

說明：

如果提供全部四個參數值，将按上－右－下－左的順序作用于四個邊框（順時針）。如果隻提供一個，将用于全部的四條邊。如果提供兩個，第一個用于上－下，第二個用于左－右。如果提供三個，第一個用于上，第二個用于左－右，第三個用于下。

設定border-width、border-color前要設定border-style。

分别設定四條邊框：

屬性	文法規則	說明
border-top-width	border-top-width:5px;	上邊框粗細為5px
border-right-width	border-right-width:10px;	右邊框粗細為10px
border-bottom-width	border-bottom-width:8px;	下邊框粗細為8px
border-left-width	border-left-width:22px;	左邊框粗細為22px

示例代碼2:分别設定四條邊框（修改示例代碼1的style）

<style>
        div{
            border-top-width:5px;
            border-right-width:10px;
            border-bottom-width:8px;
            border-left-width:22px;
            width:200px;
            height:200px;
            border-style: solid;
        }
</style>

同時設定4條邊框：


border-width	border-width:5px;	4條邊框粗細均為5px
	border-width:20px 2px;	上、下邊框粗細為20px 左、右邊框粗細為2px
	border-width:5px 1px 6px;	左、右邊框粗細為1px 下邊框粗細為6px
	border-width:1px 3px 5px 2px;	上邊框粗細為1px 右邊框粗細為3px 下邊框粗細為5px 左邊框粗細為2px

示例代碼3:同時設定4條邊框（修改示例代碼1的style）

<style>
        div{
            border-width:5px 10px 20px;
            width:200px;
            height:200px;
            border-style: solid;
        }
</style>

② border-color: 指定顔色。

border-color : color

color:指定顔色。附：CSS 顔色十六進制值表

▪從#後第1位開始每2位為一組,表示一個顔色的值（這是以十六進制來算的）：第1組為紅色，第2組為綠色，第3組為藍色。根據三基色的原理，紅色與綠色混合為黃色，紅色與藍色混為紫色，綠色與藍色混合為青色。

▪數值大顔色亮

▪十六進制值是成對重複的可以簡寫，效果一樣。例如:#FF0000 可以寫成#F00。但如果不重複就不可以簡寫，例如#FC1A1B 必須寫滿六位。

▪紅色#FF0000，綠色#00ff00，藍色為#0000ff，黃色為#FFFFOO，紫色為#ff00ff,青色為#00ffff,白色#ffffff,黑色#000000，要記住（上面所提到的都是飽和色）。

分别設定四條邊框和同時設定4條邊框文法同border-width

示例代碼4:同時設定4條邊框的顔色（修改示例代碼3的style）

<style>
        div{
            border-color: gold pink blue red;
            border-width:5px 10px 20px;
            width:200px;
            height:200px;
            border-style: solid;
        }
</style>

③ border-style：設定對象邊框的樣式。

none : 預設值。無邊框。不受任何指定的 border-width 值影響

hidden : 隐藏邊框。IE不支援

dotted : 在MAC平台上IE4+與WINDOWS和UNIX平台上IE5.5+為點線。否則為實線

dashed : 在MAC平台上IE4+與WINDOWS和UNIX平台上IE5.5+為虛線。否則為實線

solid : 實線邊框

double : 雙線邊框。兩條單線與其間隔的和等于指定的 border-width 值

groove : 根據 border-color 的值畫3D凹槽

ridge : 根據 border-color 的值畫3D凸槽

inset : 根據 border-color 的值畫3D凹邊

outset : 根據 border-color 的值畫3D凸邊

示例代碼5:同時設定4條邊框（修改示例代碼4的style）

<style>
        div{
            border-style: dotted;
            border-color: gold pink blue red;
            border-width:5px 10px 20px;
            width:200px;
            height:200px;
        }
</style>

④ inherit：規定應該從父元素繼承 border 屬性的設定。

注:當有多條規則作用于同一個邊框時，會産生沖突，後面的設定會覆寫前面的設定。

2. 填充(padding)：用于控制内容與邊框之間的距離；會占據空間；

可設定盒子模型上、右、下、左4個方向的内邊距值；padding屬性的值可以為0，即無内邊距。

分别設定4個方向的内邊距：


padding-left	padding-left:10px;	左内邊距為10px
padding-right	padding-right:5px;	右内邊距為5px
padding-top	padding-top:20px;	上内邊距為20px
padding-bottom	padding-bottom:8px;	下内邊距為8px

同時設定4個方向的内邊距：


padding	padding:10px ;	設定4個方向内邊距均為10px
	padding:10px 5px;	上、下内邊距為10px 左、右内邊距為5px
	padding:30px 8px 10px ;	上内邊距為30px 左、右内邊距為8px 下内邊距為10px
	padding:20px 5px 8px 10px ;

示例代碼6:同時設定4個方向的内邊距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>填充(padding)</title>
    <style>
        #box1{
            width: 400px;
            height: 300px;
            background: pink;
        }
        #box2{
            padding: 30px 8px 10px;
            width: 300px;
            height: 200px;
            background: green;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">同時設定4個方向的内邊距</div>
    </div>
</body>
</html>

3.邊界(margin)：用于控制元素與元素之間的距離；會占據空間；

可設定盒子模型上、右、下、左4個方向的外邊距值；margin屬性的值可以為0，即無外邊距。

分别設定4個方向的内邊距和同時設定4個方向的内邊距文法同padding屬性設定方法類似。

示例代碼7:同時設定4個方向的外邊距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>邊界(margin)</title>
    <style>
        #box1{
            border:1px solid red;
            width: 400px;
            height: 300px;
            background: pink;
        }
        #box2{
            margin: 10px 30px;
            padding: 30px 8px 10px;
            width: 300px;
            height: 200px;
            background: green;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">同時設定4個方向的外邊距</div>
    </div>
</body>
</html>

注：body的外邊距，本身是一個盒子，預設情況下，有若幹像素外填充。

由于各個浏覽器存在着預設的内外邊距值且不相同，我們需要将所有浏覽器的預設内外邊距，都從0計算。是以，我們用

body,div{/*清除預設外邊距和内邊距*/
    margin: 0;
    padding: 0;
}

去除浏覽器的預設内外邊距。建議要去除的寫上，不建議使用*{margin:0;padding:0;}。

示例代碼8:去除body外邊距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>去除body外邊距</title>
    <style>
        body,div{
            margin: 0px;
            padding: 0px;
        }
        div{
            border:1px solid red;
            width: 400px;
            height: 300px;
            background: pink;
        }
    </style>
</head>
<body>
    <div id="box">此時是貼在body邊框上</div>
</body>
</html>

效果：

圖4 去除body外邊距

4. 内容(content)

内容本身的寬=width

内容本身的高=height

5.盒子模型總尺寸

盒子模型總尺寸=border-width+padding+margin+内容尺寸（寬度/高度）

圖5 盒子模型總尺寸

三．盒子之間的關系

單獨的一個盒子不難了解，實際上網頁往往是很複雜的，一個網頁可能存在着大量的盒子，并且它們之間以各種關系互相影響着。為了适應各種排版要求，CSS規範的思路是：首先确定一種标準的排版模式，這個就是“标準流”。

但僅通過标準流方式，很多排版是無法實作的，CSS規範中又給出了另外幾種對盒子進行布局的方法，包括“浮動”和“定位”等屬性，對某些元素進行特殊排版。

1. DOM樹

一個HTML從表面看是文本檔案，從邏輯上看則具有内在的層次關系。“樹”可以表示具有層次關系的結構。

任意一個HTML文檔都對應一棵DOM樹，body是所有對象的根節點。而該DOM樹的節點如何在浏覽器中表現，則由CSS确定。即HTML控制網頁的結構，CSS控制網頁的表現。

圖6 HTML文檔對應DOM樹

2. 标準文檔流

“标準文檔流”（Normal Document Stream），簡稱“标準流”，是指在不使用其他與排列和定位相關的特殊CSS規則時，各種元素的排列規則。

如上圖共有四層結構，頂層為body，第二層為ul，第三層為li，第四層為文本。這四種元素分為兩類：

① 塊級元素（block level）

li占據着一個矩形的區域，并且和相鄰的li依次豎直排列，不會排在同一行中。ul也具有同樣的性質，占據着一個矩形的區域，并且和相鄰的ul依次豎直排列，不會排在同一行中。這類元素稱為“塊級元素” ，即它們總是以一個塊的形式表現出來，并且跟同級的兄弟塊依次豎直排列，左右撐滿。

常見的塊标記：address、block、div、dl、fieldset、form、h1 ~ h6、menu、ol、ul、p、table

② 行内元素（inline）

對于文字這類元素，各個字母之間橫向排列，到最右端自動折行，這就是另一種元素，稱為“行内元素”。比如<strong></strong>标記，就是一個典型的行内元素，這個标記本身不占有獨立的區域，僅僅是在其他元素的基礎上指出了一定的範圍。再比如，最常用的<a>、<span>标記。

3.浏覽器處理元素過程：

第1步：從body開始，依次把兩個ul塊豎直排列。

第2步：分别進入每一個ul檢視它的下級元素，把兩個li塊豎直排列在ul中。

第3步：進入li内部，是一行文本，按行内元素排列文字。

4．<div>标記與<span>标記

為了更好地了解“塊級元素”和“行内元素”，這裡重點介紹在CSS排版的頁面中經常使用的<div>和<span>标記。

div簡單而言就是一個塊級容器标記，可以容納段落、标題、表格、圖檔，乃至章節、摘要和備注等各種HTML元素。可以把div當做一個獨立的對象，用CSS進行控制。<span>和<div>一樣，在HTML元素中可以作為獨立的對象進行處理。

兩者的差別在于：div是一個塊級元素，span僅僅是一個行内元素，在它的前後都不會換行。span沒有結構上的意義，純粹是應用樣式，當其他行内元素都不适合時，就可以用span标記。div标記可以包含span，span不可以包含div。

5. 盒子在标準流中的定位原則

如果要精确地控制盒子的位置，就必須對margin有更深入的了解。padding隻存在于一個盒子内部，是以通常它不會涉及與其他盒子之間的關系和互相影響的問題。margin則用于調整不同的盒子之間的位置關系。

① 行内元素之間的水準margin

圖7 行内元素之間的水準margin

兩個塊之間的距離為：30px+40px=70px。

② 塊級元素之間的豎直margin

圖8 塊級元素之間的豎直margin

如果不是行内元素，而是豎直排列的塊級元素，margin的取值情況就會有所不同。

兩個塊級元素之間的距離不是margin-bottom與margin-top的總和，而是兩者中的較大者，如圖所示。這個現象稱為margin的“塌陷”（或稱為“合并”）現象，意思是說較小的margin塌陷（合并）到了較大的margin中。

6. 嵌套盒子之間的margin

除了上面提到的行内元素間隔和塊級元素間隔這兩種關系外，還有一種父子關系，它的margin值對CSS排版也有重要的作用。當一個<div>塊包含在另一個<div>塊中時，便形成了典型的父子關系。

其中子塊的margin将以父塊的内容為參考，如圖4.22所示。

圖9 嵌套盒子之間的margin

在沒有設定width和height的情況下，高度和寬度都會自動延伸和收縮。在标準流中，一個塊級元素的盒子水準方向的寬度會自動延伸，直至上一級盒子的限制位置。對于高度，div都是以裡面的内容的高度來确定的，也就是會自動收縮到能包容下内容的最小高度。

示例代碼7:在沒有設定width和height的情況下，高度和寬度都會自動延伸和收縮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子的嵌套</title>
    <style>
        #box1{//父盒子 設定寬度
            border:1px solid red;
            width: 300px;
            height: 150px;
            background: pink;
        }
        #box2{//子盒子 不設定寬度
            border:1px solid red;
            height: 100px;
            background: green;
        }
    </style>
</head>
<body>
    <div id="box1">父盒子
        <div id="box2">子盒子寬度 自動延伸為 父盒子寬度</div>
    </div>
</body>
</html>

圖10 子盒子寬度延伸為父盒子寬度

如果更改代碼：父盒子不設定高度，子盒子設定高度，則父盒子高度會收縮至子盒子的高度，效果如下：

圖11 父盒子高度收縮為子盒子高度

7. margin屬性可以設定為負值

上面提及margin的時候，它的值都是正數。其實margin的值也可以設定為負數，而且有關的巧妙運用方法也非常多。

圖12 margin-left=-50px