頁面布局:absolute/relative/float

塊元素前后都要獨占一行而內(nèi)聯(lián)元素不需要锹锰,這是基礎僻族。

position:fixed? ? 當元素設置該屬性之后,這個元素脫離文檔流,且不跟隨頁面的滾動.這是和absolute的最大區(qū)別.當元素的高度大于可視區(qū)域的時候,鋪滿整個窗口之后下面的就看不到了,因為fixed不隨頁面滾動.設置absolute 的時候就可以看的到了.第二個區(qū)別是fixed是相對window定位的,父元素可以認為是window窗口.而position雖然脫離原來的文檔流,但是如果設置了父元素為relative或者absolute,則相對父元素定位,否則一直向上找,直到找到html根元素.

position:relative? ? 定位相對的是元素本身應該出現(xiàn)的位置寸爆,不會脫離文檔流吧彪,也即慌申,雖然該元素相對本應該出現(xiàn)在的位置發(fā)生了偏移雷激,但是本應該占的位置還會保留访圃,下一個元素不能忽視它的存在厨幻。然后通過top,left等來偏移,同時原來的位置繼續(xù)保留.相當于要占據(jù)兩個位置.偏移后并不會把下面的元素想下擠,而是和下面的元素,不管是文本還是塊元素,重疊起來,通過設置z-index來移動.


relative布局效果

position:absolute? 相對的是第一個設置了relative或者absolute定位的祖先元素的位置,且會脫離文檔流腿时。


absolute布局效果

flota:left? ?元素脫離文檔流.會占據(jù)新的位置空間,原先占據(jù)的位置就釋放了出來况脆。其他的元素,比如文字,會環(huán)繞其中.比如一個塊元素,當沒設置浮動的時候,它會獨占一行,兄弟元素或者文本會在新的一行開始,設置浮動之后,下面的內(nèi)容會在之后開始排版,形成環(huán)繞效果.


清除浮動:clear:both;是對受到浮動影響的后面的元素進行的.

另一種清除浮動的方式是對受到影響的元素設置:overflow:hidden;width:100%;

讓多張圖重疊到一起的解決方案:設置個父元素來裝這些東西

該父元素設置overflow:hidden;position:relative

子元素position:absolute批糟。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末格了,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子徽鼎,更是在濱河造成了極大的恐慌盛末,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件纬傲,死亡現(xiàn)場離奇詭異满败,居然都是意外死亡,警方通過查閱死者的電腦和手機叹括,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門算墨,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人汁雷,你說我怎么就攤上這事净嘀。” “怎么了侠讯?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長厢漩。 經(jīng)常有香客問我膜眠,道長,這世上最難降的妖魔是什么宵膨? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮辟躏,結果婚禮上谷扣,老公的妹妹穿的比我還像新娘。我一直安慰自己捎琐,他們只是感情好会涎,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著瑞凑,像睡著了一般末秃。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上拨黔,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天蛔溃,我揣著相機與錄音,去河邊找鬼篱蝇。 笑死贺待,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的零截。 我是一名探鬼主播麸塞,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼涧衙!你這毒婦竟也來了哪工?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤弧哎,失蹤者是張志新(化名)和其女友劉穎雁比,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體撤嫩,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡偎捎,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了序攘。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片茴她。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖程奠,靈堂內(nèi)的尸體忽然破棺而出丈牢,到底是詐尸還是另有隱情,我是刑警寧澤瞄沙,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布己沛,位于F島的核電站慌核,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏申尼。R本人自食惡果不足惜遂铡,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望晶姊。 院中可真熱鬧,春花似錦伪货、人聲如沸们衙。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蒙挑。三九已至,卻和暖如春愚臀,著一層夾襖步出監(jiān)牢的瞬間忆蚀,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工姑裂, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留馋袜,地道東北人。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓舶斧,卻偏偏與公主長得像,于是被迫代替她去往敵國和親茴厉。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案矾缓? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,762評論 1 92
  • CSS 是什么 css(Cascading Style Sheets),層疊樣式表嗜闻,選擇器{屬性:值;屬性:值}h...
    崔敏嫣閱讀 1,490評論 0 5
  • CSS的position總是屬性很容易讓人弄混~ 為了仔細區(qū)別它們泞辐,所以今天總結一下CSS的position屬性~...
    fehysunny閱讀 2,930評論 0 7
  • 學習建議 定位吹缔、浮動是 CSS 核心知識點,必須熟練掌握锯茄。 1.文檔流的概念指什么厢塘?有哪種方式可以讓元素脫離文檔流...
    饑人谷_任磊閱讀 1,093評論 0 3
  • 一. 活動日期時間地點:7月26日星期三下午兩點半 1號廳 二. 活動安排 場地布置:26號上午10:00 領...
    學徒今妙閱讀 3,508評論 0 2