1、浮動(dòng)元素有什么特征潭辈?對父容器鸯屿、其他浮動(dòng)元素澈吨、普通元素、文字分別有什么影響?
2寄摆、清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法
3谅辣、有幾種定位方式,分別是如何實(shí)現(xiàn)定位的婶恼,參考點(diǎn)是什么桑阶,使用場景是什么?
4勾邦、z-index 有什么作用? 如何使用?
5蚣录、position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
6、BFC 是什么检痰?如何生成 BFC包归?BFC 有什么作用?舉例說明
7铅歼、在什么場景下會(huì)出現(xiàn)外邊距合并公壤?如何合并?如何不讓相鄰元素外邊距合并椎椰?給個(gè)父子外邊距合并的范例
8厦幅、代碼
答案
1、
浮動(dòng)模型也是一種可視化格式模型慨飘,浮動(dòng)的框可以左右移動(dòng)(根據(jù)float屬性值而定)确憨,直到它的外邊緣碰到包含框或者另一個(gè)浮動(dòng)元素的框的邊緣。浮動(dòng)元素不在文檔的普通流中瓤的,文檔的普通流中的元素表現(xiàn)的就像浮動(dòng)元素不存在一樣.
對父容器的影響:如果父容器的子元素都是浮動(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)元素遮罩顿仇。
對文字的影響:文字會(huì)感知到浮動(dòng)元素的存在,會(huì)留出空間,形成環(huán)繞效果夺欲。
2跪帝、
清除浮動(dòng)是指結(jié)合clear屬性讓父元素在視覺上包圍浮動(dòng)元素。清除浮動(dòng)的方法:
(1) 在父元素的子元素最后添加一個(gè)空div些阅,并對其設(shè)置樣式:clear:both;
由于在子元素最后添加了空div,并清除了浮動(dòng)斑唬,因此父容器被撐開市埋。
<div style="border: solid 5px #0e0; width:300px;">
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
<div style="clear:both;"></div>
</div>/
(2)利用BFC來清除浮動(dòng)。
因?yàn)锽FC可以包含浮動(dòng)恕刘,因此可以讓父元素生成一個(gè)新的BFC從而包圍浮動(dòng)的子元素缤谎。
可以對父元素設(shè)定以下樣式之一生成新BFC。
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;
<div style="border: solid 5px #0e0; width:300px;overflow:hidden;">
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
</div>
(3)結(jié)合CSS特性的通用清除浮動(dòng)方案褐着,其本質(zhì)還是第1種方法坷澡。
/*方法1*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:block;
clear:left;
}
/*方法2*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}
3、
有幾種定位方式含蓉,分別是如何實(shí)現(xiàn)定位的频敛,參考點(diǎn)是什么,使用場景是什么馅扣?
(1)inherit
規(guī)定應(yīng)該從父元素繼承 position 屬性的值
(2)static
默認(rèn)值,沒有定位斟赚,元素出現(xiàn)在正常的流中(忽略 top, bottom, left, right 或者 z-index 聲明)
(3)relative
生成相對定位的元素,相對于元素本身正常位置進(jìn)行定位,因此差油,left:20px 會(huì)向元素的 left 位置添加20px
(4)absolute
生成絕對定位的元素拗军,相對于static定位以外的第一個(gè)祖先元素(offset parent)進(jìn)行定位,元素的位置通過 left, top,right 以及 bottom 屬性進(jìn)行規(guī)定
(5)fixed
生成絕對定位的元素,相對于瀏覽器窗口進(jìn)行定位蓄喇。元素的位置通過 left, top, right
以及 bottom 屬性進(jìn)行規(guī)定
(6)sticky
CSS3新屬性发侵,表現(xiàn)類似position:relative和position:fixed的合體,在目標(biāo)區(qū)域在屏幕中可見時(shí)妆偏,它的行為就像position:relative; 而當(dāng)頁面滾動(dòng)超出目標(biāo)區(qū)域時(shí)刃鳄,它的表現(xiàn)就像position:fixed,它會(huì)固定在目標(biāo)位置
CSS有三種基本的定位機(jī)制:普通流楼眷,相對定位和絕對定位
普通流是默認(rèn)定位方式铲汪,在普通流中元素框的位置由元素在html中的位置決定,元素position屬性為static或繼承來的static時(shí)就會(huì)按照普通流定位罐柳,這也是我們最常見的方式
相對定位比較簡單掌腰,對應(yīng)position屬性的relative值,如果對一個(gè)元素進(jìn)行相對定位张吉,它將出現(xiàn)在他所在的位置上齿梁,然后可以通過設(shè)置垂直或水平位置,讓這個(gè)元素相對于它自己移動(dòng),在使用相對定位時(shí)勺择,無論元素是否移動(dòng)创南,元素在文檔流中占據(jù)原來空間,只是表現(xiàn)出來的位置會(huì)改變
絕對定位與固定定位相對定位可以看作特殊的普通流定位省核,元素位置是相對于它在普通流中位置發(fā)生變化稿辙,而絕對定位使元素的位置與文檔流無關(guān),也不占據(jù)文檔流空間气忠,普通流中的元素布局就像絕對定位元素不存在一樣
絕對定位的元素的位置是相對于距離最近的非static祖先元素位置決定的给郊。如果元素沒有已定位的祖先元素膀息,那么他的位置就相對于初始包含塊html來定位
因?yàn)榻^對定位與文檔流無關(guān)览闰,所以絕對定位的元素可以覆蓋頁面上的其他元素麻顶,可以通過z-index
fixed固定定位是屬于絕對定位中的一種。一般使用場景淘钟,例如:導(dǎo)航欄宦赠,右側(cè)工具欄,底部回到頂部按鈕等米母。它的定位是相對于瀏覽器的視窗口(viewport)來定的勾扭,而其他的絕對定位則是相遇于文檔(html)定位的。
4爱咬、
z-index 屬性指定一個(gè)元素的堆疊順序尺借。因?yàn)榻^對定位的元素脫離了普通流,所以絕對定位的元素可以覆蓋頁面上的其它元素精拟。這時(shí)可以通過給元素設(shè)置z-index屬性來控制疊放順序燎斩,擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
z-index有三個(gè)屬性
auto 默認(rèn)蜂绎。堆疊順序與父元素相等栅表。
number設(shè)置元素的堆疊順序。
inherit規(guī)定應(yīng)該從父元素繼承 z-index 屬性的值师枣。
5怪瓶、
position:relative;只相對自己原本位置發(fā)生偏移,不影響其它普通流中元素的位置践美。
margin:除了讓元素自身發(fā)生偏移還影響其它普通流中的元素洗贰。
6、
BFC(Block formatting context)直譯為"塊級格式化上下文"陨倡。它是一個(gè)獨(dú)立的渲染區(qū)域敛滋,只有Block-level box參與, 它規(guī)定了內(nèi)部的Block-level Box如何布局兴革,并且與這個(gè)區(qū)域外部毫不相干绎晃。
BFC布局規(guī)則:
內(nèi)部的Box會(huì)在垂直方向蜜唾,一個(gè)接一個(gè)地放置;
Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊 每個(gè)元素的margin box的左邊庶艾, 與包含塊border box的左邊相接觸(對于從左往右的格式化袁余,否則相反)。即使存在浮動(dòng)也是如此;
BFC的區(qū)域不會(huì)與float box重疊;
BFC就是頁面上的一個(gè)隔離的獨(dú)立容器咱揍,容器里面的子元素不會(huì)影響到外面的元素颖榜。反之也如此;
計(jì)算BFC的高度時(shí),浮動(dòng)元素也參與計(jì)算;
哪些元素會(huì)生成BFC?:
根元素;
float: left|right;
overflow: hidden|auto|scroll;
display: table-cell|table-caption|inline-block;
position: absolute|fixed;
BFC的作用有:
(1) 解決margin重疊問題述召。所謂margin重疊是指處于同一個(gè)BFC的相鄰元素朱转、嵌套元素,只要它們之間沒有阻擋(如:邊框积暖、非空內(nèi)容、padding等)就會(huì)發(fā)生margin重疊怪与。這是只要讓其中一個(gè)元素生成新的BFC就能解決margin重疊問題夺刑。
(2) 清除浮動(dòng)。因?yàn)锽FC可以包含浮動(dòng)分别,所以讓父容器生成新的BFC可以讓父容器在視覺上包圍了浮動(dòng)的子元素遍愿,因而清除了浮動(dòng)。
7耘斩、
外邊距合并指的是沼填,當(dāng)兩個(gè)垂直外邊距相遇時(shí),即當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)括授,第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并坞笙。它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者荚虚。
父子外邊距合并的條件是父元素沒有邊框和padding隔開薛夜。形成BFC 可以阻止外邊柜合并,如上一題的給元素添加浮動(dòng)版述,絕對定位梯澜,inline-block,父子元素情況下,給父元素添加overflow不為none也可以阻止渴析。
#d1 {
width:100px;
height:100px;
margin-bottom:20px;
}
#d2 {
width:100px;
height:100px;
margin-top:10px;
}
<div id="d1">
</div>
<div id="d2">
</div>
這時(shí)兩個(gè)div在垂直距離上的外邊距進(jìn)行了合并晚伙,合并后的值是20px。
如果不想這樣俭茧,就在上一個(gè)元素里加一個(gè):
display:inline-block;
阻止外邊距合并
為了阻止父子元素合并咆疗,父元素生成一個(gè)新的BFC, overflow, display...
給父元素加上一個(gè)邊框或者padding等..
8、
代碼1實(shí)現(xiàn)alert效果
代碼2實(shí)現(xiàn)表單效果
代碼3實(shí)現(xiàn)模態(tài)框效果
代碼4實(shí)現(xiàn)導(dǎo)航欄效果