1 盒子模型的組成
盒子模型是由邊距、邊框办龄、填充和內(nèi)容組成的烘绽。其中邊距、邊框俐填、填充可以在盒子模型上下左右四個方向上設(shè)置屬性值安接。在HTML文檔中，每個元素（element）都有盒子模型(不論是塊級元素還是行內(nèi)元素)英融。
在 CSS 中盏檐，width 和 height 指的是內(nèi)容區(qū)域（element）的寬度和高度。增加內(nèi)邊距驶悟、邊框和外邊距不會影響內(nèi)容區(qū)域的尺寸胡野，但是會增加元素框的總尺寸。
padding和margin
對于行內(nèi)元素痕鳍，設(shè)置padding和margin屬性的上下方向的屬性值是無效的,不占用頁面空間硫豆，但是上下padding會占用元素背景色龙巨。
邊距合并
什么是邊距合并呢？在這里分兩種情況：
1. 兄弟間邊距合并
2. 父子間邊距合并
我們先說兄弟間邊距合并熊响，先看代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮動</title>
<style>
.wrapper {
border: 1px solid ;
width:300px;
}
.box1,.box2 {
width: 100px;
height: 100px;
border:1px solid red;
margin:30px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
那么外邊距是如何產(chǎn)生的呢旨别？（其實說白了就是沒有邊框和填充屬性引起的，最重要的是讓其形成BFC汗茄，下面我們就會講到BFC）在正常的文檔流之中秸弛，相鄰的兩個塊級元素如果在垂直方向上有外邊距，則會產(chǎn)生外邊距合并洪碳。合并之后兩個塊級元素在垂直方向上的距離是取兩者之間外邊距最大值递览。
另外一種情況是父子之間的外邊距合并，先看代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮動</title>
<style>
html,body{
margin: 0;
padding: 0;
}
.wrapper {
width:400px;
background: pink;
margin:10px;
}
.box1,.box2 {
width: 100px;
height: 100px;
border:1px solid red;
margin:20px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
顯然瞳腌，在父子之間也產(chǎn)生了邊距合并非迹。那怎么取消外邊距合并呢？
對于兄弟外邊距纯趋，我們可以設(shè)置兄弟元素是浮動元素或是行內(nèi)元素或是overflow:hidden憎兽，這樣就不會產(chǎn)生外邊距合并。
display:float;
/*或者是*/
display:inline-block
/*或者是*/
<div class="wrapper">
<div class="box1">
< div class="box"></div>
</div>
<div class="box2">
<div class="box> </div>
</div>
</div>
.box1,.box2 {
overflow:hidden
}
而對于父子外邊距合并吵冒，則需要在父元素添加邊框或者padding:1px 纯命。
border:1px;
/*或者是*/
padding:1px;
另外還有一種情況是自身合并，主要是這個塊級元素中什么內(nèi)容都沒有痹栖，
<div class="box5"></div>
<h3>hello</h3>
.box5 {
margin:40px;
}
解決辦法：形成BFC
overflow:hidden;//或者
border:1px solid transparent;//或者
padding:1px;
BFC
- BFC 是什么
對于有浮動屬性的元素亿汞、絕對定位屬性的元素，塊級容器（inline-block,table-cell）,塊級元素OverFlow屬性值不是Visible的元素揪阿。塊級容器和塊級元素OverFlow屬性值不是Visible的元素雖不是塊級元素疗我，但是有塊級元素的屬性。上述元素就會建立塊格式化上下文為里面的內(nèi)容南捂。
在BFC之中吴裤，盒子在水平方向上是一個緊挨著一個排列的，兩個相鄰的盒子垂直方向上的距離依賴于margin屬性溺健，垂直方向上的不同的兩個盒子margin屬性會折疊麦牺。
在BFC之中，盒子的左邊界會觸碰到父元素的左邊界（或者右邊界）鞭缭。即使浮動元素也如此剖膳。
父容器使用overflow: auto| hidden撐開高度的原理是什么？
使父容器形成BFC岭辣。
使用display:inline-block 之后的塊級元素會產(chǎn)生縫隙吱晒，如何去除呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮動</title>
<style>
html,body,ul,li{
margin: 0;
padding: 0;
}
.wrapper {
width: 400px;
background: pink;
}
.wrapper li {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid blue;
}
</style>
</head>
<body>
<ul class="wrapper">
<li></li>
<li></li>
<li></li>
</ul>
</html>
這個縫隙之所以會產(chǎn)生是因為沦童，li元素之間有空白仑濒，
消除空白有四種方法 分別是
1. 讓li排成一列(這個只不過方法肯定不行叹话，最起碼影響代碼的閱讀性。)
2.給每一個li負邊距 margin-left:-4px;
3.li 浮動躏精，li {float:left;}
4.ul {font-size:0}
浮動導致的父容器高度塌陷指什么渣刷？為什么會產(chǎn)生鹦肿？有幾種解決方法矗烛？
指的是父容器無法再次包裹其子元素了，會產(chǎn)生這種情況是因為浮動元素脫離的正常的文檔流了箩溃。
沒有添加浮動元素之前
添加浮動元素之后
這就是父元素的高度塌陷瞭吃，如果想讓父元素重新包裹子元素，解決的方案由如下幾種涣旨，主要是給父元素添加屬性歪架。
1. display:inline-block
2. overflow:hidden
3. float:left
4. 添加偽類元素
這種方式同上面的方式有所不同，上面的方式是在父元素內(nèi)部形成塊格式化上下文霹陡，形成一個獨立的小空間和蚪，但是這種方式是虛擬的向父元素添加一個標簽。作用是清除浮動烹棉，清除浮動后重新讓父元素包裹子元素攒霹。
.clearfix:after{ /*在父元素內(nèi)部添加一個標簽元素*/
content: ''; /*元素為行內(nèi)元素，內(nèi)容為空*/
display: block; /*元素轉(zhuǎn)化為塊級元素*/
clear: both;/*清除浮動*/
}
.clearfix{ *zoom: 1;/*屬性是IE瀏覽器的專有屬性浆洗，F(xiàn)irefox等其它瀏覽器不支持催束。它可以設(shè)置或檢索對象的縮放比例。除此之外伏社，它還有其他一些小作用抠刺，比如觸發(fā)ie的hasLayout屬性，清除浮動摘昌、清除margin的重疊等速妖。*/}
另外BFC 還有一個作用 就是讓圍繞浮動元素的文字不再環(huán)繞。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮動</title>
<style>
html,body,ul,li{
margin: 0;
padding: 0;
}
.wrapper li {
list-style: none;
}
.wrapper {
width: 300px;
border: 1px solid red;
}
.wrapper img {
float: left;
width:100px;
}
.wrapper p {
/*overflow: auto;*/
}
</style>
</head>
<body>
<div class="wrapper">
<p>HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML</p>
</div>
</html>
P標簽沒有添加overflow屬性之前聪黎，
添加overflow屬性之后
