您好,登錄后才能下訂單哦!
這篇文章主要介紹CSS定位position屬性示例,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
首先,我們先寫一個HTML文件,利用css實現(xiàn)多行內(nèi)容垂直居中。
<div class="wrap"> <div class="content"> <h2>hello world</h2> <h3>HELLO WORLD</h3> <h4>層疊樣式表</h4> </div> </div>
接下來我們使用css進(jìn)行布局排版:
.wrap{ width:100%; height:400px; display:table; } .content{ display:table-cell; vertical-align:table; text-align:center; }
position屬性:
一、靜態(tài)定位/常規(guī)定位/自然定位static
作用:使元素定位于自然流中
特點:
1、忽略top、bottom、left、right或者z-index聲明
2、兩個相鄰的元素如果都設(shè)置了外邊距,那么最終外邊距=兩者外邊距中最大的
3、具有固定width和height值的元素,如果把左右外邊距設(shè)置為auto,則左右外邊距會自動擴大到占滿剩余寬度,造成的效果就是這個塊水平居中
二、 相對定位relative
作用:使元素成為可定位的祖先元素
特點:
1、可以使用top/right/bottom/left/z-index進(jìn)行相對定位,相對元素在自然流中的位置
2、相對定位的元素在自然流中的位置會被保留
3、任何元素都可以設(shè)置為relative,它的絕對定位的后代都可以相對于它進(jìn)行絕對定位
4、可以使浮動元素發(fā)生偏移(解決兩個浮動元素設(shè)置t/r/b/l無效的問題),并控制它們的堆疊順序
三、絕對定位absolute
作用:使元素脫離自然流
特點:
1、脫離自然流
2、設(shè)置尺寸的百分比比的是最近可定位的祖先元素
3、lrtb如果設(shè)置為0,它將對齊到最近可定位祖先元素的各邊(衍生水平垂直居中妙計)
4、如果沒有最近可定位祖先元素,會認(rèn)作為可定位祖先元素
5、z-index可以控制堆疊順序
四、 固定定位fixed
作用:和絕對定位作用相似
特點:
1、相對于瀏覽器視口定位
2、固定定位元素不會隨著視口滾動而滾動
3、繼承absolue的特點
利用position實現(xiàn)子元素垂直居中
<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屬性示例的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。