盒模型包括哪些屬性
- Margin - 清除邊框區(qū)域。Margin沒有背景顏色，它是完全透明
- Border - 邊框周圍的填充和內(nèi)容。邊框是受到盒子的背景顏色影響
- Padding - 清除內(nèi)容周圍的區(qū)域。會(huì)受到框中填充的背景顏色影響
-
Content - 盒子的內(nèi)容，顯示文本和圖像
邊距合并
外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。
合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。
- 行內(nèi)元素寬高由其自身決定
- 行內(nèi)的左右margin與padding有效，上下的margin與padding無效，但是加border可以顯示，可以用line-height將其撐開
- display:inline-block 將行內(nèi)元素?fù)碛袎K級(jí)元素屬性,但可以在同一行排列，但I(xiàn)E8一下不支持。設(shè)置了display:inline-block的元素，垂直margin不會(huì)被合并。
- 當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并。上下合并
- 當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會(huì)發(fā)生合并。父子合并
- 盡管看上去有些奇怪，但是外邊距甚至可以與自身發(fā)生合并。
假設(shè)有一個(gè)空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會(huì)發(fā)生合并：
如果這個(gè)外邊距遇到另一個(gè)元素的外邊距，它還會(huì)發(fā)生合并：
這就是一系列的段落元素占用空間非常小的原因，因?yàn)樗鼈兊乃型膺吘喽己喜⒌揭黄穑纬闪艘粋€(gè)小的外邊距。
外邊距合并初看上去可能有點(diǎn)奇怪，但是實(shí)際上，它是有意義的。以由幾個(gè)段落組成的典型文本頁面為例。第一個(gè)段落上面的空間等于段落的上外邊距。如果沒有外邊距合并，后續(xù)所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發(fā)生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。
只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對定位之間的外邊距不會(huì)合并。
text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中
- 作用于塊級(jí)元素，使塊級(jí)元素內(nèi)的行內(nèi)元素水平居中。此居中是針對其父容器的居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box1{
border:2px solid black;
background:rgba(0,255,0,0.5);
width:100px;
height: 100px;
text-align:center;
}
.box2{
text-align:center;
border:1px solid black;
margin:10px 15px 10px 5px;
padding:5px;
background:red;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<a href="#">居中</a>
</div>
</div>
</body>
</html>
效果
如果遇到一個(gè)屬性想知道兼容性，在哪查看?
IE 盒模型和W3C盒模型有什么區(qū)別?
- W3C標(biāo)準(zhǔn)中padding、border所占的空間不在width、height范圍內(nèi)，
- 俗稱的IE的盒模型width包括content尺寸＋padding＋border
- 早期IE6、IE7使用“IE盒模型”，后來更新了一次，更新后的IE6、IE7使用 標(biāo)準(zhǔn)盒模型IE8及以上版本使用標(biāo)準(zhǔn)盒模型
- 沒有DOCTYPE的情況下使用怪異模式，IE也使用“IE盒模型”
以下代碼的作用？兼容性？
*{
box-sizing: border-box;
}
使得所有盒模型均按照IE盒子模型處理。即為元素設(shè)定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。
box-sizing:content-box即為標(biāo)準(zhǔn)的盒子模型。寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框。
兼容性
本文版權(quán)歸饑人谷_Nick和饑人谷所有，轉(zhuǎn)載請注明來源。
