一.盒模型包括哪些屬性？
盒模型包括的屬性有：
- margin：外邊距。它包括margin-top、margin-right、margin-buttom、margin-left。margin的最基本用途就是控制元素周圍空間的間隔,它永遠是透明的。
- border：邊框。它包括border-top、border-right、border-buttom、border-left。
- padding：內邊距。它包括padding-top、padding-right、padding-buttom、padding-left。padding是用來使元素與內容有一定的間隔。
- content。
在網頁中，每個元素都被認為是一個矩形的盒子。
盒模型
如果要它顯示你設計的寬高大小，使用命令box-sizing: border-box;，這樣有的時候會便于計算。
這里需要強調一下：
1.對于行內元素，手動設置寬高是無效的，它本身的寬高是由自身決定的。
2.行內元素可以設置margin、padding，但是只有水平方向，也就是左右方向的margin和padding是有效的，垂直方向，也就是上下方向的margin和padding是無效的。而如果上下padding如果設置邊框或者背景色，會把邊框和背景色撐開。但是它本身并不會擠占空間，這樣的話可能會出現一個覆蓋的問題。
二.邊距合并
外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。但是注意只有普通文檔流中塊框的垂直外邊距才會發生外邊距疊加。行內框、浮動框或絕對定位框之間的外邊距不會合并。設置了display:inline-block的元素，垂直margin不會被合并
一般來說， 垂直外邊距合并有三種情況：
- 元素自身合并。當元素沒有內容（即空元素）、內邊距、邊框時， 它的上下邊距就會相遇了， 即會產生合并（垂直方向）。 如果為元素添加內容、 內邊距、 邊框其中的任何一項， 都會取消合并。
- 元素合并相鄰元素（兄弟合并），如果它們的上下邊距相遇，即會產生合并。
- 包含元素合并（父子合并）。包含元素的外邊距隔著父元素的內邊距和邊框，當這兩項都不存在的時候，父子元素垂直外邊距相鄰，產生合并。 添加任何一項即會取消疊加。
三.text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中。
text-align: center的用于塊級元素，比如說一個div或者段落上，使塊級元素內部的行內元素水平居中。這個所謂的居中是針對自己的父容器,可以參考下面的示例。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>盒模型</title>
<style>
.box1{
width: 100px;
height: 100px;
border: 3px solid;
margin: 20px;
padding: 20px;
}
.box2{
width: 50px;
height: 50px;
border: 3px solid;
margin: 5px;
padding: 5px;
background: red;
text-align: center;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<a href="#">Link</a>
</div>
</div>
</body>
</html>
四.如果遇到一個屬性想知道兼容性，在哪查看?
想要知道一個屬性的兼容性，可以在Can I Use上面查看。
比如說輸入text-align，就可以知道它的兼容性。
五.IE 盒模型和W3C盒模型有什么區別?
IE盒模型并不只是設置的內容寬高大小，還要包括border和padding；W3C盒模型只是內容寬高的大小。
-
ie678怪異模式（不添加 doctype）使用 ie 盒模型，寬度=邊框+padding+內容寬度。
IE 盒模型 -
chrome， ie9+, ie678(添加 doctype) 使用標準盒模型， 寬度= 內容寬度。
標準盒模型
六.以下代碼的作用？兼容性？
*{ box-sizing: border-box;
}
box-sizing是定義元素盒尺寸大小的方式。它的屬性值可以為content-box、padding-box、border-box、inherit。
-
box-sizing: content-box;這是盒模型默認值，也就是上面提到的標準盒模型。計算方法為width/height=content，表示指定的寬度和高度僅限內容區域，邊框和內邊距的寬度不包含在內。 -
box-sizing: padding-box;計算方法為width/height=content+padding，表示指定的寬度和高度包含內邊距和內容區域，邊框寬度不包含在內。 -
box-sizing: border-box;計算方法為width/height=content+padding+border，表示指定的寬度和高度包含邊框、內邊距和內容區域。這就是上面提到的IE盒模型。 -
box-sizing: inherit;繼承父元素中box-sizing屬性的值。
為了說明，來舉個例子。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>盒子尺寸的計算方法</title>
<style type="text/css">
div {
margin:5px;
width:200px;
height:80px;
background-color: red;
border:10px solid;
padding:10px;
font-weight:bold;
font-size:18px;
line-height:40px;
}
.s1 {
box-sizing:border-box;
.s2 {
box-sizing:padding-box;
}
.s3 {
box-sizing:content-box;
}
</style>
</head>
<body>
<div class="s1">border-box</div>
<div class="s2">padding-box</div>
<div class="s3">content-box</div>
</body>
</html>
但是由于webkit內核的瀏覽器不支持屬性值padding-box，故表現出默認的content-box效果。
再來回到題目當中，“*”表示選中所有的元素，box-sizing使用的計算方法為border-box，它使頁面所有元素使用content里包括border、padding的盒模型，也就是采用IE盒模型。
舉個例子。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>盒模型</title>
<style>
.box{
width: 100px;
height: 100px;
border: 3px solid;
margin: 20px auto;
padding: 20px;
background: yellow;
}
*{
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
經過審查元素，就可以看到它顯示的總尺寸就是設置content的寬高。
它的兼容性可以在Can I Use上面查看。
七.代碼
寫一個 btn 的class， 任何 a，span，div，button添加此class后后變成如下按鈕的樣式（鼠標hover背景色#c14d21，鼠標按下背景色#e25f31）。
<a class="btn" href="#">確定</a>
<span class="btn" >取消</span>
<div class="btn">提交</div>
<button class="btn"> 發送</button>
代碼的github地址：Github
預覽效果
