02-CSS基础与进阶-day9_2018-09-12-20-29-40
生活随笔
收集整理的這篇文章主要介紹了
02-CSS基础与进阶-day9_2018-09-12-20-29-40
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
定位
靜態(tài)定位 position: static
相對(duì)定位 position: relative
絕對(duì)定位 position: absolute 脫標(biāo) 參考點(diǎn)
子絕父相
讓絕對(duì)定位的盒子水平居中和垂直居中
固定定位 position: fixed
參考點(diǎn) 瀏覽器左上角
固定定位的元素脫標(biāo)不占有位置
兼容性 ie6低版本不支持固定定位
?
02絕對(duì)定位的應(yīng)用.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">.fa {width: 600px;height: 300px;margin: 60px auto;background-color: skyblue;position: relative;}/*讓兒子盒子水平居中*/ .son {width: 200px;height: 100px;background-color: pink;/* margin: 0 auto; 對(duì)絕對(duì)定位的盒子無效*/position: absolute;left: 50%; /*百分比參考父親的寬度*/margin-left: -100px; /*自己的寬一半*/top: 50%;margin-top: -50px;/* left: 300px;top: 150px; */}</style> </head> <body><div class="fa"><div class="son"></div></div> </body> </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/HiJackykun/p/11069711.html
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的02-CSS基础与进阶-day9_2018-09-12-20-29-40的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
