這篇文章主要是對(duì)任務(wù)三筆記1(定位)一文的補(bǔ)充研底,如果想獲取更加詳細(xì)的定位知識(shí)榜晦,可以先閱讀<a href="http://www.reibang.com/p/4ef59dc9b967">任務(wù)三筆記1(定位)</a>
清除浮動(dòng)
1.overflow技巧
一種清除浮動(dòng)的技巧是使用overflow屬性羽圃。在具有浮動(dòng)元素的父容器中設(shè)置"overflow"的屬性值為"auto",這樣父容器就會(huì)有一個(gè)高度存在识窿。
在IE6中愁憔,父容器是需要設(shè)置一個(gè)"width"和一個(gè)"height"孽拷。因?yàn)楦叨瓤赡苁且粋€(gè)變量脓恕,寬度為100%,他們將能正常的工作炼幔。使用“overflow:auto;”,在IE瀏覽器中會(huì)給元素添加滾動(dòng)條,這樣一來肛著,最好是直接使用“overflow:hidden;”來清除浮動(dòng)枢贿。
但是使用"overflow"技巧清除浮動(dòng),確實(shí)存在一些缺點(diǎn)局荚。例如:你想要給容器內(nèi)的元素添加一個(gè)盒子陰影和制作一個(gè)下拉菜單耀态。就會(huì)發(fā)現(xiàn)陰影和菜單會(huì)被切斷在父元素之內(nèi)暂雹。
2.clearfix技巧
"clearfix"技巧是基于在父元素上使用":before" 和":after"兩個(gè)偽類。使用這些偽類簿盅,我們可以在父元素前后創(chuàng)建隱藏元素。防止子元素頂部和底部的外邊距塌陷桨醋,使用"display: table"確保在IE6/7下的一致性。
.box-set:before,.box-set:after {
content: "";
display: table;
}
.box-set:after {
clear: both;
}
.box-set {
*zoom: 1;
}
很多情況下偎蘸,你需要控制更多元素的位置迷雪,而且超過了浮動(dòng)所能提供的范圍,這個(gè)時(shí)候我們就需要發(fā)揮"position"屬性的作用章咧。"position"屬性提供的五個(gè)不同屬性值赁严,每種屬性值可以給元素提供不同的位置粉铐。
static
任務(wù)三筆記1(定位)有提過不在記錄
relative
任務(wù)三筆記1(定位)有提過不在記錄
absolute
當(dāng)一個(gè)絕對(duì)元素有固定的高度和寬度蝙泼,并且盒子同時(shí)設(shè)置了"top" 和"bottom"時(shí),"top"更具有優(yōu)先級(jí)汤踏;當(dāng)同時(shí)設(shè)置了"left" 和 "right"時(shí)溪胶,優(yōu)先級(jí)取決于它的頁面使用的語言,例如盾饮,如果你的頁面是英文頁面懒熙,那么"left"屬性優(yōu)先級(jí)高,如果你的頁面是阿拉伯語徘钥,那么"right"的位移屬性優(yōu)先級(jí)高肢娘。
當(dāng)一個(gè)絕對(duì)定位元素沒有明確的指明高度和寬度舆驶,同時(shí)使用盒子位移的"top" 和"bottom"屬性時(shí)而钞,會(huì)使整個(gè)元素的高度跨越整個(gè)容器。同樣的撬陵,當(dāng)這個(gè)元素同時(shí)使用位移"left" 和 "right"屬性值网缝,會(huì)使整個(gè)元素寬度跨越整個(gè)容器粉臊。
fixed
固定定位最常用于在頁面創(chuàng)建固定頭部、或者腳部远寸、或者一個(gè)固定的側(cè)欄犀盟。注意如何設(shè)置"left" 和 "right"兩個(gè)盒子位移蝇狼,使得"頁腳"跨越了頁面的整個(gè)寬度迅耘,而不需要使用margin、padding和border來破壞盒模型就做到了收縮自如颤专。
HTML
<footer>Fixed Footer</footer>
CSS
footer{
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
z-index
通常認(rèn)為Web頁面是二維頁面栖秕,顯示的元素都在X軸Y軸上簇捍。當(dāng)你的元素有定位的時(shí)候,它們有時(shí)候會(huì)放置在另一個(gè)元素的頂部吼句。要改變這些元素是一個(gè)怎么樣的層疊順序事格,要知道Z軸,z軸是用"z-index"來控制的远搪。
元素的"z-index"值越高谁鳍,將會(huì)出現(xiàn)在越上面,不管元素在DOM的哪個(gè)位置棠耕。
給元素設(shè)置"z-index"屬性窍荧,首先要在這個(gè)元素上設(shè)置了"position"屬性值為"relative"、"absolute"或者"fixed"之一郊楣。