解決高度塌陷蚊荣、定位(補充版)、opacity莫杈、filter互例、background-image/repeat/position/attachment

解決高度塌陷

? ? 清除浮動:將最后一個盒子設為空白盒子再clear:both;就可以撐開父元素姓迅,防止高度塌陷

? ? 用after在后面加入內(nèi)容敲霍,為兼容ie6需加zoom? eg:.clearfix:after{content:"";display:block俊马;clear:both丁存;}

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? .clearfix{zoom:1;}? 【最推薦使用】

定位:元素開啟定位后比文檔流高一層

? ? ? ? position:

? ? ? ? ? ? ? ? ? static:默認值柴我,沒有定位

? ? ? ? ? ? ? ? ? relative:{position:relative解寝;left:100px;top:200px艘儒;}

? ? ? ? ? ? 相對定位相對于元素在文檔流原來的位置

? ? ? ? ? ? 開啟相對定位后不會影響元素性質(zhì)

? ? ? ? ? ? ? ? ? absolute:元素相對于html元素或離他最近 的祖先定位元素進行定位(一般幫他的父元素先開啟相對定位)

? ? 絕對定位聋伦,會使元素完全脫離文本流

? ? 開啟絕對定位后會影響元素性質(zhì)

? ? 絕對定位的塊元素的寬度會被其內(nèi)容撐開

? ? ? ? ? ? ? ? ? fixed:固定定位夫偶,元素會被鎖定在屏幕的某個位置上,網(wǎng)頁滾動時保持不動

? ? ? ? ? ? ? ? ? (開啟以上三種定位后可使用(top觉增、right兵拢、bottom、left)屬性)

? ? ? ? z-index:元素開啟定位后可使用逾礁,可提升定位元素所在的層級

? ? ? ? ? ? ? ? ? 可指定一個整數(shù)作為參數(shù)说铃,值越大優(yōu)先級越高,顯示在網(wǎng)頁上層

? 未開啟定位則不可以使用

opacity:設置透明嘹履,0為完全透明腻扇,1為完全不透明;

filter:alpha(opacity=50):一般也會加上這個濾鏡用于支持ie瀏覽器(選值0~100)

background-image:url(圖片路徑)

一般設置背景圖片時同時指定背景顏色

background-repeat:設置是否重復背景圖

? ? repeat? 重復圖片

? ? no-repeat? 不重復砾嫉,只一張

? ? ? ? ? ? ? ? ? repeat-x? 只橫排重復

? ? ? ? ? ? ? ? ? repeat-y? 只豎排重復

background-position:設置背景圖像的起始位置?

? ? eg:background-position:bottom center幼苛;可選值一個設為橫,一個為豎?

? ? eg:background-position:100px 200px焕刮;? ? ? 也可為負值

background-attachment:設置背景圖片是否會隨著頁面其余部分的滾動而滾動

? ? ? fixed? ? 固定背景

小注意點:如父子元素則子元素永遠在父元素之上

? 相對路徑寫到哪兒便從哪兒開始找

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末舶沿,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子济锄,更是在濱河造成了極大的恐慌暑椰,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,348評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件荐绝,死亡現(xiàn)場離奇詭異一汽,居然都是意外死亡,警方通過查閱死者的電腦和手機低滩,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,122評論 2 385
  • 文/潘曉璐 我一進店門召夹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人恕沫,你說我怎么就攤上這事监憎。” “怎么了婶溯?”我有些...
    開封第一講書人閱讀 156,936評論 0 347
  • 文/不壞的土叔 我叫張陵鲸阔,是天一觀的道長。 經(jīng)常有香客問我迄委,道長褐筛,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,427評論 1 283
  • 正文 為了忘掉前任叙身,我火速辦了婚禮渔扎,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘信轿。我一直安慰自己晃痴,他們只是感情好残吩,可當我...
    茶點故事閱讀 65,467評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著倘核,像睡著了一般泣侮。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上紧唱,一...
    開封第一講書人閱讀 49,785評論 1 290
  • 那天旁瘫,我揣著相機與錄音,去河邊找鬼琼蚯。 笑死酬凳,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的遭庶。 我是一名探鬼主播宁仔,決...
    沈念sama閱讀 38,931評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼峦睡!你這毒婦竟也來了翎苫?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,696評論 0 266
  • 序言:老撾萬榮一對情侶失蹤榨了,失蹤者是張志新(化名)和其女友劉穎煎谍,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體龙屉,經(jīng)...
    沈念sama閱讀 44,141評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡呐粘,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,483評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了转捕。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片作岖。...
    茶點故事閱讀 38,625評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖五芝,靈堂內(nèi)的尸體忽然破棺而出痘儡,到底是詐尸還是另有隱情,我是刑警寧澤枢步,帶...
    沈念sama閱讀 34,291評論 4 329
  • 正文 年R本政府宣布沉删,位于F島的核電站,受9級特大地震影響醉途,放射性物質(zhì)發(fā)生泄漏矾瑰。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,892評論 3 312
  • 文/蒙蒙 一结蟋、第九天 我趴在偏房一處隱蔽的房頂上張望脯倚。 院中可真熱鬧渔彰,春花似錦嵌屎、人聲如沸推正。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽植榕。三九已至,卻和暖如春尼夺,著一層夾襖步出監(jiān)牢的瞬間尊残,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工淤堵, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留寝衫,地道東北人。 一個月前我還...
    沈念sama閱讀 46,324評論 2 360
  • 正文 我出身青樓拐邪,卻偏偏與公主長得像慰毅,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子扎阶,可洞房花燭夜當晚...
    茶點故事閱讀 43,492評論 2 348

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