浮動(dòng)元素有什么特征蒋歌？
- 元素浮動(dòng)之后不占據(jù)原來(lái)的位置
- 浮動(dòng)的盒子在一行上顯示
- 行內(nèi)元素浮動(dòng)之后轉(zhuǎn)換為具備有塊級(jí)元素的特征歧蕉，可以設(shè)置寬高
浮動(dòng)元素對(duì)父容器侧甫、其他浮動(dòng)元素珊佣、普通元素、文字分別有什么影響?
- 如果父容器的子元素都是浮動(dòng)元素闺骚，如果父容器沒(méi)有定義高度彩扔，那么父容器會(huì)失去高度妆档，在浮動(dòng)元素之外僻爽。
- 對(duì)于普通元素，普通元素會(huì)感知不到浮動(dòng)元素當(dāng)然存在贾惦，如果寬高合適胸梆，后面的元素會(huì)占據(jù)浮動(dòng)元素原來(lái)的位置
- 對(duì)于文字來(lái)說(shuō)，能感知到浮動(dòng)元素的存在须板，如果位置足夠碰镜，就能夠?qū)崿F(xiàn)文本繞圖的效果
清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法
清除浮動(dòng)不是不要浮動(dòng)，而是清楚浮動(dòng)帶來(lái)的不利影響
- 使父元素形成新的BFC习瑰，可以使用
overflow：hidden/auto/scroll``display:inline-blockfloat:方位等等 - 使用偽元素清楚浮動(dòng)(解決父容器浮動(dòng)元素影響),如
.clearfix{zoom:1;}
或者.clearfix:after{ content:"";display:block;visible:hidden;clear:both;} - 使用clear屬性
clear: both;解決周圍浮動(dòng)元素影響.
然后在需要清除浮動(dòng)的元素進(jìn)行調(diào)用绪颖。
有幾種定位方式，分別是如何實(shí)現(xiàn)定位的甜奄，參考點(diǎn)是什么柠横，使用場(chǎng)景是什么？
inherit 規(guī)定應(yīng)該從父元素繼承 position 屬性的值
static默認(rèn)值,沒(méi)有定位课兄，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）
relative生成相對(duì)定位的元素牍氛，相對(duì)于元素本身正常位置進(jìn)行定位,因此，left:20px會(huì)向元素的 left 位置添加20px(即向右偏移20px)
absolute生成絕對(duì)定位的元素烟阐，相對(duì)于static定位以外的第一個(gè)祖先元素（offset parent）進(jìn)行定位,元素的位置通過(guò) left, top, right以及 bottom 屬性進(jìn)行規(guī)定
fixed生成絕對(duì)定位的元素搬俊，相對(duì)于瀏覽器窗口進(jìn)行定位紊扬。元素的位置通過(guò) left, top, right 以及 bottom 屬性進(jìn)行規(guī)定
sticky,CSS3新屬性，表現(xiàn)類似position:relative和position:fixed的合體唉擂，在目標(biāo)區(qū)域在屏幕中可見(jiàn)時(shí)餐屎，它的行為就像position:relative; 而當(dāng)頁(yè)面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的表現(xiàn)就像position:fixed楔敌，它會(huì)固定在目標(biāo)位置普通流與相對(duì)定位
CSS有三種基本的定位機(jī)制：普通流啤挎，相對(duì)定位和絕對(duì)定位．普通流是默認(rèn)定位方式，在普通流中元素框的位置由元素在html中的位置決定卵凑，元素position屬性為static或繼承來(lái)的static時(shí)就會(huì)按照普通流定位庆聘，這也是我們最常見(jiàn)的方式相對(duì)定位比較簡(jiǎn)單，對(duì)應(yīng)position屬性的relative值勺卢，如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位伙判，它將出現(xiàn)在他所在的位置上，然后可以通過(guò)設(shè)置垂直或水平位置黑忱，讓這個(gè)元素相對(duì)于它自己移動(dòng)宴抚，在使用相對(duì)定位時(shí)，無(wú)論元素是否移動(dòng)甫煞，元素在文檔流中占據(jù)原來(lái)空間菇曲，只是表現(xiàn)出來(lái)的位置會(huì)改變.
絕對(duì)定位與固定定位相對(duì)定位可以看作特殊的普通流定位，元素位置是相對(duì)于它在普通流中位置發(fā)生變化抚吠，而絕對(duì)定位使元素的位置與文檔流無(wú)關(guān)常潮，也不占據(jù)文檔流空間，普通流中的元素布局就像絕對(duì)定位元素不存在一樣
絕對(duì)定位的元素的位置是相對(duì)于距離最近的非static祖先元素位置決定的楷力。如果元素沒(méi)有已定位的祖先元素喊式，那么他的位置就相對(duì)于初始包含塊html來(lái)定位
因?yàn)榻^對(duì)定位與文檔流無(wú)關(guān)，所以絕對(duì)定位的元素可以覆蓋頁(yè)面上的其他元素萧朝，可以通過(guò)z-index
z-index 有什么作用? 如何使用?
-
z-index屬性指定一個(gè)元素的堆疊順序岔留。因?yàn)榻^對(duì)定位的元素脫離了普通流，所以絕對(duì)定位的元素可以覆蓋頁(yè)面上的其它元素检柬。這時(shí)可以通過(guò)給元素設(shè)置z-index屬性來(lái)控制疊放順序献联，擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。 -
z-index有三個(gè)屬性auto默認(rèn),堆疊順序與父元素相等何址。number設(shè)置元素的堆疊順序里逆。inherit規(guī)定應(yīng)該從父元素繼承z-index屬性的值。
position:relative和-margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative;只相對(duì)自己原本位置發(fā)生偏移头朱，不影響其它普通流中元素的位置运悲。-margin：除了讓元素自身發(fā)生偏移還影響其它普通流中的元素。
BFC 是什么项钮？如何生成 BFC班眯？BFC 有什么作用希停？舉例說(shuō)明
- BFC是指塊級(jí)元素格式化，在同一個(gè)BFC中署隘，元素會(huì)遵守一些規(guī)則宠能，如從上到下排列，邊距合并等磁餐，如果是相鄰兩個(gè)元素分別處于兩個(gè)BFC當(dāng)中违崇，則一般不會(huì)遵循這些規(guī)則。
- 形成新的BFC诊霹，可以使用
overflow：hidden/auto/scroll``display:inline-blockfloat:方位position - 作用：（1） 解決margin重疊問(wèn)題羞延，在同一個(gè)BFC中，相鄰元素之間的邊距會(huì)合并脾还，如果把這兩個(gè)元素分別放在兩個(gè)BFC中伴箩，那么他們的邊距就不會(huì)合并。一般應(yīng)用于嵌套關(guān)系鄙漏。（2）清除浮動(dòng)嗤谚。BFC不會(huì)重疊浮動(dòng)元素。
在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并怔蚌？如何合并巩步？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例
- 出現(xiàn)合并的場(chǎng)景：根據(jù)BFC的定義桦踊，只有同屬一個(gè)BFC時(shí)椅野，兩個(gè)元素才有可能發(fā)生垂直margin的重疊，這個(gè)包括相鄰元素钞钙，嵌套元素(只要他們之間沒(méi)有阻擋（例如邊框鳄橘，非空內(nèi)容声离，padding等)）就會(huì)發(fā)生marging重疊
- 合并的類型有：相鄰兄弟元素外邊距合并芒炼；父子元素外邊距合并 ；非兄弟非父子元素外邊距合并术徊；自身外邊距合并（content為0本刽，上下margin產(chǎn)生合并）
- 如何合并：兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，折疊結(jié)果是它們兩者之間較大的值;兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)赠涮，折疊結(jié)果是兩者絕對(duì)值的較大值;兩個(gè)外邊距一正一負(fù)時(shí)子寓，折疊結(jié)果是兩者的相加的和
- 如何不讓相鄰元素合并：為父元素設(shè)置 BFC 或 padding 或 border ;兄弟元素間設(shè)置 float 或 inline-block 或 absolute.
body{ width:300px; height:300px; border:1px solid; } .parent{ background:yellow; margin-top:10px; } .child{ background:red; margin-top:30px; } <body><div class="parent"><div class="child">紅色</div></div></body>
這時(shí)候你外邊距是合并的
而在父元素加display：inline-block；這時(shí)候就會(huì)形成一個(gè)新的BFC笋除，邊距不會(huì)合并斜友。例子1.parent{background: yellow;margin-top:30px; display: inline-block;}.child{background:red;margin:50px; }
代碼1----> 參考
代碼2---->參考
代碼3---->參考
代碼4---->參考
