之前講到，樣式是CSS語法的最小單元，每一個樣式都由選擇器和聲明（規則）兩部分組成，而聲明又由屬性和屬性值組成。上一篇講了選擇器，這裏就開始進入“屬性”部分了。
要想靈活應用CSS設計出美觀且多樣的頁面，就需要熟悉CSS的各類“屬性”，CSS中包含超過100種屬性，包括字體屬性、文本屬性、邊框屬性、邊距屬性、佈局屬性、定位屬性、打印屬性等。作爲初學者，我覺得我們應該循序漸進，先集中熟悉最常用的屬性大類中的重點內容，之後再在自己的實踐和學習別人的代碼中不斷鞏固、不斷擴展。
我想在這裏，主要總結一下網頁佈局和網頁排版這兩塊內容。網頁佈局中，主要說一下與盒模型和定位相關的屬性；網頁排版中，集中總結一下字體和文本屬性。之後，再和HTML的內容結合起來，詳細的分析一下幾個具體的頁面代碼，加深理解。
目錄
1. 盒模型 (Box Model)
CSS 盒模型講的就是網頁中任何元素都會顯示爲一個矩形形狀，它可以包括：
- content（內容）：顯示文本和圖像等元素（element）的區域，包含寬度（width）和高度（height）；
- padding（內邊距，也叫填充或補白）：內容周圍的區域，內邊距本身是透明的；
- border（邊框）：圍繞再內邊距外的邊框，背景應用於由內容和內邊距、邊框組成的區域。
- margin（外邊距，也叫空白邊或邊界）：清除邊框外的區域，外邊距是透明的，不會遮擋其後的任何元素。
對於上面提到的屬性，按方位又可以包含 top、right、bottom、left 共4個分支屬性；根據性質，又包含邊框類型（style)、粗細（width)和顏色（color）等屬性。比如，border，就包含border-top、border-right、border-bottom、border-left等分支屬性，而border-width 屬性又分爲 border-top-width、 border-right-width、border-bottom-width、border-left-width 和 border-width 屬性。
在這裏還要注意，在 CSS 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。
舉個栗子：
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
效果是這樣的：
分別表示頂部外邊距、右側外邊距、底部外邊距和左側外邊距。
1.1 padding 內邊距
CSS padding 屬性定義元素邊框與元素內容之間的空白區域。padding 屬性接受長度值或百分比值，但不允許使用負值。
如果希望h1元素的各邊的padding都是10px，只需要定義：
h1 {padding: 10px;}
也可以分別定義上下左右各邊的內邊距：
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
/*簡寫，順序：順時針*/
h1 {padding: 10px 0.25em 2ex 20%;}
注意，對邊距（包括內邊距和外邊距）設置百分數值，百分數值是相對於其父元素的 width 和height 計算的，父元素的屬性改變，它們也會按比例改變。
1.2 border 邊框
元素的邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。CSS border 屬性允許你規定元素邊框的樣式、寬度和顏色。
值得注意的是，邊框繪製在“元素的背景之上”。這很重要，因爲有些邊框是“間斷的”（例如，點線邊框或虛線框），元素的背景應當出現在邊框的可見部分之間。
（1）邊框的樣式 border-style
樣式是邊框最重要的一個方面，CSS的 border-style 屬性共有10個樣式：
使用方法如下：
/* 定義邊框樣式 */
a:link img {border-style: outset;}
/* 爲一個邊框定義多個樣式 */
p {border-style: solid solid solid none;} /* 順時針top-right-bottom-left的順序*/
p {border-style: solid; border-left-style: none;} /*必須把單邊屬性放在簡寫屬性之後,防止覆蓋*/
（2）邊框寬度 border-width
爲邊框指定寬度有兩種方法：可以指定長度值，比如 2px ；或者使用 3 個關鍵字之一，它們分別是 thin 、medium（默認值） 和 thick，這三個關鍵詞在不同的瀏覽器中的值可能不同。
邊框寬度的聲明和之前介紹的其他性質基本一致：
/*邊框寬度的定義*/
p {border-style: solid; border-width: 5px;}
p {border-style: solid; border-width: thick;}
p {border-style: solid; border-width: 15px 5px 15px 5px;}
p {border-style: solid; border-width: 15px 5px;} /*值複製*/
p {border-style: solid; border-width: 15px 5px 15px;} /*值複製*/
p {
border-style: solid;
border-top-width: 15px;
border-right-width: 5px;
border-bottom-width: 15px;
border-left-width: 5px;
}
上面註釋“值複製”的代碼，與前面的代碼是等價的。值複製用於避免輸入重複的數字，它的規則如下：
- 如果缺少左外邊距的值，則使用右外邊距的值。
- 如果缺少下外邊距的值，則使用上外邊距的值。
- 如果缺少右外邊距的值，則使用上外邊距的值。
舉個栗子：
h1 {margin: 0.25em 1em 0.5em;} /* 等價於 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;} /* 等價於 0.5em 1em 0.5em 1em */
p {margin: 1px;} /* 等價於 1px 1px 1px 1px */
注意：border-style 的默認值是 none，如果沒有聲明樣式，就相當於 border-style: none，此時沒有邊框，邊框寬度自動設置爲0。因此，如果您希望邊框出現，就必須聲明一個邊框樣式。
（3）邊框顏色 border-color
設置邊框顏色非常簡單，可以使用任何類型的顏色值，例如可以是命名顏色，也可以是十六進制和 RGB 值，在這裏就不加代碼了。
有一個有意思的點，就是CSS2 引入了邊框顏色值 transparent。這個值用於創建有寬度的不可見邊框，也就是將邊框設置爲透明色。這個功能可以和之前說的僞類選擇器結合起來使用，體現不一樣的懸浮樣式或點擊樣式。
（4）outline 和 border
CSS中還有一個概念，叫outline，即輪廓。在瀏覽器裏，當鼠標點擊或使用Tab鍵讓一個鏈接或者一個radio獲得焦點的時候，該元素將會被一個輪廓虛線框圍繞。這個輪廓虛線框就是 outline ，它位於邊框邊緣的外圍，起突出元素的作用。。outline也有和border相似的屬性，包括outline，outline-width，outline-style，outline-color等。其中第一個 outline 是速寫(shorthand)形式，格式爲： outline: outline-color || outline-style || outline-width（border也有同樣的速寫形式：border: border-width||border-style||border-color）。
如果想讓鏈接獲取到焦點時更醒目，可以設置輪廓線條爲紅色，outline 屬性的設計可以如下：
a { outline-color: red; }
如果想去掉輪廓線條，則可以按如下方法設置：
.active-tab { outline: none; ...... /* other properties */}
border 可應用於幾乎所有有形的html元素，而 outline 是針對鏈接、表單控件和ImageMap等元素設計， outline 的效果將隨元素的 focus 而自動出現，相應的由 blur 而自動消失。另外，outline 不會象border那樣影響元素的尺寸或者位置，border(邊框)是要佔據空間的，而outline（輪廓）是不佔據空間的。
1.3 margin 外邊距
margin是指圍繞在元素邊框的空白區域，這個屬性接受任何長度單位（像素、英寸、毫米或 em）、百分數值甚至負值。
/*設置margin屬性*/
h1 {margin : 0.25in;}
h1 {margin : 10px 0px 15px 5px;} /*從上外邊距 (top) 開始圍着元素順時針旋轉*/
p {margin : 10%;} /*外邊距是其父元素的 width 的 10%*/
注意，margin屬性中使用的百分數是相對於父元素的 width 計算的。
margin 的默認值是 0，所以如果沒有爲 margin 聲明一個值，就不會出現外邊距，但有些瀏覽器中會提供預設的外邊距樣式。
margin 的值也設置爲 auto，auto會因爲所在元素、元素類型和上下文的有不同不一樣的表現，在margin中，auto 有兩種選擇：佔據可用的空間（take up the available space，表現爲在父元素中水平居中）或者等同於0px。該作用常用於設置居中對齊。
例如：
<div class="father">
<div class="son"></div>
</div>
<style>
.father{
width: 200px;
height: 200px;
background: pink;
}
.son {
width: 100px;
height: 100px;
background: gray;
margin: auto;
}
</style>
運行結果：
上述效果僅在水平的外邊距中起作用，而且當position屬性設置了absolute或fixed值，也不會起作用。但是，當左右外邊距中的其中一個賦值爲auto，另一個爲其他值的時候，設置auto的一側會佔據所有可用空間，營造出元素向左或向右浮動的效果。
1.4 其他重要功能
（1）圓角邊框 border-radius
在網頁設計中，爲了美觀，常會用到”圓角邊框“。CSS設置圓角邊框的屬性是border-radius，它的用法如下：
/* 爲div對象盒子的四個角設置5像素圓角 */
div{border-radius:5px}
/* 爲div對象盒子的左上角和右下角設置5像素圓角，其他不變 */
div{border-radius:5px 0;}
/* 爲div對象盒子的左上角和右上角設置5像素圓角，其他不變 */
div{border-radius:5px 5px 0 0;}
/* 爲div對象盒子的左上角設置3像素圓角，右上角設置4像素圓角，右下角設置5像素圓角，左下角設置6像素圓角 */
div{border-radius:3px 4px 5px 6px;}
（2）盒子陰影 box-shadow
在 CSS3 中，box-shadow 用於向方框添加陰影，用法如下：
示例：
div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}
效果：
（3）邊框圖片 border-img
通過 CSS3 的 border-image 屬性，您可以使用圖片來創建邊框：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}
#round
{
-moz-border-image:url(/i/border.png) 30 30 round; /* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 round; /* Opera */
border-image:url(/i/border.png) 30 30 round;
}
#stretch
{
-moz-border-image:url(/i/border.png) 30 30 stretch; /* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 stretch; /* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 stretch; /* Opera */
border-image:url(/i/border.png) 30 30 stretch;
}
</style>
</head>
<body>
<div id="round">在這裏，圖片鋪滿整個邊框。</div>
<br>
<div id="stretch">在這裏，圖片被拉伸以填充該區域。</div>
<p>這是我們使用的圖片：</p>
<img src="/i/border.png">
<p><b>註釋：</b> Internet Explorer 不支持 border-image 屬性。</p>
<p>border-image 屬性規定了用作邊框的圖片。</p>
</body>
</html>
效果：
這篇就先到這裏了，下面咱們再看看網頁排版的相關內容。