盒模型包括哪些屬性
- Margin - 清除邊框區(qū)域芳杏。Margin沒有背景顏色豫领，它是完全透明
- Border - 邊框周圍的填充和內(nèi)容抡柿。邊框是受到盒子的背景顏色影響
- Padding - 清除內(nèi)容周圍的區(qū)域。會受到框中填充的背景顏色影響
-
Content - 盒子的內(nèi)容等恐，顯示文本和圖像
邊距合并
外邊距合并指的是洲劣，當兩個垂直外邊距相遇時，它們將形成一個外邊距课蔬。
合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者囱稽。
- 行內(nèi)元素寬高由其自身決定
- 行內(nèi)的左右margin與padding有效，上下的margin與padding無效二跋，但是加border可以顯示战惊，可以用line-height將其撐開
- display:inline-block 將行內(nèi)元素擁有塊級元素屬性,但可以在同一行排列，但IE8一下不支持扎即。設(shè)置了display:inline-block的元素吞获，垂直margin不會被合并。
- 當一個元素出現(xiàn)在另一個元素上面時铺遂，第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并衫哥。上下合并
- 當一個元素包含在另一個元素中時（假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開）茎刚，它們的上和/或下外邊距也會發(fā)生合并襟锐。父子合并
- 盡管看上去有些奇怪，但是外邊距甚至可以與自身發(fā)生合并膛锭。
假設(shè)有一個空元素粮坞，它有外邊距蚊荣，但是沒有邊框或填充。在這種情況下莫杈，上外邊距與下外邊距就碰到了一起互例，它們會發(fā)生合并：
如果這個外邊距遇到另一個元素的外邊距，它還會發(fā)生合并：
這就是一系列的段落元素占用空間非常小的原因筝闹，因為它們的所有外邊距都合并到一起媳叨，形成了一個小的外邊距。
外邊距合并初看上去可能有點奇怪关顷，但是實際上糊秆，它是有意義的。以由幾個段落組成的典型文本頁面為例议双。第一個段落上面的空間等于段落的上外邊距痘番。如果沒有外邊距合并，后續(xù)所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和平痰。這意味著段落之間的空間是頁面頂部的兩倍汞舱。如果發(fā)生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起宗雇，這樣各處的距離就一致了昂芜。
只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并。行內(nèi)框赔蒲、浮動框或絕對定位之間的外邊距不會合并说铃。
text-align: center的作用是什么，作用在什么元素上嘹履？能讓什么元素水平居中
- 作用于塊級元素腻扇，使塊級元素內(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>
效果
如果遇到一個屬性想知道兼容性幼苛，在哪查看?
IE 盒模型和W3C盒模型有什么區(qū)別?
- W3C標準中padding、border所占的空間不在width焕刮、height范圍內(nèi)舶沿，
- 俗稱的IE的盒模型width包括content尺寸＋padding＋border
- 早期IE6、IE7使用“IE盒模型”配并，后來更新了一次括荡，更新后的IE6、IE7使用 標準盒模型IE8及以上版本使用標準盒模型
- 沒有DOCTYPE的情況下使用怪異模式溉旋，IE也使用“IE盒模型”
以下代碼的作用畸冲？兼容性？
*{
box-sizing: border-box;
}
使得所有盒模型均按照IE盒子模型處理。即為元素設(shè)定的寬度和高度決定了元素的邊框盒邑闲。就是說算行，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進行繪制。通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度苫耸。
box-sizing:content-box即為標準的盒子模型州邢。寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框褪子。
兼容性
本文版權(quán)歸饑人谷_Nick和饑人谷所有量淌，轉(zhuǎn)載請注明來源。
