- 浮動(dòng)元素有什么特征椎咧？對(duì)父容器玖详、其他浮動(dòng)元素把介、普通元素、文字分別有什么影響?
浮動(dòng)元素脫離文檔流蟋座，會(huì)隨著float屬性值的設(shè)定向左或向右移動(dòng)拗踢，直到它的邊緣碰到它的包含框或浮動(dòng)元素的邊緣，普通文檔流會(huì)視浮動(dòng)元素不存在
- 對(duì)父容器, 如果子元素都是浮動(dòng)元素, 父元素的高度無法撐開, 導(dǎo)致父容器高度塌陷.
- 對(duì)其他浮動(dòng)元素, 浮動(dòng)元素邊緣接觸到其他浮動(dòng)元素就會(huì)停止移動(dòng), 如果包含塊太窄向臀，無法完全水平容納浮動(dòng)元素巢墅，那么其他浮動(dòng)元素就會(huì)向下移動(dòng)，直到有足夠空間券膀。如果浮動(dòng)元素高度不同君纫，那么向下移動(dòng)時(shí)可能會(huì)被卡住.
- 對(duì)普通元素, 會(huì)視浮動(dòng)元素不存在; 如果寬高合適, 普通元素會(huì)占據(jù)原來浮動(dòng)元素占據(jù)的空間, 造成布局變動(dòng); 浮動(dòng)元素可以覆蓋普通元素.
- 對(duì)文字, 文本內(nèi)容感知浮動(dòng)元素的存在, 造成文字會(huì)環(huán)繞在浮動(dòng)元素周圍.
- 清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法
由于父元素認(rèn)為其內(nèi)的浮動(dòng)的子元素是不存在的, 所以會(huì)父元素邊框無法撐開的問題, 清楚浮動(dòng)解決浮動(dòng)父容器高度塌陷問題;
方法一:
<div style="clear: both;"></div>
方法二:
利用BFC內(nèi)的浮動(dòng)子元素參與計(jì)算高度的特性.
.parent {
overflow: hidden;
}
方法三;
通用方法, 其實(shí)同方法一
.parent:after {
content: "";
display: block;
clear: both;
}
- 有幾種定位方式，分別是如何實(shí)現(xiàn)定位的芹彬，參考點(diǎn)是什么蓄髓，使用場(chǎng)景是什么？
position總的來說有兩類分類: 相對(duì)定位和絕對(duì)定位
取值可以有: static | relative | absolute | fixed | sticky
static
- 是根據(jù)正常的文檔流定位的
- 是默認(rèn)的屬性值.
relative
- 是根據(jù)正常的文檔流定位
- 相對(duì)于本身的位置進(jìn)行偏離
- 不影響其他元素, 本身在頁面布局中的位置仍然存在
- 形成了重疊上下文, z-index有效
absolute
- 不在正常的文檔流中
- 在頁面布局中不占據(jù)位置
- 相對(duì)于離它最近的設(shè)置了postion 不是static的祖先的定位; 如果不存在這樣的祖先, 就是相對(duì)于<body>的定位.
fixed
- 不在正常的文檔流中
- 在頁面布局中不占據(jù)位置
- 相對(duì)于視窗(viewport, 即<html>)來定位
- 視窗滾動(dòng)時(shí), 位置并不會(huì)移動(dòng)
- 可以用來做在滾動(dòng)條滾動(dòng)時(shí)固定不變的部分
sticky
- 結(jié)合了 position:relative 和 position:fixed 兩種定位功能于一體的特殊定位
- 元素定位表現(xiàn)為在跨越特定閾值前為相對(duì)定位舒帮，之后為固定定位
- 兼容性較差
參考了css position mdn, 博客
- z-index 有什么作用? 如何使用?
z-index是針對(duì)網(wǎng)頁顯示中的一個(gè)特殊屬性会喝。因?yàn)轱@示器是顯示的圖案是一個(gè)二維平面，擁有x軸和y軸來表示位置屬性玩郊。為了表示三維立體的概念如顯示元素的上下層的疊加順序引入了z-index屬性來表示z軸的區(qū)別好乐。表示一個(gè)元素在疊加順序上的上下立體關(guān)系.
在一個(gè)層疊上下文中, z-index值較大的元素將疊加在z-index值較小的元素之上。對(duì)于未指定此屬性的定位對(duì)象瓦宜，z-index 值為正數(shù)的對(duì)象會(huì)在其之上蔚万，而 z-index 值為負(fù)數(shù)的對(duì)象在其之下.可以參考這個(gè)例子
position: relative | absolute | fixed 會(huì)創(chuàng)建一個(gè)new stacking context, z-index屬性適用于定位元素（position屬性值為 relative 或 absolute 或 fixed的對(duì)象），用來確定定位元素在垂直于顯示屏方向（稱為Z軸）上的層疊順序
- position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
兩者都可以是元素發(fā)生偏移.
相對(duì)定位發(fā)生偏移之后, 不影響其他元素的布局, 之前元素占據(jù)的空間扔存在.
負(fù)margin發(fā)生偏移后, 原來元素占據(jù)的空間會(huì)被讓出, 影響周圍元素的布局.
可以參考實(shí)例
- BFC 是什么临庇？如何生成 BFC反璃？BFC 有什么作用？舉例說明
BFC：塊級(jí)格式化上下文假夺，它是指一個(gè)獨(dú)立的塊級(jí)渲染區(qū)域淮蜈，只有Block-level BOX參與，該區(qū)域擁有一套渲染規(guī)則來約束塊級(jí)盒子的布局已卷，且與區(qū)域外部無關(guān)
CSS2.1中規(guī)定滿足下列CSS聲明之一的元素便會(huì)生成BFC:
- 根元素
- float的值不為none
- overflow的值不為visible
- display的值為inline-block梧田、table-cell、table-caption
- position的值為absolute或fixed
BFC特性:
- 按照BFC的定義, 只要同屬于一個(gè)BFC, 兩個(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)元素
實(shí)例可以參考 - BFC可以包含浮動(dòng)
計(jì)算BFC高度時(shí), 浮動(dòng)子元素也參與運(yùn)算
所以這條可以用來處理子元素都是浮動(dòng)元素時(shí),父元素沒有忽略子元素高度的問題
實(shí)例可以參考
- 在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并侧蘸？如何合并裁眯？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例
按照BFC的定義, 只要同屬于一個(gè)BFC, 兩個(gè)元素才有可能發(fā)生垂直Margin的重疊, 這個(gè)包括相鄰元素, 嵌套元素,只要他們之間沒有阻擋(例如邊框,非空內(nèi)容,padding等)就會(huì)發(fā)生margin重疊
- 兩個(gè)相鄰的外邊距都是正數(shù)時(shí)讳癌，折疊結(jié)果是它們兩者之間較大的值
- 兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)穿稳，折疊結(jié)果是兩者絕對(duì)值的較大值
- 兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的相加的和
阻止相鄰元素外邊距合并的方法是給相鄰元素添加一個(gè)外殼, 是兩個(gè)相鄰元素不在同一個(gè)BFC中.
舉例, 給.div2加了個(gè)外殼
要阻止父子外邊距合并, 可以讓父元素形成BFC
例子
可以參考Mdn外邊距合并,
CSS: 深入理解BFC和Margin Collapse (margin疊加或者合并外邊距)
代碼
