課程
/前端開發(fā)
/HTML/CSS
/固定層效果
還是有些不明白
2015-08-26
源自:固定層效果 2-2
正在回答
舉個例子來說明邊距融合的問題。
<!DOCTYPE?html> <html> <head> <meta?charset="UTF-8"> <title>Document</title> <style?type="text/css"> body{ margin:0;?padding:0; } #div1{ width:200px; height:?200px; background:#f3a; margin:35px?auto?0px; } #div2{ width:400px;?height:?400px; background:?#000; margin:15px?auto?0px; } </style> </head> <body> <div?id='div1'></div> <div?id='div2'> </div> </body> </html>
現(xiàn)在對div1進行了position:fixed的定位且沒有設置偏移量!沒設置偏移量!沒設置偏移!重要的說3遍。此時div1依然是處在body父元素內(nèi)(即最初的位置,我這里設置了margin:35px auto 0,所以居中顯示。最初的位置是在左邊)那么div1就會脫離普通文檔流。緊隨其后的元素div2會上來。效果如圖
如果不相信的同學可以試試給div1設置個偏移量,假設我這里top:5px; left:50px,那么效果是怎樣的?(要注意這里給div1設置了上外邊距35px,所以查看效果要進入F12)
是以外邊距較大的為準
舉報
運用屬性值就輕松實現(xiàn)網(wǎng)頁固定層效果
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學習伙伴
掃描二維碼關注慕課網(wǎng)微信公眾號
2015-11-05
舉個例子來說明邊距融合的問題。
現(xiàn)在對div1進行了position:fixed的定位且沒有設置偏移量!沒設置偏移量!沒設置偏移!重要的說3遍。此時div1依然是處在body父元素內(nèi)(即最初的位置,我這里設置了margin:35px auto 0,所以居中顯示。最初的位置是在左邊)那么div1就會脫離普通文檔流。緊隨其后的元素div2會上來。效果如圖
如果不相信的同學可以試試給div1設置個偏移量,假設我這里top:5px; left:50px,那么效果是怎樣的?(要注意這里給div1設置了上外邊距35px,所以查看效果要進入F12)
2015-10-31
是以外邊距較大的為準