在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并和措？如何合并庄呈？
產(chǎn)生折疊的必備條件：margin必須是鄰接的
必須是處于常規(guī)文檔流（非float和絕對(duì)定位）的塊級(jí)盒子,并且處于同一個(gè)BFC當(dāng)中
沒有線盒，沒有空隙（clearance派阱，下面會(huì)講到）诬留，沒有padding和border將他們分隔開
都屬于垂直方向上相鄰的外邊距，可以是下面任意一種情況
元素的margin-top與其第一個(gè)常規(guī)文檔流的子元素的margin-top
元素的margin-bottom與其下一個(gè)常規(guī)文檔流的兄弟元素的margin-top
height為auto的元素的margin-bottom與其最后一個(gè)常規(guī)文檔流的子元素的margin-bottom
高度為0并且最小高度也為0贫母，不包含常規(guī)文檔流的子元素文兑，并且自身沒有建立新的BFC的元素的margin-top和margin-bottom
折疊的結(jié)果:
兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，折疊結(jié)果是它們兩者之間較大的值
兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)腺劣，折疊結(jié)果是兩者絕對(duì)值的較大值
兩個(gè)外邊距一正一負(fù)時(shí)彩届，折疊結(jié)果是兩者的相加的和
消除邊距合并
- 父子邊距合并：父容器加border或者padding：1px；
- 兄弟邊距合并：float或者display：inline-block;
- 不同父容器中的相鄰?fù)膺吘嗪喜ⅲ簅verflow
- 自身上下外邊距合并：加border：transparent誓酒；或者padding：1px；或者overflow：auto贮聂；
消除list作為inline-block時(shí)的縫隙
- li與li之間不換行
<li>tag1</li><li>tag2</li><li>tag3</li> - 交錯(cuò)換行
<li>tag1</li
><li>tag2</li
><li>tag3</li>
- 負(fù)margin靠柑，第一個(gè)li單獨(dú)設(shè)置margin-left：0；
margin-left: -4px;
- 設(shè)置li為float：left吓懈；父容器為overflow：auto歼冰；
- 父容器設(shè)置font-size：0；后代中須重設(shè)font-size耻警；
父容器使用overflow: auto| hidden撐開高度的原理是什么隔嫡？
父容器形成了一個(gè)BFC
浮動(dòng)導(dǎo)致的父容器高度塌陷指什么
- 指元素浮動(dòng)以后脫離了文檔流甸怕，無法撐開父容器的空間
- 解決辦法：
使用clear類（偽類）或clear清除浮動(dòng)
.ct1::after{
display: block;
content: '';
clear: both;
}
BFC
- 定義：浮動(dòng)元素和絕對(duì)定位元素，非塊級(jí)盒子的塊級(jí)容器（例如 inline-blocks, table-cells, 和 table-captions）腮恩，以及overflow值不為“visiable”的塊級(jí)盒子梢杭，都會(huì)為他們的內(nèi)容創(chuàng)建新的BFC（塊級(jí)格式上下文）
在BFC中，盒子從頂端開始垂直地一個(gè)接一個(gè)地排列秸滴，兩個(gè)盒子之間的垂直的間隙是由他們的margin 值所決定的武契。在一個(gè)BFC中，兩個(gè)相鄰的塊級(jí)盒子的垂直外邊距會(huì)產(chǎn)生折疊
在BFC中荡含，每一個(gè)盒子的左外邊緣（margin-left）會(huì)觸碰到容器的左邊緣(border-left)（對(duì)于從右到左的格式來說咒唆，則觸碰到右邊緣） - 理解：首先BFC是一個(gè)名詞，是一個(gè)獨(dú)立的布局環(huán)境释液，我們可以理解為一個(gè)箱子（實(shí)際上是看不見摸不著的）全释，箱子里面物品的擺放是不受外界的影響的。轉(zhuǎn)換為BFC的理解則是：BFC中的元素的布局是不受外界的影響（我們往往利用這個(gè)特性來消除浮動(dòng)元素對(duì)其非浮動(dòng)的兄弟元素和其子元素帶來的影響误债。）并且在一個(gè)BFC中浸船，塊盒與行盒（行盒由一行中所有的內(nèi)聯(lián)元素所組成）都會(huì)垂直的沿著其父元素的邊框排列
- 運(yùn)用：
- 撐開父容器的高度
- 清除浮動(dòng)
- 取消margin相遇時(shí)的折疊
讀代碼
.clearfix:after{ /*在容器的最后添加一個(gè)after偽類*/
content: ''; /*偽類的內(nèi)容為空*/
display: block; /*作為塊級(jí)元素顯示*/
clear: both;/*清除浮動(dòng)*/
}
.clearfix{
*zoom: 1;/*在IE6,7中實(shí)現(xiàn)以上效果*/
}
- 整體作用是實(shí)現(xiàn)父容器的高度被內(nèi)部的浮動(dòng)元素?fù)伍_，并在IE6,7中實(shí)現(xiàn)兼容
- 和BFC的不同：bfc是創(chuàng)建一個(gè)獨(dú)立空間找前，浮動(dòng)元素包含在這個(gè)bfc之中糟袁，而添加偽類的方法中，實(shí)際上浮動(dòng)元素并沒有包含在父元素中躺盛，但是包含了底部的空白偽類项戴，因?yàn)槲覀優(yōu)閭晤愄砑恿藘蓚?cè)不能有浮動(dòng)元素的屬性，所以偽類被迫出現(xiàn)在了浮動(dòng)元素的下方槽惫。
html中添加多個(gè)空格
- 使用特定字符替換空格
 周叮； - 空格外層套上pre標(biāo)簽，常用于文字中包含代碼
<p>
<pre>
<code>
1.ddd
2.fff
</code>
</pre>
</p>
本教程版權(quán)歸饑人谷和作者所有界斜，轉(zhuǎn)載須說明來源仿耽。
