前言:在使用css給頁面進行排版美化的過程中,常會用到pposition屬性。那麼,接下來我們就詳細介紹一下position屬性。
推薦影片教學:css影片教學
首先,我們先寫一個HTML文件,利用css實作多行內容垂直居中。
<div class="wrap"> <div class="content"> <h1>hello world</h1> <h2>HELLO WORLD</h2> <h3>层叠样式表</h3> </div> </div>
接下來我們使用css進行佈局排版:
.wrap{ width:100%; height:400px; display:table; } .content{ display:table-cell; vertical-align:table; text-align:center; }
#position屬性:
##一、靜態定位/常規定位/自然定位static
作用:使元素定位於自然流中
#1、忽略top、bottom、left、right或z-index宣告
2、兩個相鄰的元素如果都設定了外邊距,那麼最終外邊距=兩者外邊距中最大的
3、具有固定width和height值的元素,如果把左右外邊距設為auto,則左右外邊距會自動擴大到佔滿剩餘寬度,造成的效果就是這個塊水平居中
二、 相對定位relative
作用:使元素成為可定位的祖先元素
特點:
1、可以使用top/right/bottom/left/z-index進行相對定位,相對元素在自然流中的位置
2、相對定位的元素在自然流中的位置會被保留
3、任何元素都可以設定為relative,它的絕對定位的後代都可以相對於它進行絕對定位
4、可以使浮動元素發生偏移(解決兩個浮動元素設定t/r/b /l無效的問題),並控制它們的堆疊順序
三、絕對定位absolute
作用:使元素脫離自然流
特點:
1、脫離自然流
2、設定尺寸的百分比比的是最近可定位的祖先元素
3、lrtb如果設定為0,它將對齊到最近可定位祖先元素的各邊(衍生水平垂直居中妙計)
4、如果沒有最近可定位祖先元素,會認定為可定位祖先元素
5、z-index可以控制堆疊順序
四、 固定定位fixed
作用:和絕對定位作用相似
特點:
1、相對於瀏覽器視窗定位
2、固定定位元素不會隨著視窗捲動而捲動
#3、繼承absolue的特色
利用position實作子元素垂直居中
<div class="wrap"> <div class=""content></div> </div>
.wrap { width: 200px; height: 200px; background: blue; position: relative; } .content { width: 100px; height: 100px; background: red; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto auto; }
以上是CSS 定位position屬性詳細介紹(附範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!