1. 盒模型包括哪些屬性钧排？
盒模型是CSS中一個重要概念，文檔中的每個元素被描繪為矩形盒子。渲染引擎的目的就是判定大小兽间，屬性。盒模型屬性有：
- margin：外邊距
- padding：內邊距
- border：邊框
- content：內容
boxmodel.png
內容區(qū)content-area：包含元素內容的區(qū)域正塌，元素本身有一定的大小嘀略，占用的就是該空間大小，
width和height屬性可以調節(jié)內容區(qū)域的寬和高乓诽。盒模型的寬和高：margin+padding+border+width/height帜羊，
如果
box-sizing:設置為border-box，則元素的width和height決定了盒模型寬高鸠天。就是說讼育，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制，通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度稠集。即：content-width=padding+border+content-width.應用范圍：適用于塊級元素和inline-block元素奶段，而行內元素雖然在水平方向可以設置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作用于塊級元素蓉坎，使塊級元素內部的文本或者圖片等行內元素水平居中顯示澳眷。
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網站上查看。
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:設置為border-box，則元素的width和height決定了盒模型寬高笤成。就是說评架，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制，通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度炕泳。即：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
