問答
浮動元素有什么特征搀捷？對父容器星掰、其他浮動元素、普通元素嫩舟、文字分別有什么影響?
浮動元素脫離文檔流氢烘，普通流中的塊級元素感知不到浮動元素的存在;根據(jù)float屬性值 左右移動，直到它的邊緣碰到父元素包含框或者另外一個浮動元素的框的邊緣才停止移動家厌。
父容器：對于其父元素來說播玖，元素浮動之后，它脫離當(dāng)前正常的文檔流饭于，所以它也無法撐開其父元素蜀踏，造成父元素的塌陷。
其他浮動元素：當(dāng)一個浮動元素在浮動過程中碰到同一個方向的浮動元素時掰吕，它會緊跟在它們后面果覆，當(dāng)空間不夠的時候會被浮動元素卡住。
普通元素：普通元素?zé)o法感知到浮動元素殖熟，占據(jù)浮動元素所在的位置局待，但是普通元素處于浮動元素的下層。
文字：浮動元素旁邊的文字框被縮短菱属，從而給浮動元素留出空間钳榨，文字框圍繞浮動元素。
清除浮動指什么? 如何清除浮動? 兩種以上方法
- 清除浮動：清除浮動指的是運(yùn)用clear屬性去解決浮動父容器高度塌陷的問題纽门，clear屬性規(guī)定元素的哪一側(cè)不允許其他浮動元素薛耻。
- 在最后添加一個空div 應(yīng)用樣式 clear: both，對它清理膜毁。缺點(diǎn)就是添加了一個無意義的標(biāo)簽
- 通用清理浮動方案
方法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)是什么瘟滨，使用場景是什么候醒？
- 用css有三種定位方式：普通流，相對定位和絕對定位
- 定位和使用場景
inherit從父元素繼承position 屬性的值杂瘸。
static默認(rèn)值倒淫，沒有定位，元素出現(xiàn)在正常的流中败玉。
relative生成相對定位敌土，相對于自身的定位來進(jìn)行移動镜硕，left:20px 占有原有的位子向左移動20px。
absolute生成絕對定位返干，相對于最近定位的父元素進(jìn)行定位兴枯，不占有原有的位子
fixed生成絕對定位元素，相對于viewport進(jìn)行定位矩欠。
stickycss3新特性财剖，對象在常態(tài)時遵循普通流。它就像是relative和fixed的合體癌淮，當(dāng)在屏幕中時按常規(guī)流排版躺坟，當(dāng)卷動到屏幕外時則表現(xiàn)如fixed。
z-index 有什么作用? 如何使用?
- z-index用于控制BFC中元素的堆疊順序乳蓄，z-index數(shù)值越大元素位置越靠上
position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
- position:relative 相對元素自身偏移的時候咪橙，不脫離普通流，仍占據(jù)原有空間虚倒，不影響其它元素
- 負(fù)margin 元素自身偏移的時候美侦，影響其它元素的位置也會相應(yīng)改變。
BFC 是什么魂奥？如何生成 BFC音榜？BFC 有什么作用？舉例說明
- BFC --（Block Format Content 塊級格式化上下文）
- 如何生成 BFC捧弃？根元素赠叼、float屬性不為none、position為absolute或fixed违霞、display為inline-block, table-cell, table-caption, flex, inline-flex嘴办、overflow不為visible時元素會生成BFC
- BFC會阻止垂直外邊距（margin-top、margin-bottom）折疊 买鸽，BFC不會重疊浮動元素涧郊，BFC可以包含浮動
在什么場景下會出現(xiàn)外邊距合并？如何合并眼五？如何不讓相鄰元素外邊距合并妆艘？給個父子外邊距合并的范例
- 外邊距合并指的是，當(dāng)兩個垂直外邊距相遇時看幼，它們將形成一個外邊距批旺。
- 合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。
--1. 兄弟元素外邊距合并 div1和div2的外邊距就是20px
div1 {
width:100px;
height:100px;
marign:10px;
}
div2 {
width:100px;
height:100px;
margin:20px;
}
--2. 父子元素的外邊距合并:如果父子元素之間沒有padding和空白內(nèi)容等時就會發(fā)生外邊距合并诵姜。
.parent {
width: 200px;
height: 100px;
margin-top:10px;
background-color: red;
}
.child {
width: 100px;
height: 100px;
margin-top:30px;
background-color: yellow;
}
--3. 外邊距自己和自己合并汽煮，如果一個元素沒有邊框和填充，但有上下外邊距，這時它的上下外邊距會合并暇赤。
