Question1:浮動(dòng)元素有什么特征扑毡?對(duì)父容器钥星、其他浮動(dòng)元素、普通元素稿黍、文字分別有什么影響?
- 先了解什么是文檔流: 文檔是html元素在頁(yè)面中排列布局的方式拱烁,塊狀元素自上到下排列,行內(nèi)元素由左到右排列噩翠。
- 浮動(dòng)(float): 可以讓元素脫離文檔流戏自,瀏覽器渲染時(shí)感知不到它的存在,就好像浮在上面的感覺伤锚!浮動(dòng)的值有:float: top | right | bottom | left; 對(duì)一個(gè)元素進(jìn)行的float設(shè)置擅笔,可以對(duì)其上志衣、右、下猛们、左設(shè)置念脯。
- 浮動(dòng)的定義(w3c): 浮動(dòng)的框可以向左或向右移動(dòng),直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹雇涮浴S捎诟?dòng)框不在文檔的普通流中绿店,所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。
- 影響:
-父容器:父容器框就是浮動(dòng)元素的包含框就是浮動(dòng)框碰到它就會(huì)停止庐橙。
對(duì)父元素的所有子元素進(jìn)行了浮動(dòng)假勿,其內(nèi)容會(huì)塌陷(如下圖所示)
Question2:清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法
浮動(dòng)的特性,導(dǎo)致本屬于普通流中的元素浮動(dòng)之后态鳖,包含框內(nèi)部由于不存在其他普通流元素了转培,也就表現(xiàn)出高度為0(高度塌陷)。在實(shí)際布局中浆竭,往往這并不是我們所希望的浸须,所以需要閉合浮動(dòng)元素,使其包含框表現(xiàn)出正常的高度邦泄。
-方法:
1.添加空標(biāo)簽
2.父元素設(shè)置overflow:hidden删窒;
Question3:有幾種定位方式,分別是如何實(shí)現(xiàn)定位的虎韵,參考點(diǎn)是什么易稠,使用場(chǎng)景是什么?
- 相對(duì)定位(position:relative包蓝;): 相對(duì)其元素本身進(jìn)行定位驶社,原來(lái)所占據(jù)的文檔流位置不變,緊緊是可視化排列布局發(fā)生了位置便宜测萎;可對(duì)top亡电、right、left硅瞧、bottom進(jìn)行設(shè)置份乒。
- 絕對(duì)定位(position:absolute;) :相對(duì)于第一個(gè)非static父元素進(jìn)行絕對(duì)定位腕唧;如果一直沒有找到父元素或辖,則根據(jù)根節(jié)點(diǎn)html元素進(jìn)行定位,對(duì)于設(shè)置絕對(duì)定位的元素脫離了文檔流枣接,可對(duì)top颂暇、right、bottom但惶、left進(jìn)行設(shè)置耳鸯。
- 固定定位(position: fixed湿蛔;):相對(duì)窗口(viewport)進(jìn)行定位;脫離文檔流县爬,可對(duì)top阳啥、right、bottom财喳、left進(jìn)行設(shè)置察迟。
Question4:z-index 有什么作用? 如何使用?
所有瀏覽器都支持z-index屬性,其設(shè)置的是元素的堆疊順序纲缓,擁有更高的堆疊順序的元素處于擁有低順序的前面卷拘,可設(shè)置為負(fù)的。
- 只有在定位的情況下才能用:
position:relative祝高;
position: absolute栗弟;
position:fixed;
Question5:position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative:
負(fù)margin:
根據(jù)以上兩圖可以看出使用負(fù)margin進(jìn)行偏移的文檔流發(fā)生了變化即后面的元素排列布局也會(huì)隨之發(fā)生變化工闺。
Question6:如何讓一個(gè)固定寬高的元素在頁(yè)面上垂直水平居中?
Question7:BFC 是什么乍赫?如何生成 BFC?BFC 有什么作用陆蟆?舉例說(shuō)明
BFC即Block Formatting Context的縮寫雷厂,中文譯為塊級(jí)格式化上下文。它是一個(gè)獨(dú)立渲染區(qū)域叠殷,只有Block-level box參與改鲫,它規(guī)定了內(nèi)部的Block-level Box如何布局,并且與這個(gè)區(qū)域外部毫不相干林束。
BFC布局規(guī)則:
1.內(nèi)部的box會(huì)在垂直方向一個(gè)接一個(gè)地放置像棘。
2.box垂直方向的距離有margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰box的margin會(huì)發(fā)生重疊壶冒。
3.每個(gè)元素的margin box的左邊缕题,與包含塊border box的左邊相互接觸。即使浮動(dòng)也是一樣胖腾。
4.bfc就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器烟零,容器里面的子元素不會(huì)影響到外面的元素。反之也是如此咸作。
5.bfc區(qū)域不會(huì)與float box重疊锨阿。
6.bfc就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器,容器里面的子元素不會(huì)影響到外面的元素记罚。反之也是如此墅诡。
7.計(jì)算bfc的高度時(shí),浮動(dòng)元素也參與計(jì)算毫胜。能生成BFC的元素:
1.根元素 html
2.float屬性不為none
3.position為absolute或者fixed
4.display為inline-block ,table-cell,flex,inlin-flex,(flex是彈性布局的意思)
5.overflow不為visible-
作用:
1.自適應(yīng)兩欄布局
第一欄設(shè)置了浮動(dòng)书斜,兩欄局域發(fā)生了重疊,要讓第二欄不與浮動(dòng)元素重疊酵使,把它變?yōu)锽FC即可.
2.清除內(nèi)部浮動(dòng)荐吉,解決父元素高度塌陷問(wèn)題
Question8:在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并?如何合并口渔?如何不讓相鄰元素外邊距合并样屠?給個(gè)父子外邊距合并的范例
-同在一個(gè)BFC內(nèi)的元素垂直外邊距會(huì)發(fā)生合并;
-讓其中一個(gè)被一個(gè)BFC塊包裹著獨(dú)立出來(lái)