回答
- 盒模型包括哪些屬性桑驱？1
- content：內(nèi)容區(qū)域将塑；
- padding：內(nèi)邊距；
- border：邊框卜朗；
-
margin：外邊距志衍，透明存在的。
普通文檔流中的塊框的垂直外邊距會疊加聊替，疊加時，選取較大值培廓。
CSS盒模型
-
text-align:center的作用是什么惹悄，作用在什么元素上？能讓什么元素水平居中肩钠？居中
作用在塊級元素上泣港，可以使元素內(nèi)的文本、圖片价匠、行內(nèi)元素水平居中
.one {
text-align: center;
border: solid 1px red;
}
p{
border: 1px solid;
}
a{
text-decoration: none;
}```
效果：圖中的段落沒居中当纱，但是段落中的文本居中顯示。
如果要讓其中的行內(nèi)元素不受控制踩窖，`display: block`或者在其外部加一個塊級元素坡氯，另設(shè)置對齊方式
```<body>
<div class="father">
很長的一段文字很長很長的，沒了!
<p><a href="#" class="inline">這樣挺好</a>我繼承了父元素</p>
<p class="son"><a href="#" class="inline">我要做自己</a>我自己設(shè)置了對齊方式，不再繼承</p>
</div>
</body>```
3. 如果遇到一個屬性想知道兼容性箫柳，在哪查看手形？
[can I use](http://caniuse.com/)，
4. IE盒模型和W3C盒模型有什么區(qū)別悯恍？
* W3C盒模型：總寬度=margin-left + border-left + padding-left + width +padding-right +borer-right + margin-right.
* IE盒模型：總寬度=margin-left + width +margin-right.（padding和border的值算在width里）[more](http://www.osmn00.com/translation/213.html)
（給生活加點“料”：CSS3的box-sizing屬性算法和IE盒模型是一樣的库糠？糾結(jié)了好一會，不是說IE盒模型不標準嗎涮毫？就上網(wǎng)查“IE盒模型和W3C盒模型哪個好”結(jié)果看到了這個段子：
>IE：我覺得盒模型應(yīng)該是這樣的瞬欧，blahblah。
W3C：明顯應(yīng)該是這樣的才對罢防，blahblah艘虎。
結(jié)果是 IE 在怪異模式下用了「不標準」的盒模型，標準模式下用了「標準」的盒模型篙梢。圍觀群眾：聽說 IE 的盒模型不標準顷帖。
……多年過去……
W3C：感覺還是 IE 的那個模型比較好。但我們已經(jīng)回不去了……算了加個屬性支持一下 IE 那種模式吧渤滞。
box-sizing
這貨就是用來擦屁股的贬墩，我從來沒見過有人用 border-box
的……
希望創(chuàng)建W3C盒模型的那個人不要太自責(zé)，人民大眾和他在一起Ｍ弧）
5. 以下代碼的作用陶舞？兼容性？
`*{box-sizing: border-box;}`
* 作用：元素的**內(nèi)邊距（padding）**和**邊框（border）**不會增加它的**寬度**绪励，width=border-left + padding-left + content +padding-right + border-right.
如果padding肿孵、border值增加，會減少相等的content的值疏魏，而width不改變停做。**（注意：當width一定時，總的寬度會隨margin的改變而改變大莫。）**
例如
.one {
width: 500px;
margin: 20px auto;
background-color: green;
}
.two {
width: 500px;
margin: 20px auto;
padding: 50px;
border-width: 10px;
background-color: red;
}```
上面代碼蛉腌，第二個元素的寬度的值要比第一個元素大，因為第二個的padding和border都有值只厘。如果兩個元素都加了box-sizing:border-box;屬性烙丛，結(jié)果如下
.simple {
width: 500px;
margin: 20px auto;
box-sizing: border-box;
background-color: green;
}
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border-width: 10px;
box-sizing: border-box;
background-color: red;
}```
此時，兩個元素的寬度相同羔味。
* 兼容性：
