一、盒模型包括哪些屬性
**1、盒模型是css中元素大小的呈現(xiàn)方式，每個(gè)元素都有盒模型。它包括元素內(nèi)容（element content）、內(nèi)邊距（padding）、邊框（border） 和 外邊距（margin） **
Paste_Image.png
- margin是用來(lái)控制元素周圍的間隔，它永遠(yuǎn)是透明的
- padding是元素的內(nèi)容與邊框的距離，它會(huì)受元素設(shè)置的顏色影響
- content就是元素的內(nèi)容，設(shè)置width和height可以調(diào)整它在元素中空間中占用的大小
- border邊框是圍繞元素內(nèi)容和內(nèi)邊距，可以設(shè)置大小顏色
說(shuō)明：它們都可以設(shè)置上下左右的屬性。
附加：
①對(duì)于行內(nèi)元素設(shè)置寬和高是無(wú)效的，它的寬高是由它本身內(nèi)容決定的
②行內(nèi)元素可以設(shè)置margin和padding，但只有水平方向的margin和padding占據(jù)空間大小，垂直方向padding不占據(jù)空間大小但可以被撐開(kāi)而margin沒(méi)有效果，但可以設(shè)置背景顏色和邊框，這樣會(huì)出現(xiàn)覆蓋的問(wèn)題。
2.外邊距疊加
①外邊距疊加指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。
②疊加后的外邊距的高度等于兩個(gè)發(fā)生疊加的外邊距的高度中的較大者。
③但是注意只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距疊加。行內(nèi)框、浮動(dòng)框或絕對(duì)定位框之間的外邊距不會(huì)疊加。
一般來(lái)說(shuō)， 垂直外邊距疊加有三種情況：
①元素自身疊加。當(dāng)元素沒(méi)有內(nèi)容、內(nèi)邊距、邊框時(shí)， 它的上下邊距就會(huì)相遇了， 即會(huì)產(chǎn)生疊加。 當(dāng)為元素添加內(nèi)容、 內(nèi)邊距、 邊框任何一項(xiàng)， 就會(huì)取消疊加。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
.test{
margin:1px;
}
.test1{
border:10px solid;
margin:20px;
}
.test2{
background-color: red;
padding: 20px;
margin:10px;
}
.test3{
margin:20px;
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test1"></div>
<div class="test2"></div>
<div class="test3">這里面有內(nèi)容</div>
</body>
</html>
通過(guò)調(diào)試，當(dāng).test的margin=1px的時(shí)候，它緊挨著.test1。當(dāng).test的margin值逐漸增大時(shí)，到達(dá)margin=20px時(shí)，此時(shí).test和.test1的margin值相等，當(dāng)margin=21px時(shí)，這時(shí)兩個(gè)疊加外邊距的高度是margin=21px，所以.test1向下移1px。還有元素中margin變化時(shí)，元素的位置會(huì)發(fā)生改變。
當(dāng).test1=30px時(shí)，如圖：
Paste_Image.png
②相鄰元素疊加。 相鄰的兩個(gè)元素， 如果它們的上下邊距相遇，即會(huì)產(chǎn)生疊加。
Paste_Image.png
③包含（父子）元素疊加。包含元素的外邊距隔著 父元素的內(nèi)邊距和邊框， 當(dāng)這兩項(xiàng)都不存在的時(shí)候， 父子元素垂直外邊距相鄰， 產(chǎn)生疊加。 添加任何一項(xiàng)即會(huì)取消疊加。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
.test1{
border: 1px solid blue;
width: 100px;
height: 100px;
padding-top: 20px;
}
.test2{
border: 1px solid red;
width: 30px;
height: 30px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="test1">
<div class="test2"></div>
</div>
</body>
</html>
二、text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中
text-align:center;用于塊級(jí)元素，能夠使塊級(jí)元素內(nèi)部的行內(nèi)元素水平居中。對(duì)塊級(jí)元素里面的塊級(jí)元素不起作用。而這里的居中是針對(duì)自己的父容器居中的。
設(shè)置 margin:0px auto;能夠是塊級(jí)元素居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
.container{
border: 1px solid blue;
width:200px;
height: 200px;
text-align: center;
margin: 0px auto;
}
.content{
border:1px solid red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">hello</div>
</div>
</body>
</html>
三、如果遇到一個(gè)屬性想知道兼容性，在哪查看
四、IE 盒模型和W3C盒模型有什么區(qū)別?
ie盒模型設(shè)置的寬高包括內(nèi)容的寬高，padding，邊框。w3c盒模型設(shè)置的寬高就是內(nèi)容的寬高。
ie678怪異模式（不添加 doctype）使用 ie 盒模型。chrome， ie9+, ie678(添加 doctype) 使用標(biāo)準(zhǔn)盒模型。
五、以下代碼的作用？兼容性？
*{
box-sizing:border-box;
}
① *是通配符，匹配頁(yè)面中所有元素。設(shè)置box-sizing:border-box;作用是為元素指定的任何內(nèi)邊距和邊框都將在以設(shè)定的寬高內(nèi)進(jìn)行繪制。它能夠方便計(jì)算
② box-sizing: border-box;計(jì)算方法width/height=content+padding+border。表示指定的寬度和高度包括邊框、內(nèi)邊距和內(nèi)容區(qū)域。這就是上面提到的IE盒模型。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
.border-box{
box-sizing:border-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid red;
}
</style>
</head>
<body>
<div class="border-box"></div>
</body>
</html>
可以在can i use看它的兼容性,可以看到ie8以上都支持該屬性
Paste_Image.png
六、代碼
寫(xiě)一個(gè) btn 的class， 任何 a，span，div，button添加此class后后變成如下按鈕的樣式（鼠標(biāo)hover背景色#c14d21，鼠標(biāo)按下背景色#e25f31）
<a class="btn" href="#">確定</a>
<span class="btn" >取消</span>
<div class="btn">提交</div>
<button class="btn"> 發(fā)送</button>
next:9-2.CSS常見(jiàn)技巧
pre:8.CSS選擇器
