浮動(dòng)元素有什么特征蛆挫？對(duì)父容器赃承、其他浮動(dòng)元素、普通元素悴侵、文字分別有什么影響?
CSS浮動(dòng)的基本概念
浮動(dòng)模型也是一種可視化格式模型楣导，浮動(dòng)的框可以左右移動(dòng)（根據(jù)float屬性值而定），直到它的外邊緣碰到包含框或者另一個(gè)浮動(dòng)元素的框的邊緣畜挨。浮動(dòng)元素不在文檔的普通流中，文檔的普通流中的元素表現(xiàn)的就像浮動(dòng)元素不存在一樣.
特征
- 浮動(dòng)定位將元素排除在普通流之外噩凹，即元素將脫離標(biāo)準(zhǔn)文檔流巴元；
- 元素將不在頁面占用空間。
對(duì)父容器的影響
浮動(dòng)元素會(huì)向左或者向右平移驮宴，直到碰到容器邊框或者另外一個(gè)浮動(dòng)元素逮刨，會(huì)引起父容器高度塌陷。
<div style="border: solid 5px #0e0; width:300px;">
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
</div>
對(duì)其他浮動(dòng)元素的影響
如果父容器的寬度足夠子元素的排列堵泽，那么會(huì)與其他浮動(dòng)元素在同一方向上依次排列修己；
<div style="border: solid 1px #4C4E4D; width:340px;height: 140px;">
<div style="height: 100px; width: 100px; background-color: #ECD06F; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: #3C948B; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: #1A99AA; float:left;">
</div>
</div>
如果父容器的寬度不夠子元素的排列，超出的元素會(huì)向下移動(dòng)迎罗，并尋找足夠的空間睬愤；此時(shí)加入元素高度不統(tǒng)一，元素向下移動(dòng)時(shí)會(huì)被卡住纹安。
<div style="border: solid 1px #4C4E4D; width:240px;height: 240px;">
<div style="height: 100px; width: 100px; background-color: #ECD06F; float:left;">
</div>
<div style="height: 80px; width: 100px; background-color: #3C948B; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: #1A99AA; float:left;">
</div>
</div>
對(duì)普通元素的影響
浮動(dòng)元素之前的普通元素不受影響尤辱。浮動(dòng)元素之后的普通元素因感知不到浮動(dòng)元素的存在會(huì)被浮動(dòng)元素覆蓋。
對(duì)文字的影響
浮動(dòng)元素旁邊的行框被縮短,從而給浮動(dòng)元素流出空間,因而行框圍繞浮動(dòng)框厢岂。
<div style="border: solid 1px #4C4E4D; width:240px;height: 240px;">
<div style="height: 100px; width: 100px; background-color: #ECD06F; float:left;">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法
沒有預(yù)先給父元素設(shè)置高度光督，子元素浮動(dòng)引起父元素高度塌陷。
浮動(dòng)使得元素脫離文檔流塔粒，所以子元素不能撐開父元素的高度结借。此時(shí)的div中，相當(dāng)于div中子元素高度為0卒茬，所以發(fā)生了父元素高度塌陷現(xiàn)象船老。
清除浮動(dòng)指：消除浮動(dòng)引起的父元素高度塌陷問題咖熟。
清理浮動(dòng)的方法
父級(jí)div定義height屬性；
添加新的元素努隙，應(yīng)用 clear：both;`
<div style="border: solid 1px #4C4E4D; width:340px;">
<div style="height: 100px; width: 100px; background-color: #ECD06F; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: #3C948B; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: #1A99AA; float:left;">
</div>
<div style="clear:both;">
</div>
</div>
- 父級(jí)div定義偽類:after和zoom
<head>
<style>
#clearfix {
*zoom: 1;
}
#clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div id="clearfix" style="border: solid 1px #4C4E4D; width:340px;">
<div style="height: 100px; width: 100px; background-color: #ECD06F; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: #3C948B; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: #1A99AA; float:left;">
</div>
</div>
BFC清理浮動(dòng)
通用的清理浮動(dòng)方法
/*方法1*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:block;
clear:left;
}
/*方法2*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}
有幾種定位方式球恤，分別是如何實(shí)現(xiàn)定位的，參考點(diǎn)是什么荸镊，使用場(chǎng)景是什么咽斧？
| 定位方式 | 實(shí)現(xiàn)原理 | 參考點(diǎn) | 使用場(chǎng)景 |
|---|---|---|---|
| static | 順序文檔流 | 父元素 | （默認(rèn)值） 順序文檔生成 |
| relative | 元素保留所占空間，相對(duì)于普通位置定位 | 原來位置 | 絕對(duì)定位的參考點(diǎn)或者內(nèi)容的小偏移 |
| absolute | 元素框從文檔流完全刪除躬存，然后進(jìn)行定位 | body塊或者相對(duì)于position值不為static的第一位祖先元素來定位 | 居中或絕對(duì)位置 |
| fixed | 固定在瀏覽器的窗口中张惹，不會(huì)隨著窗口的滾動(dòng)和產(chǎn)生位置變化 | 瀏覽器窗口 | 固定邊欄或底欄 |
z-index 有什么作用? 如何使用?
z-index 屬性指定了一個(gè)元素及其子元素的 z-order。 當(dāng)元素之間重疊的時(shí)候岭洲，z-order 決定哪一個(gè)元素覆蓋在其余元素的上方顯示宛逗。 通常來說 z-index 較大的元素會(huì)覆蓋較小的一個(gè)。
對(duì)于一個(gè)已經(jīng)定位的元素（即position屬性值是非static的元素）盾剩，z-index 屬性指定：
- 層疊順序
- 層疊上下文
- 層疊水平
z-index屬性一共可以取3個(gè)值：
- auto：（默認(rèn)值）雷激，當(dāng)前元素的層疊級(jí)數(shù)為0，不會(huì)創(chuàng)建層疊上下文告私；
-
<integer>：整型數(shù)字屎暇，可以為正負(fù)值，指示層疊級(jí)數(shù)驻粟，創(chuàng)建新的層疊上下文根悼； - inherit：繼承父元素屬性值。
注意：z-index只在定位元素中起作用
<style>
.container{
position: relative;
z-index: 1;
border: 2px dashed black;
width: 600px;
height: 200px;
margin: 0 auto;
}
.top{
position: absolute;
background-color: gold;
width: 80%;
height:40%;
margin: 2em;
z-index: 4;
opacity: 0.6;
}
.bottom{
position: absolute;
background-color: lightgreen;
width: 40%;
height: 40%;
margin: 5em;
z-index: 3;
}
</style>
</head>
<body>
<div class="container">
<div class="top"></div>
<div class="bottom"></div>
</div>
</body>
顯示效果為：
在這個(gè)示例中蜀撑，top盒子設(shè)置為
z-index:4;而bottom盒子設(shè)置為z-index:3;根據(jù)上圖可以得知挤巡，top盒子的層疊順序高于bottom的層疊順序,所以top盒子顯示在上層。
層疊順序
每個(gè)元素都有層疊順序酷麦，當(dāng)元素發(fā)生層疊時(shí)矿卑，元素的層級(jí)高的會(huì)優(yōu)先顯示在上面，層級(jí)一樣的則會(huì)根據(jù)dom的先后順序進(jìn)行渲染沃饶，后面的會(huì)覆蓋前面的粪摘。
根據(jù)上圖不使用z-index改變層疊順序：
<style>
.container {
border: 2px dashed black;
width: 600px;
height: 200px;
margin: 0 auto;
}
.top {
background-color: gold;
width: 400px;
height: 80px;
opacity: 0.6;
}
.bottom {
background-color: lightgreen;
width: 200px;
height: 100px;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="container">
<div class="top"></div>
<div class="bottom"></div>
</div>
</body>
在這個(gè)示例中，top盒子設(shè)置為inline-block绍坝；而bottom盒子仍然為block徘意，根據(jù)上圖可以得知，top盒子的層疊順序高于bottom的層疊順序,所以top盒子顯示在上層轩褐。
z-index的層疊順序并不是值越大椎咧，顯示越靠前，前提是要在同一級(jí)div中。
<style>
.container {
border: 2px dashed black;
width: 600px;
height: 200px;
margin: 0 auto;
}
.top {
background-color: gold;
width: 400px;
height: 80px;
opacity: 0.6;
}
.bottom {
position: absolute;
background-color: lightgreen;
width: 200px;
height: 100px;
margin-top: -50px;
z-index: 3;
}
.bottom>div{
position: absolute;
background-color: #00C0FF;
width: 180px;
height: 80px;
margin-top: 70px;
margin-left: 120px;
z-index: 9999;
}
</style>
</head>
<body>
<div class="container">
<div class="top"></div>
<div class="bottom">
<div></div>
</div>
</div>
</body>
參考資料：
http://web.jobbole.com/86008/
https://webdesign.tutsplus.com/zh-hans/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892
position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative：元素位置發(fā)生變化勤讽，但在文檔流中的位置不變蟋座，不會(huì)影響后面元素在文檔流中的顯示；
負(fù)margin會(huì)引起元素的顯示位置和文檔流的改變脚牍，且會(huì)影響后面元素在文檔流中的顯示向臀。
BFC 是什么？如何生成 BFC诸狭？BFC 有什么作用券膀？舉例說明
塊級(jí)格式化上下文，在內(nèi)部形成一個(gè)獨(dú)立的渲染區(qū)域驯遇，并根據(jù)內(nèi)部規(guī)則進(jìn)行布局芹彬，和外部元素相互獨(dú)立。
BFC 特性
BFC會(huì)阻止垂直外邊距（margin-top叉庐、margin-bottom）折疊
- 按照BFC的定義舒帮，只有同屬于一個(gè)BFC時(shí)，兩個(gè)元素才有可能發(fā)生垂直Margin的重疊陡叠，這個(gè)包括相鄰元素玩郊，嵌套元素，只要他們之間沒有阻擋(例如邊框枉阵，非空內(nèi)容译红，padding等)就會(huì)發(fā)生margin重疊。
- 因此要解決margin重疊問題岭妖，只要讓它們不在同一個(gè)BFC就行了，但是對(duì)于兩個(gè)相鄰元素來說反璃，意義不大昵慌，沒有必要給它們加個(gè)外殼，但是對(duì)于嵌套元素來說就很有必要了淮蜈，只要把父元素設(shè)為BFC就可以了斋攀。這樣子元素的margin就不會(huì)和父元素的margin發(fā)生重疊
BFC不會(huì)重疊浮動(dòng)元素
如何形成BFC
float:left|rightoverflow:hidden|auto|scrolldisplay:table-cell|table-caption|inline-blockposition:absolute|fixed
局限性
使用BFC使用float的時(shí)候會(huì)使父容器長度縮短，而且還有個(gè)重要缺陷——父容器float解決了其塌陷問題梧田，那么父容器的父容器怎么辦淳蔼？overflow屬性會(huì)影響滾動(dòng)條和絕對(duì)定位的元素；position會(huì)改變?cè)氐亩ㄎ环绞讲妹校@是我們不希望的鹉梨，display這幾種方式依然沒有解決低版本IE問題。
hasLayout
IE6穿稳、7內(nèi)有個(gè)hasLayout的概念存皂，當(dāng)元素的hasLayout屬性值為true的時(shí)候會(huì)達(dá)到和BFC類似的效果，元素負(fù)責(zé)本身及其子元素的尺寸設(shè)置和定位。 下面使元素hasLayout為true
position: absolutefloat: left|rightdisplay: inline-block-
width: 除 “auto” 外的任意值 -
height: 除 “auto” 外的任意值 -
zoom: 除 “normal” 外的任意值 writing-mode: tb-rl- 在IE7中使用
overflow: hidden|scroll|auto也可以使hasLayout:true;
在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并旦袋？如何合并骤菠？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例
塊的頂部外邊距和底部外邊距有時(shí)被組合(折疊)為單個(gè)外邊距疤孕，其大小是組合到其中的最大外邊距商乎，這種行為稱為外邊距塌陷(margin collapsing)，有的地方翻譯為外邊距合并祭阀。
- 相鄰的兄弟姐妹元素
毗鄰的兩個(gè)兄弟元素之間的外邊距會(huì)塌陷（除非后者兄弟姐妹需要清除過去的浮動(dòng)）鹉戚。
- 塊級(jí)父元素與其第一個(gè)/最后一個(gè)子元素
如果塊級(jí)父元素中，不存在上邊框柬讨、上內(nèi)邊距崩瓤、內(nèi)聯(lián)元素、 清除浮動(dòng) 這四條屬性（也可以說踩官，當(dāng)上邊框?qū)挾燃吧蟽?nèi)邊距距離為0時(shí)）却桶，那么這個(gè)塊級(jí)元素和其第一個(gè)子元素的上邊距就可以說”挨到了一起“。此時(shí)這個(gè)塊級(jí)父元素和其第一個(gè)子元素就會(huì)發(fā)生上外邊距合并現(xiàn)象蔗牡，換句話說颖系，此時(shí)這個(gè)父元素對(duì)外展現(xiàn)出來的外邊距將直接變成這個(gè)父元素和其第一個(gè)子元素的margin-top的較大者。
類似的辩越，若塊級(jí)父元素的 margin-bottom 與它的最后一個(gè)子元素的margin-bottom 之間沒有父元素的 border嘁扼、padding、inline content黔攒、height趁啸、min-height、 max-height 分隔時(shí)督惰，就會(huì)發(fā)生下外邊距合并現(xiàn)象不傅。
- 父元素的上邊距會(huì)與第一個(gè)子元素的上邊距合并；
- 最后一個(gè)子元素的下邊距會(huì)與父元素的下邊距合并赏胚。
?案例：
<div style="background: #ECD06F;margin: 20px;overflow: hidden;">
<div style="background: #3C948B;margin: 40px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo.
</div>
</div>
- 空塊元素
如果存在一個(gè)空的塊級(jí)元素访娶，其 border、padding觉阅、inline content崖疤、height、min-height 都不存在典勇。那么此時(shí)它的上下邊距中間將沒有任何阻隔劫哼，此時(shí)它的上下外邊距將會(huì)合并。
-
以上3種情況的混合：
stacking level 4
參考信息：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
http://geekplux.com/2014/03/14/collapsing_margins.html
外邊距合并的規(guī)則：
- 兩個(gè)margin都是正值的時(shí)候割笙，取兩者的最大值沦偎；
- 當(dāng) margin 都是負(fù)值的時(shí)候，取的是其中絕對(duì)值較大的，然后豪嚎，從0位置搔驼，負(fù)向位移；
- 當(dāng)有正有負(fù)的時(shí)候侈询，先取出負(fù) margin 中絕對(duì)值中最大的舌涨，然后，和正 margin 值中最大的 margin 相加扔字。
- 所有毗鄰的margin要一起參與運(yùn)算囊嘉，不能分步進(jìn)行。
消除邊界合并的方法：
- 被非空內(nèi)容革为、padding扭粱、border 或 clear 分隔開。
- 不在一個(gè)普通流中或一個(gè)BFC中震檩。
- margin在垂直方向上不毗鄰琢蛤。
