1.浮動(dòng)元素有什么特征?對(duì)父容器莺债、其他浮動(dòng)元素滋觉、普通元素、文字分別有什么影響?
特征
1.浮動(dòng)元素脫離文檔流齐邦,按照其外邊距指定的位置相對(duì)于它的上一個(gè)塊級(jí)元素(或父元素)顯示
2.浮動(dòng)元素后面的塊級(jí)元素的內(nèi)容會(huì)向此浮動(dòng)元素的外邊距靠齊椎侠,但是邊框和背景卻忽略浮動(dòng)元素而向上一個(gè)任意非浮動(dòng)元素靠齊
3.浮動(dòng)元素外邊緣碰到包含框或者另一個(gè)浮動(dòng)元素的框的邊緣會(huì)停下
4.普通流中的文字將會(huì)圍繞浮動(dòng)元素影響
對(duì)父容器的影響:如果父容器的子元素都是浮動(dòng)元素,那么父容器會(huì)失去高度措拇,在浮動(dòng)元素之外我纪。視覺上,父容器沒有包含住浮動(dòng)的子元素丐吓。
其它浮動(dòng)元素的影響:如果包含塊太窄無法容納水平排列的全部浮動(dòng)元素浅悉,那么其它浮動(dòng)元素會(huì)向下移動(dòng),直到有足夠的空間券犁,而如果浮動(dòng)元素的高度不同术健,那么向下移動(dòng)的時(shí)候可能會(huì)被卡住。
普通元素的影響:普通元素會(huì)視浮動(dòng)元素不見粘衬,占據(jù)浮動(dòng)元素原有的位置荞估,但會(huì)被浮動(dòng)元素遮罩。
對(duì)文字的影響:文字會(huì)感知到浮動(dòng)元素的存在稚新,會(huì)留出空間勘伺,形成環(huán)繞效果。
2.清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法
讓普通元素和文字不受浮動(dòng)元素的影響褂删,父容器感受到浮動(dòng)元素的存在
1.
overflow:auto\hidden
.clearfix:after{
content: " ";
display: block;
clear: left;
}
.clearfix:after{
content: " ";
display: table;
clear: both;
}
.clearfix{
*zoom: 1;
}
3.有幾種定位方式飞醉,分別是如何實(shí)現(xiàn)定位的,參考點(diǎn)是什么屯阀,使用場(chǎng)景是什么缅帘?
定位方式 | 參考點(diǎn) | 使用場(chǎng)景 |
---|---|---|
inherit | 從父元素繼承position屬性的值 | 一般不用 |
static | 默認(rèn)值,沒有定位 | 默認(rèn)值 |
relative | 相對(duì)于元素本身正常位置進(jìn)行定位 | 不影響原文檔流的情況下蹲盘,做細(xì)微調(diào)整股毫。子元素需要以自身為參考來做絕對(duì)定位 |
absolute | 生成絕對(duì)定位元素, 相對(duì)于static定位以外的第一個(gè)祖先元素 | 不需要占用原文檔流的位置 |
fixed | 絕對(duì)定位召衔,相對(duì)于瀏覽器窗口 | 需要在視口中一直保留這個(gè)元素 |
sticky | relative和fixed定位結(jié)合體 | 目標(biāo)區(qū)域在屏幕表現(xiàn)為relative定位铃诬,當(dāng)頁面滾動(dòng)超出目標(biāo)區(qū)域時(shí)變?yōu)閒ixed定位 |
注意:只有定位元素position:srelative、absolute苍凛、fixed
才可以設(shè)置top趣席、left、bottom醇蝴、right的值
4.z-index 有什么作用? 如何使用?
控制疊放順序宣肚,z-index越高,元素的位置越靠上悠栓,只作用在有定位屬性為relative霉涨、absolute按价、fixed中的元素上。
z-index僅在設(shè)置了position非static屬性的元素生效笙瑟,且z-index的值只能在兄弟元素之間比較楼镐。
Z-index默認(rèn)值為auto,則不建立層疊上下文。設(shè)置為0則會(huì)建立層疊上下文往枷。
例子:
5.position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative 不會(huì)影響其他元素位置框产,還占用原來的位置,可以單獨(dú)挪動(dòng)错洁。
負(fù)margin會(huì)影響到其他元素的位置秉宿。文檔流的位置發(fā)生偏移。
-
正常:
-
加了-margin:box1遮住了box屯碴,還帶著box2一起挪動(dòng)
-
加了position:relative:box和box2認(rèn)為box1還沒挪動(dòng)描睦,box1自己可以改位置
6.BFC 是什么?如何生成 BFC导而?BFC 有什么作用酌摇?舉例說明
- BFC
block formatting contexts,塊級(jí)格式化上下文嗡载,容器里面的子元素不會(huì)影響到外面的元素。
- 生成 BFC的元素:
1.根元素
2.float屬性不為none
3.position為absolute或fixed
4.display為inline-block仍稀、flex洼滚、inline-flex
5.overflow不為visible
- 特性:
1.內(nèi)部的box會(huì)在垂直方向,一個(gè)接一個(gè)的放置技潘。
2.box垂直方向的距離由margin決定遥巴,屬于同BFC的兩個(gè)相鄰box的margin會(huì)發(fā)生重疊,如果是父子關(guān)系的box,子b元素的margin-left邊緣不會(huì)超過父元素的邊緣
3.BFC的區(qū)域不會(huì)與float box重疊
4.BFC是頁面上的一個(gè)隔離的獨(dú)立容器享幽,容器里面的子元素不會(huì)影響到外面铲掐,反之如此
5.計(jì)算BFC高度時(shí),浮動(dòng)元素也參與計(jì)算
- 作用:
解釋margin邊距合并問題
發(fā)現(xiàn)浮動(dòng)元素contain float
不影響普通元素
- 例子:
當(dāng)box元素是浮動(dòng)的時(shí)候值桩,只有main里的文字發(fā)現(xiàn)了浮動(dòng)元素
給box加float:left;
marin加overflow:auto;
main發(fā)現(xiàn)浮動(dòng)摆霉,不與浮動(dòng)重疊。
7.在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并奔坟?如何合并携栋?如何不讓相鄰元素外邊距合并?給個(gè)父子外邊距合并的范例
垂直外邊距合并:兩個(gè)塊級(jí)元素垂直排列同時(shí)設(shè)置margin咳秉,相交部分margin合并婉支;合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。當(dāng)兩個(gè)外邊距都為負(fù)數(shù)時(shí)澜建,取其絕對(duì)值的較大者向挖,當(dāng)兩個(gè)外邊距為一正一負(fù)時(shí)蝌以,取兩者的和。
父子外邊距合并:
1 同一body的父子元素何之,給父元素中的子元素加margin跟畅,最后卻是整體的margin改變,而非父元素不動(dòng)子元素改變的效果
2 同一body的父子元素帝美,父元素沒有border碍彭、padding,子元素某些部分和父元素重疊
- 合并規(guī)則:
兩個(gè)margin都是正值的時(shí)候悼潭,取兩者的最大值庇忌;
當(dāng) margin 都是負(fù)值的時(shí)候,取的是其中絕對(duì)值較大的舰褪,然后皆疹,從0位置,負(fù)向位移占拍;
當(dāng)有正有負(fù)的時(shí)候略就,先取出負(fù) margin 中絕對(duì)值中最大的,然后晃酒,和正 margin 值中最大的 margin 相加表牢。
所有毗鄰的margin要一起參與運(yùn)算,不能分步進(jìn)行贝次。
- 解決方法:
1 給父元素加border或padding崔兴,或者加overflow:auto/hidden
(比較穩(wěn)定),或利用clear蛔翅。
2 不在一個(gè)普通流中或一個(gè)BFC中敲茄。
3 margin在垂直方向上不毗鄰。 - 例子
子元素加margin-top
父元素也跟著動(dòng)
父元素加了overflow
后山析,子元素margin-top
數(shù)值生效
父元素加border:
父元素加padding:
父元素加clear:
注:clear有兩種方法適用于i8以上瀏覽器堰燎,只需根據(jù)需要更換.clearfix部分(父元素)的代碼即可。border的顏色可以設(shè)置為transparent(透明)笋轨。
經(jīng)過以上實(shí)驗(yàn)發(fā)現(xiàn):
- 父元素加了border和padding,子元素margin秆剪、大小改變的數(shù)值超出父元素大小,不會(huì)撐大父元素爵政;
- 父元素加overflow:hidden,子元素margin鸟款、大小改變的數(shù)值超出父元素大小,有一部分子元素會(huì)被隱藏茂卦;父元素加overflow:auto何什,子元素大于父元素的話,父元素下面或者右側(cè)會(huì)有一個(gè)滾動(dòng)條等龙。
- 父元素加clear处渣,子元素margin伶贰、大小改變的數(shù)值超出父元素大小,父元素會(huì)被子元素?fù)未蟆?/li>
代碼題:
1.http://js.jirengu.com/pitecizaju/1/edit
2.http://js.jirengu.com/tikuyosiki/2/edit?html,css,output
3.http://js.jirengu.com/kifitulepa/2/edit
4.http://js.jirengu.com/kavifahiju/2/edit?html,css,output