1.盒模型包括哪些屬性
以上圖為例烈炭，去闡述盒模型的各個屬性：
- content屬性：規(guī)定內(nèi)容區(qū)域耻矮，在標(biāo)準(zhǔn)盒模型中流礁，寬高有width和height決定
圖中
width:500px依疼；height:500px贡定，顯示在盒模型中內(nèi)容區(qū)域也是500*500晶伦；
- padding屬性：規(guī)定內(nèi)邊距（內(nèi)容區(qū)域到邊框的距離）碟狞，在CSS中可分為padding-top、padding-right坝辫、padding-bottom和padding-left四個細(xì)分屬性篷就，在具體設(shè)置時可簡寫為padding
圖中
padding:5px，表示上下左右的內(nèi)邊距均為5px近忙，正如盒模型所示竭业；
- border屬性：規(guī)定元素的邊界，常見的border的細(xì)分屬性有及舍，border-width未辆、border-style、border-color锯玛、border-top咐柜、border-right兼蜈、border-bottom和border-left，可簡寫為border
圖中使用簡寫
border:5px solid black拙友，規(guī)定元素的邊界為5px/實線/黑色的樣式为狸，盒模型中顯示border為5px；
- margin屬性：規(guī)定元素的外邊距（元素邊框的空白區(qū)域）遗契，常見的margin的細(xì)分屬性有margin-top辐棒、margin-right、margin-bottom牍蜂、margin-left
[tip]
還有關(guān)于外邊距合并以及利用margin屬性進行塊級元素的垂直居中漾根，在日后的文章再行整理
圖中使用
margin:20px 20px的簡寫表示元素的上下外邊距為20px，左右外邊距也為20px
2.text-align: center的作用是什么鲫竞，作用在什么元素上辐怕？能讓什么元素水平居中
- text-align:center的作用是讓inline元素水平居中
- inline元素以及block內(nèi)置的inline元素
- 一般的行內(nèi)元素
<span>、<img>从绘、<a>等
3.如果遇到一個屬性想知道兼容性寄疏，在哪查看?
可以去到caniuse.com網(wǎng)站去查詢
4.IE 盒模型和W3C盒模型有什么區(qū)別?
IE盒模型與W3C盒模型的區(qū)別主要在關(guān)于寬度的定義上：
- IE盒模型的
寬度=內(nèi)容區(qū)域+padding+邊框，常出現(xiàn)在IE6/7/8的混雜模式下 - W3C盒模型的
寬度=內(nèi)容區(qū)域顶考，常出現(xiàn)在chrome/IE9+赁还、IE678的嚴(yán)格模式下
代碼
寫一個 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>
