国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
深究CSS定位position的常用技法

本文針對CSS常用的6個屬性進行探究,大家一定會對這篇文章滿意的。

1.position:static

static屬性是position的默認值,也就是說,當一個元素沒有為其設(shè)定position屬性時,它的默認值就是static。

2.position:absolute

這是一個經(jīng)常會被用到的position屬性值。如果為某個元素設(shè)定了absolute,則該元素脫離原來的文檔流。形象一些說,比如a元素被定義了position:absolute,那么這個元素就不會與這個頁面中的其他元素發(fā)生位置上的關(guān)系,而是凌駕于整個頁面之上的漂浮狀態(tài)。頁面中的其他元素的位置變化、大小變化等,都不會影響a元素的位置,相當于一個局外人。

3.position:relative

relative是最有用的定義方法。設(shè)置了relative屬性表示,該元素相對于自己原來位置發(fā)生的變化。比如,我們定義了一個b元素,給它設(shè)定如下css樣式:

CSS Code復制內(nèi)容到剪貼板
  1. #b{     
  2.     position: relative;     
  3.     width:100px;     
  4.     height:100px;     
  5.     top:100px;     
  6. }     

該段代碼定義的b元素,它的位置為相對于沒有定義position屬性的位置向下移動100px的距離。relative屬性值的定義就是這樣的定位模式。

4.position:fixed

fixed定位用的不多,但是它非常適用于固定模式的部分制作,比如頂部菜單。定義了fixed屬性后,元素的位置不會隨著任何行為發(fā)生變化。

5.relative+position

同時使用這兩個定位,是一種很常用的手法,新手也可能會在此處遇見很多麻煩??傮w來說,如果一個元素絕對定位后,其參照物是以離自身最近元素是否設(shè)置了相對定位,如果有設(shè)置將以離自己最近元素定位,如果沒有將往其祖先元素尋找相對定位元素,一直找到html為止。比如,下面的代碼利用二者的結(jié)合實現(xiàn)了一個兩列布局;

CSS Code復制內(nèi)容到剪貼板
  1. <span style="white-space:pre">    </span>#div-1 {     
  2.              position:relative;     
  3.             }     
  4.             #div-1a {     
  5.              position:absolute;     
  6.              top:0;     
  7.              rightright:0;     
  8.              width:200px;     
  9.             }     
  10.             #div-1b {     
  11.              position:absolute;     
  12.              top:0;     
  13.              left:0;     
  14.              width:200px;     
  15.             }     

內(nèi)部的兩個子div會根據(jù)其外部定位為relative的元素為參照進行絕對定位。

6.clear:both清除浮動

有的時候定位會出現(xiàn)塌陷現(xiàn)象,即子元素在父元素中,但是父元素的大小不會隨著子元素的大小而被“”撐開“,導致了父元素的塌陷效果。這種bug的出現(xiàn)是由于子元素設(shè)定了 float屬性,導致父元素的坍塌。要想解決這種bug,需要為父元素設(shè)定清除浮動。示例代碼如下:

CSS Code復制內(nèi)容到剪貼板
  1. <span style="white-space:pre">    </span>    #div-1a {     
  2.              float:left;     
  3.              width:190px;     
  4.             }     
  5.             #div-1b {     
  6.              float:left;     
  7.              width:190px;     
  8.             }     
  9.             #div-1c {     
  10.              clear:both;     
  11.             }     

以上就是關(guān)于CSS定位中常用的六個屬性學習,希望對大家的學習有所幫助。

本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊舉報。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
使用CSS進行定位
如何精確定位固定大小的div在網(wǎng)頁的中間位置并且不隨分辨率的設(shè)置改變(位置大小都不變)
CSS步局之position精講(有示例夠清晰)
css position屬性學習
前端基礎(chǔ)教程 CSS丨css定位屬性的使用
解讀CSS中position屬性四大可選值用法
更多類似文章 >>
生活服務(wù)
分享 收藏 導長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點擊這里聯(lián)系客服!

聯(lián)系客服