當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

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

發布時間：2023/12/2 CSS 50 豆豆

生活随笔收集整理的這篇文章主要介紹了 02-CSS基础与进阶-day9_2018-09-12-20-29-40 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

定位
靜態定位 position: static
相對定位 position: relative
絕對定位 position: absolute 脫標參考點
子絕父相
讓絕對定位的盒子水平居中和垂直居中
固定定位 position: fixed
參考點瀏覽器左上角
固定定位的元素脫標不占有位置
兼容性 ie6低版本不支持固定定位

02絕對定位的應用.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; 對絕對定位的盒子無效*/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>

轉載于:https://www.cnblogs.com/HiJackykun/p/11069711.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。