當(dāng)前位置：首頁(yè) > 前端技术 > CSS >内容正文

CSS

02-CSS基础与进阶-day9_2018-09-12-20-29-40

發(fā)布時(shí)間：2023/12/2 CSS 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 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ì)定位的盒子無(wú)效*/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ì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的02-CSS基础与进阶-day9_2018-09-12-20-29-40的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。