問(wèn)答
浮動(dòng)元素有什么特征？對(duì)父容器、其他浮動(dòng)元素、普通元素、文字分別有什么影響?
浮動(dòng)元素脫離文檔流，普通流中的塊級(jí)元素感知不到浮動(dòng)元素的存在;根據(jù)float屬性值 左右移動(dòng)，直到它的邊緣碰到父元素包含框或者另外一個(gè)浮動(dòng)元素的框的邊緣才停止移動(dòng)。
父容器：對(duì)于其父元素來(lái)說(shuō)，元素浮動(dòng)之后，它脫離當(dāng)前正常的文檔流，所以它也無(wú)法撐開其父元素，造成父元素的塌陷。
其他浮動(dòng)元素：當(dāng)一個(gè)浮動(dòng)元素在浮動(dòng)過(guò)程中碰到同一個(gè)方向的浮動(dòng)元素時(shí)，它會(huì)緊跟在它們后面，當(dāng)空間不夠的時(shí)候會(huì)被浮動(dòng)元素卡住。
普通元素：普通元素?zé)o法感知到浮動(dòng)元素，占據(jù)浮動(dòng)元素所在的位置，但是普通元素處于浮動(dòng)元素的下層。
文字：浮動(dòng)元素旁邊的文字框被縮短，從而給浮動(dòng)元素留出空間，文字框圍繞浮動(dòng)元素。
清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法
- 清除浮動(dòng)：清除浮動(dòng)指的是運(yùn)用clear屬性去解決浮動(dòng)父容器高度塌陷的問(wèn)題，clear屬性規(guī)定元素的哪一側(cè)不允許其他浮動(dòng)元素。
- 在最后添加一個(gè)空div 應(yīng)用樣式 clear: both，對(duì)它清理。缺點(diǎn)就是添加了一個(gè)無(wú)意義的標(biāo)簽
- 通用清理浮動(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)景是什么？
- 用css有三種定位方式：普通流，相對(duì)定位和絕對(duì)定位
- 定位和使用場(chǎng)景
inherit從父元素繼承position 屬性的值。
static默認(rèn)值，沒(méi)有定位，元素出現(xiàn)在正常的流中。
relative生成相對(duì)定位，相對(duì)于自身的定位來(lái)進(jìn)行移動(dòng)，left:20px 占有原有的位子向左移動(dòng)20px。
absolute生成絕對(duì)定位，相對(duì)于最近定位的父元素進(jìn)行定位，不占有原有的位子
fixed生成絕對(duì)定位元素，相對(duì)于viewport進(jìn)行定位。
stickycss3新特性，對(duì)象在常態(tài)時(shí)遵循普通流。它就像是relative和fixed的合體，當(dāng)在屏幕中時(shí)按常規(guī)流排版，當(dāng)卷動(dòng)到屏幕外時(shí)則表現(xiàn)如fixed。
z-index 有什么作用? 如何使用?
- z-index用于控制BFC中元素的堆疊順序，z-index數(shù)值越大元素位置越靠上
position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
- position:relative 相對(duì)元素自身偏移的時(shí)候，不脫離普通流，仍占據(jù)原有空間，不影響其它元素
- 負(fù)margin 元素自身偏移的時(shí)候，影響其它元素的位置也會(huì)相應(yīng)改變。
BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說(shuō)明
- BFC --（Block Format Content 塊級(jí)格式化上下文）
- 如何生成 BFC？根元素、float屬性不為none、position為absolute或fixed、display為inline-block, table-cell, table-caption, flex, inline-flex、overflow不為visible時(shí)元素會(huì)生成BFC
- BFC會(huì)阻止垂直外邊距（margin-top、margin-bottom）折疊 ，BFC不會(huì)重疊浮動(dòng)元素，BFC可以包含浮動(dòng)
在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例
- 外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。
- 合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。
--1. 兄弟元素外邊距合并 div1和div2的外邊距就是20px
div1 {
width:100px;
height:100px;
marign:10px;
}
div2 {
width:100px;
height:100px;
margin:20px;
}
--2. 父子元素的外邊距合并:如果父子元素之間沒(méi)有padding和空白內(nèi)容等時(shí)就會(huì)發(fā)生外邊距合并。
.parent {
width: 200px;
height: 100px;
margin-top:10px;
background-color: red;
}
.child {
width: 100px;
height: 100px;
margin-top:30px;
background-color: yellow;
}
--3. 外邊距自己和自己合并，如果一個(gè)元素沒(méi)有邊框和填充，但有上下外邊距，這時(shí)它的上下外邊距會(huì)合并。
