1. 盒模型包括哪些屬性？
盒模型是CSS中一個重要概念，文檔中的每個元素被描繪為矩形盒子。渲染引擎的目的就是判定大小，屬性。盒模型屬性有：
- margin：外邊距
- padding：內(nèi)邊距
- border：邊框
- content：內(nèi)容
boxmodel.png
內(nèi)容區(qū)content-area：包含元素內(nèi)容的區(qū)域，元素本身有一定的大小，占用的就是該空間大小，
width和height屬性可以調(diào)節(jié)內(nèi)容區(qū)域的寬和高。盒模型的寬和高：margin+padding+border+width/height，
如果
box-sizing:設(shè)置為border-box，則元素的width和height決定了盒模型寬高。就是說，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進行繪制，通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。即：content-width=padding+border+content-width.應用范圍：適用于塊級元素和inline-block元素，而行內(nèi)元素雖然在水平方向可以設(shè)置margin和padding，且垂直方向能用padding，但是不屬于盒模型的概念，如果要應用，則需要借助CSS的display屬性。
外邊距合并：當相鄰的兩個盒模型上下緊鄰的時候，會選擇margin值較大的作為外邊距，即合并兩個外邊距取大值。而左右外邊距不合并。如圖所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
* {
box-sizing: border-box; /* 以邊框作為界限，方便計算 */
}
.container1 {
border: 5px solid black;
width: 100px;
height: 100px;
padding: 10px;
background-color: red;
text-align: center;
vertical-align: middle;
margin: 30px;
}
.container2 {
border: 5px solid black;
width: 100px;
height: 100px;
padding: 10px;
background-color: red;
margin:40px;
}
.child {
border: 1px solid white;
width: 60px;
height: 60px;
background-color: #eee;
text-align: center;
vertical-align: middle;
margin: 0 auto;
display: table-cell;
}
</style>
</head>
<body>
<div class="container1">
<div class="child">
<a href="#">link</a>
</div>
</div>
<div class="container2">
</div>
</body>
</html>
效果圖：
margin上下合并.png
注意：當我給container1加一個
display: inline-block屬性，則由于兩者顯示類型的不同，雖然和盒模型類似，但是margin外邊距不會合并。如圖所述：
.container1 {
border: 5px solid black;
width: 100px;
height: 100px;
padding: 10px;
background-color: red;
text-align: center;
vertical-align: middle;
margin: 30px;
display: inline-block; /* 加上這個屬性，margin不合并 */
}
Paste_Image.png
2. text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中?
text-align: center作用于塊級元素，使塊級元素內(nèi)部的文本或者圖片等行內(nèi)元素水平居中顯示。
eg：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
.div1 {
text-align: center;
}
div,p {
border: 1px solid silver;
}
</style>
</head>
<body>
<div class="div1">
啦啦啦啦啦啦啦啦
<p>
這是一段測試文本。
</p>
<div class="div2">
<p>
測試文本2。
</p>
</div>
</div>
</body>
</html>
效果圖：
text-align.png
3. 如果遇到一個屬性想知道兼容性，在哪查看?
在can i use網(wǎng)站上查看。
caniuse.png
4. IE 盒模型和W3C盒模型有什么區(qū)別?
W3C盒模型&IE盒模型.gif
如圖所示，W3C盒模型的width指的是content區(qū)，而IE盒模型width指的是content+padding+border。
早期的IE（5.5版本）用的是IE盒模型，而從IE6開始，只要在文檔中聲明（添加doctype）則，兼容使用W3C盒模型。
如果IE678未添加doctype，即怪異模式，那么也是用IE模型。
從IE9以后，則不用填寫聲名也用的是W3C模型。
補充：
所有的盒模型，只要沒有添加doctype，都處于怪異模式，但此時，只有ie678使用ie盒模型，其他的雖然處于怪異模式，但仍舊使用標準模型，其實與普通模式效果相同,怪異模式是在ie6時代為了兼容ie5以及以前版本的瀏覽器保留的 現(xiàn)在實際使用中都使用標準模式添加doctype。
5. 以下代碼的作用？兼容性？
*{
box-sizing: border-box;
}
box-sizing:設(shè)置為border-box，則元素的width和height決定了盒模型寬高。就是說，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進行繪制，通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。即：width=padding+border+content。
如圖所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
* {
box-sizing: border-box;
}
.container1 {
border: 5px solid black;
width: 100px;
height: 100px;
padding: 10px;
background-color: red;
text-align: center;
vertical-align: middle;
margin: 60px;
}
</style>
</head>
<body>
<div class="container1">
</div>
</body>
</html>
效果圖：
box-sizing: border-box
