一.盒模型包括哪些屬性舔清？
盒模型包括的屬性有：
- margin：外邊距炫彩。它包括margin-top对途、margin-right改执、margin-buttom啸蜜、margin-left。margin的最基本用途就是控制元素周圍空間的間隔,它永遠是透明的辈挂。
- border：邊框衬横。它包括border-top、border-right终蒂、border-buttom蜂林、border-left遥诉。
- padding：內(nèi)邊距。它包括padding-top噪叙、padding-right矮锈、padding-buttom、padding-left睁蕾。padding是用來使元素與內(nèi)容有一定的間隔苞笨。
- content。
在網(wǎng)頁中子眶，每個元素都被認為是一個矩形的盒子瀑凝。
盒模型
如果要它顯示你設計的寬高大小，使用命令box-sizing: border-box;臭杰，這樣有的時候會便于計算粤咪。
這里需要強調(diào)一下：
1.對于行內(nèi)元素，手動設置寬高是無效的硅卢，它本身的寬高是由自身決定的射窒。
2.行內(nèi)元素可以設置margin、padding将塑，但是只有水平方向脉顿，也就是左右方向的margin和padding是有效的，垂直方向点寥，也就是上下方向的margin和padding是無效的艾疟。而如果上下padding如果設置邊框或者背景色，會把邊框和背景色撐開敢辩。但是它本身并不會擠占空間蔽莱，這樣的話可能會出現(xiàn)一個覆蓋的問題。
二.邊距合并
外邊距合并指的是戚长，當兩個垂直外邊距相遇時盗冷，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者同廉。但是注意只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距疊加仪糖。行內(nèi)框、浮動框或絕對定位框之間的外邊距不會合并迫肖。設置了display:inline-block的元素锅劝，垂直margin不會被合并
一般來說， 垂直外邊距合并有三種情況：
- 元素自身合并蟆湖。當元素沒有內(nèi)容（即空元素）故爵、內(nèi)邊距、邊框時隅津， 它的上下邊距就會相遇了诬垂， 即會產(chǎn)生合并（垂直方向）劲室。 如果為元素添加內(nèi)容、 內(nèi)邊距剥纷、 邊框其中的任何一項痹籍， 都會取消合并呢铆。
- 元素合并相鄰元素（兄弟合并）晦鞋，如果它們的上下邊距相遇，即會產(chǎn)生合并棺克。
- 包含元素合并（父子合并）悠垛。包含元素的外邊距隔著父元素的內(nèi)邊距和邊框，當這兩項都不存在的時候娜谊，父子元素垂直外邊距相鄰确买，產(chǎn)生合并。 添加任何一項即會取消疊加纱皆。
三.text-align: center的作用是什么湾趾，作用在什么元素上？能讓什么元素水平居中派草。
text-align: center的用于塊級元素搀缠，比如說一個div或者段落上，使塊級元素內(nèi)部的行內(nèi)元素水平居中近迁。這個所謂的居中是針對自己的父容器,可以參考下面的示例艺普。
<!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盒模型有什么區(qū)別?
IE盒模型并不只是設置的內(nèi)容寬高大小瑰步，還要包括border和padding；W3C盒模型只是內(nèi)容寬高的大小璧眠。
-
ie678怪異模式（不添加 doctype）使用 ie 盒模型缩焦，寬度=邊框+padding+內(nèi)容寬度。
IE 盒模型 -
chrome蛆橡， ie9+, ie678(添加 doctype) 使用標準盒模型舌界， 寬度= 內(nèi)容寬度。
標準盒模型
六.以下代碼的作用泰演？兼容性呻拌？
*{ box-sizing: border-box;
}
box-sizing是定義元素盒尺寸大小的方式。它的屬性值可以為content-box睦焕、padding-box藐握、border-box靴拱、inherit。
-
box-sizing: content-box;這是盒模型默認值猾普，也就是上面提到的標準盒模型袜炕。計算方法為width/height=content，表示指定的寬度和高度僅限內(nèi)容區(qū)域初家，邊框和內(nèi)邊距的寬度不包含在內(nèi)偎窘。 -
box-sizing: padding-box;計算方法為width/height=content+padding，表示指定的寬度和高度包含內(nèi)邊距和內(nèi)容區(qū)域溜在，邊框?qū)挾炔话趦?nèi)陌知。 -
box-sizing: border-box;計算方法為width/height=content+padding+border，表示指定的寬度和高度包含邊框掖肋、內(nèi)邊距和內(nèi)容區(qū)域仆葡。這就是上面提到的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內(nèi)核的瀏覽器不支持屬性值padding-box纫溃，故表現(xiàn)出默認的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>
經(jīng)過審查元素呜袁，就可以看到它顯示的總尺寸就是設置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"> 發(fā)送</button>
代碼的github地址：Github
預覽效果
