成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

css之position定位

waruqi / 1653人閱讀

摘要：一定位方式默認(rèn)定位方式相對(duì)定位相對(duì)于該元素靜態(tài)定位的元素定位即元素所在正常文檔流的位置相對(duì)定位結(jié)果相對(duì)定位并沒有脫離文檔流只是相對(duì)于該元素以前所在的位置進(jìn)行偏移絕對(duì)定位相對(duì)于除了定位以外的父元素進(jìn)行定位如果父元素沒有定位就根據(jù)即瀏覽器窗口進(jìn)

一.定位方式

1.position:static;默認(rèn)定位方式
2.position:relateve;相對(duì)定位,相對(duì)于該元素靜態(tài)定位的元素定位(即元素所在正常文檔流的位置)
eg:




  
    position相對(duì)定位
  
  

  
    

      
1

      
2

      
3

結(jié)果:

相對(duì)定位并沒有脫離文檔流,只是相對(duì)于該元素以前所在的位置進(jìn)行偏移

3.position:absolute(絕對(duì)定位),相對(duì)于除了static定位以外的父元素進(jìn)行定位,如果父元素沒有定位,就根據(jù)body(即瀏覽器窗口)進(jìn)行定位,絕對(duì)定位的子元素是脫離文檔流的,在原文檔中不占有空間
eg:把上述例子第二個(gè)子div定位方式修改下,它的父級(jí)元素(class="container")沒有定位,所以相對(duì)于body進(jìn)行定位

.div2 {
    position: absolute;
    top: 40px;
    left: 40px;
  }

結(jié)果:

4.position:fixed(固定定位),相對(duì)于瀏覽器窗口進(jìn)行定位,即body
5.position:inherit;繼承父元素的定位方式

二.文檔流

1.定義:文檔流是在 HTML 中的位置順序決定排布的過程
2.脫離文檔流的三種方式:

positon:relative;
positon:fixed;
float浮動(dòng)

3.以上脫離文檔流會(huì)使當(dāng)前元素形成一個(gè)BFC(塊級(jí)格式化上下文),對(duì)于BFC的理解,請(qǐng)看我之前的總結(jié)https://segmentfault.com/a/11...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/117172.html

相關(guān)文章

  • 天坑，CSS之定位Position（六分之五）

    摘要：下文稱位置屬性即為。注意，不會(huì)脫離文檔流，具體見下面的圖示。直譯為修正，簡(jiǎn)單粗暴，直接相對(duì)瀏覽器窗口顯示區(qū)域定位。 Position定位 個(gè)人覺得position這個(gè)屬性真的算是CSS的見面殺了。尤其是absolute，當(dāng)年可是被虐的不輕。當(dāng)然了，現(xiàn)在愛上了這個(gè)屬性，誰用誰知道。 position屬性 position是CSS的一個(gè)屬性，地位較高，也是我們重點(diǎn)要說的一個(gè)屬性。 對(duì)應(yīng)了四...

    anRui 評(píng)論0 收藏0

  • 天坑，CSS之定位Position（六分之五）

    摘要：下文稱位置屬性即為。注意，不會(huì)脫離文檔流，具體見下面的圖示。直譯為修正，簡(jiǎn)單粗暴，直接相對(duì)瀏覽器窗口顯示區(qū)域定位。 Position定位 個(gè)人覺得position這個(gè)屬性真的算是CSS的見面殺了。尤其是absolute，當(dāng)年可是被虐的不輕。當(dāng)然了，現(xiàn)在愛上了這個(gè)屬性，誰用誰知道。 position屬性 position是CSS的一個(gè)屬性，地位較高，也是我們重點(diǎn)要說的一個(gè)屬性。 對(duì)應(yīng)了四...

    xuweijian 評(píng)論0 收藏0

  • CSS基礎(chǔ)知識(shí)之position

    摘要：最近在慕課網(wǎng)學(xué)習(xí)了網(wǎng)頁布局基礎(chǔ)和固定層效果，都是由聲音甜美的婧享人生老師所錄制，視頻詳細(xì)講解了中的用法，在此把學(xué)習(xí)筆記分享給大家。 最近在慕課網(wǎng)學(xué)習(xí)了 網(wǎng)頁布局基礎(chǔ) 和 固定層效果 ，都是由聲音甜美的 婧享人生 老師所錄制，視頻詳細(xì)講解了CSS中position的用法，在此把學(xué)習(xí)筆記分享給大家。 CSS定位機(jī)制 標(biāo)準(zhǔn)文檔流（Normal flow） 浮動(dòng)定位（Floats） 絕對(duì)定位...

    xiaowugui666 評(píng)論0 收藏0

  • CSS之position詳解

    摘要：元素的位置通過以及屬性進(jìn)行規(guī)定。生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。規(guī)定應(yīng)該從父元素繼承屬性的值。表示相對(duì)原先位置右邊進(jìn)行偏移，表示相對(duì)原先位置下邊進(jìn)行偏移。當(dāng)和同時(shí)存在，僅有效，當(dāng)和同時(shí)存在僅有效。 定義和用法 position屬性規(guī)定元素的定位類型。這個(gè)屬性定義建立元素布局所用的定位機(jī)制。任何元素都可以定位，不過絕對(duì)或固定元素會(huì)生成一個(gè)塊級(jí)框，而不論該元素本身是什么類型。...

    PiscesYE 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<