A鲜侥、問答題
一旁振、盒模型包括哪些屬性柑贞？
有content（盒子內(nèi)容）、padding（清除內(nèi)容周圍的區(qū)域---內(nèi)邊距）钦睡、border（邊框周圍的填充和內(nèi)容）、margin（清除邊框區(qū)域--外邊距）四大屬性躁倒；
具體可詳見本人所編寫的如下代碼及運行結(jié)果截圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.know-box{
width: 150px;
height: 100px;
background-color: red;
border: 5px solid blue;
padding: 5px 10px;
margin: 50px auto;
text-align: center;
}
</style>
</head>
<body>
<div class="know-box">
我是一個div
</div>
</body>
</html>
上述代碼運行后得到如下結(jié)果：
由此可見
- 設(shè)置width及height數(shù)值荞怒，其實是設(shè)置content的width及height的數(shù)值；
- padding的顏色會受到框內(nèi)填充顏色的影響秧秉，但margin不會褐桌，其為透明色；
二象迎、text-align: center的作用是什么荧嵌，作用在什么元素上？能讓什么元素水平居中砾淌？
作用是使得文本或img標簽等內(nèi)聯(lián)元素（或與之相似元素）水平居中啦撮，其可作用在塊級元素中的文本或img標簽等行內(nèi)元素中，使其在其父元素中居中汪厨；例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
h1{
text-align: center;
}
div{
text-align: center;
}
</style>
</head>
<body>
<h1> <a href="#">這是塊級元素h1中的a鏈接</a></h1>
<div> 這是塊級元素div
</div>
</body>
</html>
上述代碼運行后（可見http://jsbin.com/royeba/edit?html,output） h1中的a鏈接實現(xiàn)居中了赃春，div中的圖片和文章也實現(xiàn)了居中；
三骄崩、如果遇到一個屬性想知道兼容性聘鳞，在哪查看?
可進入caniuse.com、MDN或w3school.com.cn等網(wǎng)站進行查詢要拂；
如下圖為在caniuse.com中查詢box-sizing的兼容性結(jié)果：
四抠璃、IE 盒模型和W3C盒模型有什么區(qū)別?
IE6、7脱惰、8在不添加doctype的情況下（怪異模式）使用IE盒模型搏嗡；
IE6、7、8在添加doctype的情況下采盒，IE9及以上和chrome 使用W3C盒模型旧乞；
區(qū)別是：IE盒模型中width及height的數(shù)值并不是指content的width及height的數(shù)值而是指padding+border+content的width和height的數(shù)值（這個時候內(nèi)邊距和邊框?qū)ㄔ诤凶又校玾3c則是指content的數(shù)值磅氨；
五尺栖、以下代碼的作用？兼容性烦租？
*{
box-sizing: border-box;
}
作用是為元素設(shè)定的任何內(nèi)邊距及邊框均在設(shè)定的寬度和高度中進行繪制延赌，也就是 所有元素輸入的height及width數(shù)值即為content+padding+border的height及width的數(shù)值），這樣可方便計算叉橱；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
background-color: red;
width: 100px;
height: 50px;
border: 5px solid blue;
margin: 50px auto;
padding: 10px;
}
/*
*{
box-sizing:border-box;
}
*/
</style>
</head>
<body>
<div class="outside1"> 這是div1 </div>
<div class="inside1"> 這是div2 </div>
</body>
</html>
上述代碼運行如下：
此時height及width數(shù)值與content的height及width的數(shù)值是相符合的挫以；
若去掉注釋后，則運行結(jié)果如下：
此時height及width數(shù)值與content的height及width的數(shù)值是不相符合的窃祝，其為content的寬（高）數(shù)值加上padding及border寬（高）之和的兩倍掐松；
兼容性在caniuse.com查詢結(jié)果如下：
兼容性在MDN查詢情況（老資料）見下圖：
-
桌面端：
電腦端兼容性.png 手機端：
兼容性情況說明引自MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing
另：1、firefox支持替代的-moz-box-sizing屬性粪小；
2大磺、box-sizing 默認值為content-box；
B糕再、代碼題
1量没、寫一個 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>
自己寫的代碼詳見： 猛戳此處~ 哈哈
**本文版權(quán)歸本人即簡書筆名：該賬戶已被查封 所有，如需轉(zhuǎn)載請注明出處究抓。謝謝猾担！ *
