1.盒模型包括哪些屬性
盒模型是css中元素大小的呈現(xiàn)方式，每一個元素都有盒模型肮帐。
盒模型包括4個屬性：content,padding,border,margin.
content是盒模型的內(nèi)容區(qū)。有width和height兩個屬性边器。
padding是盒模型的內(nèi)邊距训枢。有padding-top,padding-bottom,padding-left，padding-right屬性忘巧，即上下左右內(nèi)邊恒界。
border是盒模型的邊框。也有border-top,border-bottom,border-left砚嘴，border-right,即上下左右邊框十酣。
margin是盒模型的外邊距。有margin-top际长，margin-bottom,margin-left,margin-right,即上下左右外邊距耸采。
注意點(diǎn):
- margin屬性，
margin: 10px 11px 12px 13px;這四個值分別是上工育、右虾宇、下、左翅娶，按順時針方向書寫文留。
margin: 0 0 0 0;,可簡寫成margin: 0;，表示上下左右外邊距都是0px竭沫。
margin: 0 10px 0 10px;,可簡寫成margin: 0 10px;,表示上下外邊距是0px燥翅，左右外邊距是10px。
padding蜕提、border屬性用法同上森书。 - 外邊距疊加。當(dāng)兩個或更多個垂直邊距相遇時， 它們將形成一個外邊距凛膏。這個外邊距的高度等于兩個發(fā)生疊加的外邊距的高度中的較大者杨名。但是注意只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距疊加。 行內(nèi)框猖毫、 浮動框或絕對定位框之間的外邊距不會疊加台谍。
舉個例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外邊距疊加</title>
<style>
.item1 {
width: 100px;
height: 100px;
background: red;
margin: 20px;
}
.item2 {
width: 100px;
height: 100px;
background: red;
margin: 30px;
}
</style>
</head>
<body>
<div class="item1"></div>
<div class="item2"></div>
</body>
</html>
效果：
- 關(guān)于行內(nèi)元素的margin、padding問題吁断。width趁蕊，height對行內(nèi)元素?zé)o效。行內(nèi)元素上下margin無效仔役，上下padding撐開空間掷伙，但不占用空間。左右margin又兵、padding有效任柜。
舉個例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行內(nèi)元素</title>
<style>
span {
width: 1000px;
height: 1000px;
padding: 30px 10px;
margin: 1000px 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="content">
<p>段落1段落1段落1段落1段落1段落1</p>
文本<span>行內(nèi)元素行內(nèi)元素</span>文本
<p>段落2段落1段落1段落1段落1段落1段落1</p>
</div>
</body>
</html>
效果：
- 設(shè)置背景色時，margin外邊距沒有顏色沛厨。
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style>
div {
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid;
margin: 10px;
background: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果：
如圖所示宙地，背景色設(shè)為紅色時，
參考盒模型
2.text-align: center的作用是什么俄烁，作用在什么元素上绸栅？能讓什么元素水平居中
text-align:center的作用是使文本和行內(nèi)元素中。它作用在塊元素上页屠，使塊元素內(nèi)部的圖片，文本等水平居中蓖柔。
舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.nav {
text-align: center;
}
div,p {
border: 1px solid red;
}
p{
width:300px;
}
</style>
</head>
<body>
<div class="nav">
寫一段話辰企。
<p>段落一</p>
<img src="eg_submit.jpg" alt="圖片1">
<div class="content">
<p>內(nèi)容區(qū)域</p>
<form action="a.php">
<input type="submit" name="submit"value="提交">
</form>
</div>
</div>
</body>
</html>
效果：
可以看出，class屬性是nav的div元素包圍的區(qū)域內(nèi)况鸣，文本牢贸，圖片和提交框都水平居中。文本是相對于包圍它的最近的元素水平居中镐捧，<img>和<input>是相對于它的直接父級元素水平居中潜索。
3.如果遇到一個屬性想知道兼容性，在哪查看?
在can i use這個網(wǎng)站查看懂酱。
4.IE 盒模型和W3C盒模型有什么區(qū)別?
ie678怪異模式（不添加 doctype）使用 ie 盒模型竹习。chrome， ie9+, ie678(添加 doctype) 使用標(biāo)準(zhǔn)盒模型列牺。兩者區(qū)別可以用下圖表示整陌。
如上圖所示，區(qū)別在于：
- W3C盒模型總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
IE盒模型總寬度=margin-left+width+margin-right - W3C盒模型總高度 = margin-top+ border-top + padding-top + height + padding-bottom+ border-bottom+ margin-bottom
IE盒模型總高度=margin-top+height+margin-bottom
5.以下代碼的作用？兼容性泌辫？
*{
box-sizing: border-box;
}
*是通配符随夸，匹配頁面中所有元素。box-sizing: border-box;為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制震放。
使設(shè)置的元素的寬度=border-right+padding-right+實際內(nèi)容的寬度+padding-left+border-left宾毒。
設(shè)置的元素的高度=border-top+padding-top+實際內(nèi)容的高度+padding-bottom+border-bottom。
兼容性：
支持IE8以上瀏覽器殿遂。
Internet Explorer伍俘、Opera 以及 Chrome 支持 box-sizing 屬性。
Firefox 支持替代的 -moz-box-sizing 屬性勉躺。
box-sizing:border-box;/*Internet Explorer癌瘾、Opera、Chrome*/
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
沒有box-sizing: border-box;時
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box-sizing</title>
<style>
.simple {
width: 500px;
height: 100px;
margin: 20px;
background: #ccc;
}
.fancy {
width: 500px;
height: 100px;
margin: 20px;
padding: 20px;
border: 20px solid red;
background: #ccc;
}
</style>
</head>
<body>
<div class="simple">
</div>
<div class="fancy">
</div>
</body>
</html>
效果：
加上
*{
box-sizing: border-box;
}
后的效果;
本文版權(quán)歸作者和饑人谷所有饵溅，轉(zhuǎn)載請注明出處
