小薇學(xué)院任務(wù)四筆記1(再談定位)

這篇文章主要是對(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"之一郊楣。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末净蚤,一起剝皮案震驚了整個(gè)濱河市输硝,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌橘荠,老刑警劉巖哥童,帶你破解...
    沈念sama閱讀 217,509評(píng)論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件贮懈,死亡現(xiàn)場(chǎng)離奇詭異朵你,居然都是意外死亡型宙,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門毛仪,熙熙樓的掌柜王于貴愁眉苦臉地迎上來芯勘,“玉大人箱靴,你說我怎么就攤上這事『摄担” “怎么了衡怀?”我有些...
    開封第一講書人閱讀 163,875評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)安疗。 經(jīng)常有香客問我抛杨,道長(zhǎng),這世上最難降的妖魔是什么荐类? 我笑而不...
    開封第一講書人閱讀 58,441評(píng)論 1 293
  • 正文 為了忘掉前任怖现,我火速辦了婚禮,結(jié)果婚禮上玉罐,老公的妹妹穿的比我還像新娘屈嗤。我一直安慰自己,他們只是感情好吊输,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,488評(píng)論 6 392
  • 文/花漫 我一把揭開白布饶号。 她就那樣靜靜地躺著茫船,像睡著了一般狰闪。 火紅的嫁衣襯著肌膚如雪幔欧。 梳的紋絲不亂的頭發(fā)上礁蔗,一...
    開封第一講書人閱讀 51,365評(píng)論 1 302
  • 那天磺浙,我揣著相機(jī)與錄音瘤缩,去河邊找鬼剥啤。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的赘被。 我是一名探鬼主播,決...
    沈念sama閱讀 40,190評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了平道?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,062評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后虫腋,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,500評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡嘿歌,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,706評(píng)論 3 335
  • 正文 我和宋清朗相戀三年步脓,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片鸳君。...
    茶點(diǎn)故事閱讀 39,834評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡囱挑,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出弹惦,到底是詐尸還是另有隱情檐嚣,我是刑警寧澤嗡贺,帶...
    沈念sama閱讀 35,559評(píng)論 5 345
  • 正文 年R本政府宣布摄凡,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏癞己。R本人自食惡果不足惜末秃,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,167評(píng)論 3 328
  • 文/蒙蒙 一技掏、第九天 我趴在偏房一處隱蔽的房頂上張望劲阎。 院中可真熱鬧,春花似錦锡垄、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至峰弹,卻和暖如春申尼,著一層夾襖步出監(jiān)牢的瞬間垮卓,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評(píng)論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人浩淘。 一個(gè)月前我還...
    沈念sama閱讀 47,958評(píng)論 2 370
  • 正文 我出身青樓署惯,卻偏偏與公主長(zhǎng)得像诡右,于是被迫代替她去往敵國和親样眠。 傳聞我的和親對(duì)象是個(gè)殘疾皇子甥桂,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,779評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案柿究? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,751評(píng)論 1 92
  • 1.盒模型是CSS的基石之一,它指定元素如何顯示以及(在某種程度上)如何相互交互黄选。頁面上的每個(gè)元素被看作是一個(gè)矩形...
    garble閱讀 527評(píng)論 0 0
  • 當(dāng)在這一個(gè)頁面上實(shí)現(xiàn)布局和定位有幾種不同的技術(shù)蝇摸。使用哪種技術(shù),很大程序上取決于內(nèi)容和目標(biāo)頁面办陷,因?yàn)橛泻芏嗉夹g(shù)比別人...
    lulu_c閱讀 1,054評(píng)論 0 5
  • 一民镜、文檔流的概念指什么啡专?有哪種方式可以讓元素脫離文檔流? 1、文檔流指的是元素在排列布局中所占用的位置制圈,具體的說是...
    鴻鵠飛天閱讀 781評(píng)論 0 0
  • append="tree"不正常 append=tree 的bug 單位只能是px或者純數(shù)字 Proposal- ...
    勇往直前888閱讀 336評(píng)論 0 0