CSS盒模型
- 在CSS中盒模型被分為兩種，第一種是W3C的標準模型，第二種是IE怪異盒模型。兩種盒子模型都包括
padding、margin、border、content。不同之處在于后者的寬高定義的是可見元素框的尺寸（content還包括border和padding），而不是元素框的內容區尺寸。目前對于瀏覽器大多數元素都是基于W3C標準的盒模型，但對于表單form中的部分元素還是基于IE的怪異盒模型，如 input 里的 radio、checkbox、button 等元素，如果給其設置 border 和 padding 它們也只會往元素盒內延伸
- 那么我們如何進行選擇了，通常我們選擇“標準W3C盒子模型”，通過在網頁的頂部加上DOCTYPE聲明，如下：
<!DOCTYPE html>
- 如果不加DOCTYPE聲明，那么各個瀏覽器會根據自己的行為去理解網頁，即IE瀏覽器會采用IE盒子模型去解釋你的盒子，而Chrome、Firefox等瀏覽器會采用標準W3C盒子模型解釋你的盒子，這就導致不同的瀏覽器中顯示的樣式有差異。反之，如果加上了DOCTYPE聲明，那么所有瀏覽器都會采用標準W3C盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了
-
盒子3D模型，由上到下（由表及里）為：
- 邊框（border）
- 內容＋填充（content＋padding）
- 背景圖片（background-image）
- 背景顏色（background-color）
- 邊界（margin）
- 疊加之后就形成我們所看到了盒子模型的平面圖
元素分類
- 在CSS中，html中的標簽元素大體被分為三種不同的類型：塊狀元素、內聯元素（又叫行內元素）和內聯塊狀元素
-
常用的塊狀元素有：
<div> <p> <h1>...<h6> <ol> <ul> <dl> <table> <address> <blockquote> <form>
1 <address>//定義地址
2 <blockcode> // 定義計算機長代碼文本
3 <caption>//定義表格標題
4 <dd> //定義列表中定義條目
5 <div> //定義文檔中的分區或節
6 <dl> //定義列表
7 <dt> //定義列表中的項目
8 <fieldset> //定義一個框架集
9 <form> //創建 HTML 表單
10 <h1> //定義最大的標題
11 <h2> // 定義副標題
12 <h3> //定義標題
13 <h4> //定義標題
14 <h5> //定義標題
15 <h6> //定義最小的標題
16 <hr> //創建一條水平線
17 <legend> //元素為 fieldset 元素定義標題
18 <li> //標簽定義列表項目
19 <noframes> //為那些不支持框架的瀏覽器顯示文本，于 frameset 元素內部
20 <noscript> //定義在腳本未被執行時的替代內容
21 <ol> //定義有序列表
22 <ul> //定義無序列表
23 <p> //標簽定義段落
24 <pre> //定義預格式化的文本
25 <table> //標簽定義 HTML 表格
26 <tbody> //標簽表格主體（正文）
27 <td> //表格中的標準單元格
28 <tfoot> //定義表格的頁腳（腳注或表注）
29 <th> //定義表頭單元格
30 <thead> //標簽定義表格的表頭
31 <tr> //定義表格中的行
-
常用的內聯元素有：
<a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code>
1 <a> // 可定義超鏈接
2 <abbr> // 表示一個縮寫形式
3 <acronym> // 定義只取首字母縮寫
4 <b> // 字體加粗
5 <bdo> // 可覆蓋默認的文本方向
6 <big> // 大號字體加粗
7 <br> // 換行
8 <cite> // 引用進行定義
9 <code> // 定義計算機代碼文本
10 <dfn> // 定義一個定義項目
11 <em> // 定義為強調的內容
12 <i> // 斜體文本效果
13 <kbd> // 定義鍵盤文本
14 <label> // 自動選中和該label標簽相關聯的表單控件上
15 <q> // 定義短的引用
16 <samp> // 定義樣本文本
17 <small> // 呈現小號字體效果
18 <span> // 組合文檔中的行內元素
19 <strong> // 加粗
20 <sub> // 定義下標文本
21 <sup> // 定義上標文本
22 <tt> // 打字機或者等寬的文本效果
23 <var> // 定義變量
-
常用的內聯塊狀元素有：
<img> <input> <textarea> <select> <button> <caption>
1 <caption> // 定義表格的標題
2 <img> // 向網頁中嵌入一幅圖像
3 <input> // 輸入框
4 <textarea> // 多行的文本輸入控件
5 <select> // 創建單選或多選菜單
6 <button> // 創建按鈕
塊狀元素（也稱塊級元素，block）
- 塊狀元素特點：
- 每個塊級元素都從新的一行開始，并且其后的元素也另起一行
- 元素的高度、寬度、行高以及頂和底邊距都可以設置
- 絕大部分塊狀元素寬度在不設置的情況下，是它本身父容器的100%（和父容器的寬度一致），除非設定一個寬度，即從左到右撐滿頁面，獨占一行。也有例外的，比如 table，占據一行的空間，但是寬度是根據內容來定的
- 元素觸碰到頁面邊緣時，會自動換行
- 塊狀元素都具有盒模型的特征
- 設置
display: block就是將元素顯示為塊狀元素
- 例如
a {display: block;}代碼就是將內聯元素a轉換為塊狀元素，從而使a元素具有塊狀元素特點
- 注意：
- 有時我們看到塊級元素并沒有從左到右撐滿頁面，那是因為瀏覽器通常會給標簽賦予默認的樣式
內聯元素（也稱行內元素，inline）
- 內聯元素特點：
- 和其它元素都在一行上，不會改變HTML文檔結構
- 元素的高度、寬度及頂部和底部填充、邊距不可設置（左右填充
padding-left``padding-right及左右間距margin-left``margin-right是可以設置的）。但如果設置了頂部、底部的填充、間距，對行內元素的邊框、背景色會有影響
- 元素的寬度就是它包含的文字或圖片的寬度，不可改變
<style type="text/css">
* {
padding: 0;
margin: 0;
}
p {
height: 50px;
background-color: pink;
}
span {
padding: 25px;
margin: 25px;
border: 1px solid red;
background-color: lightgreen;
}
</style>
</head>
<body>
<p>block-1</p>
<span>inline-1</span><span>inline-2</span>
<p>block-2</p>
</body>
- 設置
display: inline就是將元素顯示為內聯元素
- 例如
div {display: inline;}代碼就是將塊狀元素div轉換為內聯元素，從而使div元素具有內聯元素特點
- 注意：
- 盒子模型，意思是指具備內容、填充、邊框、邊界這些屬性，行內元素也擁有，所以具備盒子模型的特征，但是默認情況下是無法對寬度、高度以及頂部、底部的填充、間距進行設置的，需要設置
display:block;，改變行內元素以塊狀元素呈現，從而進行設置
- 塊狀元素可以包含行內元素和塊狀元素，行內元素只能包含文本和行內元素。但是在HTML5中，由于使用了內容模型，
<a>元素也可以包含塊級元素
<style type="text/css">
* {padding: 0; margin: 0;}
a h4 {
width: 100px;
height: 50px;
background-color: lightblue;
}
a p {
height: 50px;
background-color: lightgreen;
}
</style>
</head>
<body>
<a href="#">
<h4>Headline text</h4>
<p>Paragraph text</p>
</a>
</body>
內聯元素之間的間距問題
- 當行內元素之間有“回車”、“tab”、“空格”時就會出現間隙
- 解決辦法：
- 寫在一行，之間不要有空格之類的符號
- 使用
font-size，設置內聯元素的父元素字體大小為 0，然后設置內聯元素字體大小。如下
// 舉例
<title>行內元素</title>
<style type="text/css">
body {
font-size: 0px;
}
a, span, em {
background: pink; /*設置a、span、em標簽背景顏色都為粉色*/
font-size: 16px;
}
</style>
</head>
<body>
<a >百度</a>
<a >慕課網</a>
<span>33333</span>
<span>44444</span><em>555555</em> // 寫在一行
</body>
內聯塊狀元素（inline－block）
- 內聯塊狀元素就是同時具備內聯元素、塊狀元素的特點，代碼
display: inline-block就是將元素設置為內聯塊狀元素（CSS2.1新增）
- 內聯塊狀元素特性：
- 默認不占據一行，默認寬度為內容寬度
- 設置的上下 padding、margin、border 占據文檔空間
- 水平排列按照 base-line 對齊，且元素之間會存在一個“空”元素的縫隙
- 可以用 vertical-align 設置垂直對齊
- 可以設置 text-align 屬性有效
- 會形成一個BFC（塊級格式化上下文）
- 總結：一個擁有正常盒模型的行內元素，既擁有 inline 的特點，也有 block 的特性
- 如何去除縫隙？
- 修改 html 不換行
- 父元素設置
font-size: 0;
- 設置負margin值
- 元素設置浮動
- 高度不一致的 inline-block 的對齊，設置 vertical-align ，比如頂端對齊
vertical-align: top;
如何實現瀏覽器兼容版的inline-block顯示？
-
display:inline-block;在IE6、IE7下只有設置在默認顯示方式為inline的元素上才會生效，該如何實現兼容IE6、IE7的通用的方式？
- IE6、IE7支持對HTML行內元素設置
inline-block。實際上只是看起來支持而已，IE6、IE7并不識別inline-block這個屬性值，只是觸發了layout，讓行內元素有了inline-block的表征，比如說：行內顯示且可設置寬高等等。而對HTML塊級元素設置inline-block，也只是觸發了layout，對塊級元素設置行內塊級屬性的目的沒有達到。
- 那么在IE6、IE7下，怎么實現塊級元素的
inline-block屬性值設置呢？
- 常見有2種方法：
- 1.先使用
display:inline-block;屬性觸發塊元素，然后再定義display:inline，讓塊元素呈遞為行內對象（兩個display要先后放在兩個CSS聲明中才有效果，這是IE的一個經典bug，如果先定義了display:inline-block;然后再將display設回inline或block，layout不會消失），代碼如下：
div {display:inline-block;}
div {display:inline;}
- 2.直接讓塊元素設置為行內對象呈遞（設置屬性
display:inline），然后觸發塊元素的layout（如：zoom:1 或float屬性等），代碼如下：
div { display:inline-block; _zoom:1; _display:inline;} /* 推薦IE6 */
div { display:inline-block; *zoom:1; *display:inline;} /* 推薦IE6或IE7 */
inline-block底部空隙
- inline-block元素在塊級元素中留空隙就是因為圖像的默認垂直對齊方式是基線對齊（基線對齊在原理上圖像底邊與匿名文本大寫英文字母X的底邊對齊）；而匿名文本是有行高的，所以X的底邊距離行框有一段距離，這段距離就是圖像留出的空隙
- 解決這個問題有以下幾個解決辦法：
-
display: block; ：因為垂直對齊方式只能作用于替換元素和行內元素，更改為塊級元素，會使垂直對齊方式失效
- 父級的
line-height: 0;：這樣使匿名文本與行框的距離為0
vertical-align: top/middle/bottom;
<style type="text/css">
/*
使用 inline-block 元素的時候，常會遇到兩個 bug：
1. 兩個inline-block 元素之間如果有空格、回車、tab，那么在頁面上就有一個空隙
解決辦法：將父元素的 font-size 設置為 0，然后在 inline-block 元素中將 font-size 設置為需要的大小
2. 兩個不同高度的 inline-block 元素無法對齊，或者下面無緣無故多出幾像素
解決辦法：改變 inline-block 元素的 vertical-align，一般改為 top 或 middle
*/
.box {
font-size: 0;
background-color: lightblue;
}
.box > img {
vertical-align: top;
width: 100px;
}
</style>
</head>
<body>
<div class="box">
<\img src="http://t.388g.com/uploads/allimg/160412/4-160412123F3.jpg">
<\img style="width: 140px" src="http://t.388g.com/uploads/allimg/160412/4-160412123F3.jpg">
</div>
</body>
盒模型－寬度和高度（width、height）
- 盒模型寬度和高度和我們平常所說的物體的寬度和高度理解是不一樣的，css內定義的寬（width）和高（height），指的是填充里的內容范圍
- 因此一個元素實際寬度（盒子的寬度）= 左邊界
margin-left＋左邊框border-left＋左填充padding-left＋內容寬度width＋右填充padding-right＋右邊框border-right＋右邊界margin-right
-
width／height可設置的屬性值：
-
auto：默認值，瀏覽器可計算出實際的寬度／高度
-
length：使用px、cm等單位定義寬度／高度
-
%：定義基于包含塊（父元素）寬度的百分比寬度／高度
-
inherit：從父元素繼承width／height屬性的值
- 應用于塊狀元素和內聯塊狀元素。無繼承性
- 引申：
-
max-width：設置元素的最大寬度（不包括填充、邊框或頁邊距）
-
min-width：設置元素的最小寬度（不包括填充、邊框或頁邊距）
-
max-height：設置元素的最大高度（不包括填充、邊框或頁邊距）
-
min-height：設置元素的最小高度（不包括填充、邊框或頁邊距）
- 當最小寬度（高度）大于最大寬度（高度）時，以最小寬高的值為準
- 應用于塊狀元素和內聯塊狀元素。無繼承性
關于Div的寬度與高度的100%設定
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-color: #ccc;
}
/*這里為什么不是我們預想的那樣，.container 高度并沒有充滿父元素 body*/
/*事實上，由于 .container 中沒有內容，我們都看不到它*/
.container{
height: 100%;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
- div的100%是從其上一級div的寬高繼承來的，有一點很關鍵，就是要設置div100%顯示，必須設置其上一級div的寬度或高度，否則無效。舉例說明：父div(deman)寬300高200，子div(cc)如果在這個條件下設置divcc的寬高都為100%的話，那cc的確切大小就是父div的大小（寬300高200），在嘗試中我們還會發現，div顯示會受自身和其上一級div的
padding和margin影響，而其實際寬高不受影響
- 前面總得有個容器說明它的高度是多少。這樣的話div才能按比例100%繼承上一級的高度。可惜的是瀏覽器一般默認解釋為內容的高度，而不是100%。但是只要為html和body設置高度為100%就可以了：
html,body{ height:100%; }，這樣之后div會按比例來繼承上一級的高度了，僅僅設置的div元素的height: 100%;沒有效果
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*有一點需要注意的是，html 元素默認寬度是100%，即整行；但是高度并不是100%，而僅僅是一行而已*/
/*所以要想實現撐滿整個頁面，必須顯式地設置高度為100%*/
html, body, .container{
height: 100%;
}
body{
background-color: #ccc;
}
.container{
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
盒模型－填充（padding）
- 元素內容與邊框之間是可以設置距離的，稱之為填充。填充也可以分為上、右、下、左（順時針），該屬性可以有1到4個值
// 順序一定不要搞混
div {padding: 20px 10px 15px 30px;}
// 分開寫，如下
div {
padding-top: 20px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 30px;
}
// 如果上、右、下、左的填充都為10px，可以這樣寫
div {padding:10px;}
// 如果上下填充一樣為10px，左右一樣為20px，可以這樣寫
div {padding:10px 20px;}
// 如果上填充是10px，左右一樣為20px，下填充為5px，可以這樣寫
div {padding:10px 20px 5px;}
- 可以設置的值包括：
-
length：規定以具體單位計的填充值，比如像素、厘米等。默認值是 0px
-
%：基于父元素的寬度的百分比的填充
-
inherit：從父元素繼承 padding值
- 應用于所有元素。無繼承性
- 注意：
- 對于行內元素，左內邊距應用到元素的開始處，右內邊距應用到元素的結尾處，上下內邊距不影響行高
- 負值是不允許的
.box a{display: inline-block; width: 50px; height: 25px; padding-top: 40px;｝
// 如上，padding的設置會影響元素實際的顯示效果，瀏覽器中顯示 a 元素對象的高為 65px，但實際上，a的height還是為 25px
盒模型－邊框（border）
- 邊框是一條以空格分隔的集合樣式，包括邊框粗細（邊框寬度）、邊框顏色和邊框樣式，且先后順序無關
border: border-width border-color border-style
border: 1px solid red;
// border-width：設置一個元素的四個邊框的寬度。此屬性可以有一到四個值
// 可設置的屬性值包括：this（細的邊框）、medium（默認值。中等的邊框）、thick（定義粗的邊框）、length（自定義邊框的寬度）、inherit
border-width: thin medium thick 10px;
// 邊框的寬度不能為負，不能指定為百分比值
// border-style：設置一個元素的四個邊框的樣式。此屬性可以有一到四個值
// 如果一個邊框沒有樣式，邊框將根本不會存在
// 可設置的屬性值包括：none（定義無邊框）、hidden（與 “none” 相同。不過應用于表格時除外，對于表格，hidden 用于解決邊框沖突）、dotted（點狀邊框）、dashed（虛線）、solid（實線）、double（雙線。雙線的寬度等于 border-width 的值）、groove（ 3D 凹槽邊框。其效果取決于 border-color 的值）、ridge（3D 壟狀邊框。其效果取決于 border-color 的值）、inset（3D inset 邊框。其效果取決于 border-color 的值）、outset（3D outset 邊框。其效果取決于 border-color 的值）、inherit
border-style: dotted solid double;
// border-color：設置一個元素的四個邊框顏色。此屬性可以有一到四個值
// 可設置的屬性值包括：color（通常設為十六進制顏色）、transparent（指定邊框的顏色應該是透明的）、inherit
// 默認的邊框顏色是元素本身的前景色，即元素的文本顏色；如果元素沒有任何文本，則邊框顏色是其父元素的文本顏色
// 但是，在表格中，若只設置 border-style，而不設置 border，則邊框顏色為黑色，而不與文本顏色相同
// border-style 屬性要聲明到 border-color 屬性之前。元素必須在改變其顏色之前獲得邊框
border-color: red green;
// 如下面代碼為 div標簽來設置邊框粗細為2px、樣式為實心的紅色邊框
div {
border:2px solid red;
}
上面是border代碼的縮寫形式，也可以分開寫成
div {
border-width: 2px;
border-style: solid;
border-color: red;
}
// border屬性除了可以設置上面的三個屬性值，還可以設置 inherit（指定應該從父元素繼承border屬性值）
// 縮寫：下面這三種屬性都是可以縮寫的，順序依次為 上、右、下、左
border-width: 1px 2px 3px 4px;
border-style: dashed dotted solid double;
border-color: red orange yellow green;
// 注意：boder 它是 border-width、border-style、border-color的縮寫形式，針對的是上、右、下、左四個方向的邊框，并不能單獨為各個方向設置邊框樣式
border-top/border-right/border-bottom/border-left
border-width:
border-top-width border-right-width
border-bottom-width border-left-width
border-style:
border-top-style border-right-style
border-bottom-style border-left-style
border-color：
border-top-color border-right-color
border-bottom-color border-left-color
border-colors:<color><color>……
border: 10px solid black;
-moz-border-top-colors: red green;
-moz-border-right-colors: green yellow;
-moz-border-bottom-colors: yellow blue;
-moz-border-left-colors: blue red;
// 只有firefox支持，需要加 -moz- 前綴，且只能四條邊分開寫，否則無效
- 注意：
- 邊框繪制在元素背景之上（有兼容問題）
- 同一元素的邊框相交處是斜線
- 可以用邊框實現三角形
- 行內元素的上下邊框由于不影響行高，不影響布局；左右邊框會影響布局
盒模型－邊界（margin）
- 設置外邊距 margin 會在元素外創建額外的空白，空白通常指不能放其他元素的區域，而且在這個區域中可以看到父元素的背景。邊界也可以分為上、右、下、左（順時針）
- 填充（padding）與邊界（margin）的區別：padding在邊框里，margin在邊框外
// 順序一定不要搞混
div{margin:20px 10px 15px 30px;}
// 分開寫，如下
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
// 如果上、右、下、左的邊界都為10px，可以這樣寫
div{margin:10px;}
// 如果上下邊界一樣為10px，左右一樣為20px，可以這樣寫
div{margin:10px 20px;}
// 如果上邊界是10px，左右一樣為20px，下邊界為5px，可以這樣寫
div{margin:10px 20px 5px;}
- 可以設置的值包括：
-
auto：瀏覽器計算外邊距
-
length：規定以具體單位計的外邊距值，比如像素、厘米等。默認值是 0px
-
%：基于父元素的寬度的百分比的外邊距
-
inherit：從父元素繼承 margin值
- 應用于所有元素。無繼承性
- 注意：
- 外邊距可以應用到行內元素，上下外邊距對行高沒有任何影響。由于上下外邊距實際上是透明的，所以這個聲明沒有任何視覺效果。左外邊距應用到元素開始處；右外邊距應用到元素結束處
- 負值是允許的
- 相鄰元素（毗鄰元素）的的邊界會被合并（以值大的為準），更多詳見：MDN 外邊距合并
引申
// border-radius 圓角邊框：是一個最多可指定四個 border -*- radius 屬性的復合屬性。每個半徑的四個值的順序是：左上角，右上角，右下角，左下角（順時針）
// 語法： border-radius: <length>{1,4}[/<length>{1,4}]?
// 實例：
border-radius: 10px; // 注意：設置的是圓角直徑
border-radius: 10px 20px; // 如果沒有反斜杠則水平和垂直方向相等。這里表示左上角和右下角圓角半徑為10px，右上角和左下角半徑為20px
border-radius: 10px/20px; // 如果反斜杠存在，前面的值是水平方向的半徑，后面的值是垂直方向的半徑。這里表示四個圓角的半徑均為 10px/20px
// 圓角單角：
// border-top-left-radius / border-top-right-radius / border-bottom-right-radius / border-bottom-left-radius
border-top-left-radius: 10px 20px; // 圓角根據水平方向的半徑和豎直方向的半徑來確定。注意：寫圓角單角時不可加反斜杠 /
// 可設置的屬性值包括：none（默認）、length（可以是具體值，也可以是百分比，但不是負數）
// border-radius 是否生效與是否設置了邊框 border 無關
// 重置 border-radius 沒有圓角，使用 none 無效，需要取值 0
// border-radius對 <img> 沒有任何效果
// 兼容性：IE8-不支持
// 內徑外徑：border-radius內徑 = 外徑 - 對應的邊框寬度。當border-radius半徑值小于等于邊框寬度時，元素沒有內徑效果
// 特殊圖形：
// 圓形：元素的寬高相同，且圓角半徑為寬高的一半
div{
width: 100px;
height: 100px;
border-radius: 50%;
}
// 半圓：元素寬高不同，且圓角半徑與寬高要配合
div{
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0;
}
// 扇形：元素寬高及一個圓角半徑相同
div{
width: 50px;
height: 50px;
border-radius: 50px 0 0 0;
}
// 橢圓：元素寬高不同，且水平和垂直半徑分別對應寬高
div{
width: 120px;
height: 80px;
border-radius: 120px/80px;
}
// border-image 邊界圖片：速記屬性
// 語法：
border-image: none; // 默認
border-image: border-image-source || border-image-slice [ / border-image-width? | / border-image-outset ]? || border-image-repeat;
// 兼容性：IE10-不支持
// 該屬性的作用是用來替代 border-style 的，若 border-image 為 none，則顯示border-style 的值
// 實例：
border-image: url('img.img') 27 fill / 27 / 27px repeat;
// border-image-source：邊框的圖片路徑
border-image-source:url('test.img');
// border-image-slice：圖片邊框四條切割線的位置
border-image-slice: <number> | <percentage> fill
// 不給寫單位，具體值默認單位是 px
// 四值方向是上右下左，代表切割線的方向，切割的分別是高寬高寬
// 圖片邊框是在邊框范圍內顯示的，若邊框寬度不等于slice切片值，則圖片邊框會按比例放大縮小，以使圖片邊框正好顯示在邊框范圍內
// 若slice值為負，或大于盒子的寬度或高度會被100%，四個角將顯示整個背景圖片
// 若右切和左切大于盒子寬度，則上中和下中部分為空；若上切和下切大于盒子高度，則左中和右中部分為空
// border-image-width：邊框寬度
border-image-width: <length> | <percentage> | <number> | auto
// 若指定則邊框圖片寬度由該值確定，否則由盒子的邊框寬度來確定
// 可以用具體像素、數字(表示幾倍)以及百分比來表示
// 遵循四值順序
// border-image-outset：邊框圖像區域超出邊框的量
border-image-outset: 0; // 默認
border-image-outset: <length> | <number>
// 可以用具體像素和數字(表示幾倍)來表示
// 遵循四值順序
// border-image-repeat：邊框圖片的排列方式
border-image-repeat: stretch(拉伸，默認值) | repeat(重復) | round(平鋪) [1,2]
// 第一個值表示水平方向的排列方式，第二個值表示垂直方向的排列方式
// repeat 是邊框中間向兩端平鋪，可能造成兩端邊緣被切的現象
// round會對邊框背景圖的切片進行縮放，使其正好顯示
// 輪廓outline處在邊框邊界的外面，它不像邊框那樣參與到文檔流中，因此輪廓出現或消失時不會影響文檔流，即不會導致文檔的重新顯示。利用輪廓，瀏覽器可以合并部分輪廓，創建一個連續但非矩形的形狀。默認地，輪廓是一個動態樣式，只有元素獲取到焦點或被激活時呈現
// outline 輪廓：輪廓 outline 類似于邊框樣式的 border 屬性，允許一次完成輪廓樣式、寬度和顏色的設置
// 由于給定輪廓必須采用某種統一的樣式、寬度和顏色，所以 outline 是關于輪廓的唯一簡寫屬性
// 對于輪廓沒有諸如 outline-top 或 outline-right 之類的屬性
// outline中并沒有包括outline-offset，需要對outline-offset進行單獨設置
// 語法：
outline: [<outline-color> || <outline-style> || <outline-width>] | inherit
// 無初始值
// 兼容性：IE7-瀏覽器不支持
// 應用于所有元素，無繼承性
// 實例：
outline: green dotted thick;
// 注意：outline不是元素尺寸的一部分，因此元素的寬度和高度屬性不包含輪廓的寬度。
// outline 和 box-shadow 一樣不會占據文檔流空間
/*
輪廓樣式
outline-style: none（默認） | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit（與邊框不同的是，值少了一個 hidden）
應用于所有元素，無繼承性
輪廓寬度
與邊框類似，輪廓寬度不能為負數，也不能指定為百分比值
outline-width: thin | medium（默認） | thick | <length> | inherit
應用于所有元素，無繼承性
如果輪廓的樣式是 none，則輪廓寬度計算值為 0
初始值: invert（IE）、前景色（其它瀏覽器）
應用于所有元素，無繼承性
輪廓顏色
與邊框不同，輪廓顏色有關鍵字 invert 反色輪廓，代表對輪廓所在的像素完全反色轉換，使輪廓在不同的背景顏色中都可見
但實際上invert關鍵字只有IE瀏覽器支持，其它瀏覽器的輪廓顏色是元素本身的前景色
outline-color: <color> | invert | inherit
輪廓偏移
輪廓偏移用來定義輪廓的偏移位置的數值。當參數值為正數時，表示輪廓向外偏移；當參數值為負值時，表示輪廓向內偏移
outline-offset: length | inherit
默認值為 0
應用于所有元素，無繼承性
兼容性：IE瀏覽器不支持
*/
// box-shadow 盒陰影：可設置一個或多個下拉陰影的框，該屬性是一個用逗號分隔陰影的列表（即可疊加，形成多陰影），每個陰影由 2-4 個長度值、一個可選的顏色值和一個可選的 inset 關鍵字來規定。省略長度的值是 0。
box-shadow: none; // 默認
box-shadow: 10px 10px 4px 3px #ccc; // 外陰影，此例中各個參數分別代表：水平偏移（必需）、垂直偏移（必需）、模糊半徑（可選）、陰影大小（可選）、陰影顏色（可選，默認和文本顏色一致）
box-shadow: inset 0px 0px 4px #red; // 內陰影
// 注意：陰影只是一種修飾，不占用空間
// 可以使用多重陰影，但使用過多會造成性能差
// 最先寫的陰影在最頂層
// 邊框在內陰影之上，內陰影在背景圖片之上，背景圖片在背景色之上，背景色在外陰影之上
// 內陰影對 <img> 元素沒有任何效果
// 該屬性與 border-radius 一脈相承，若通過 border-radius 設置為圓角，則 box-shadow 的最終呈現也將是圓角
// 模擬邊框
border: 1px solid #000;
box-shadow: 0 0 0 1px #000;
// 在W3C的標準模型下，寬度和高度僅僅包含了內容寬度，除去了邊框和內邊距兩個區域，這樣為web設計師處理效果帶來了不少麻煩
// box-sizing：CSS3新增了一個盒模型屬性box-sizing，能夠事先定義盒模型的尺寸解析方式（設置width、height指定的區域）
box-sizing: border-box; // 此時給元素設置的寬度除了原先的內容 content，還包括填充 padding 以及邊框 border
// 可設置的屬性值包括：content-box（默認值。這是CSS2.1指定的寬度和高度的行為。指定元素的寬度和高度（最小/最大屬性）適用于box的寬度和高度。元素的填充和邊框布局和繪制指定寬度和高度除外）、border-box（指定寬度和高度（最小/最大屬性）確定元素邊框box。也就是說，對元素指定寬度和高度包括 padding 和border 的指定。內容的寬度和高度減去各自雙方該邊框和填充的寬度從指定的“寬度”和“高度”屬性計算）、inherit
// 應用于塊級元素和內聯塊狀元素。無繼承性
// 兼容性：IE7-瀏覽器不支持
// 只有firefox瀏覽器支持 padding-box 屬性值
// IE瀏覽器在 getComputedStyle 得到 width/height 是按照標準模式計算的，而不論 box-sizing 的取值
