国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css 聊聊position屬性

GHOST_349178 / 3026人閱讀

摘要:默認值當(dāng)元素的屬性沒有設(shè)置或者值為時,元素處于文檔流中,且等偏移屬性是不起作用的。相對定位設(shè)置相對定位的元素仍然處于文檔流中,其占據(jù)的空間仍然保留。包含塊的判定絕對定位絕對定位元素會脫離文檔流,此時其原有空間為,也就是不存在透明磚塊占位。

前言

今天呢,想聊聊css里的position屬性。也就是元素定位屬性。目的呢,是為了梳理一下自己學(xué)習(xí)工作中積累的經(jīng)驗。

標(biāo)準(zhǔn)

根據(jù)MDN文檔,CSS屬性 position 用于指定一個元素在文檔中的定位方式。另外還需要偏移屬性top, right, bottom 和 left來決定了該元素的最終位置。適用于所有元素,沒有繼承性,會創(chuàng)建層疊上下文。而定位的值一共有5種(?):

position:static 默認值

position:relative 相對定位

position:absolute 絕對定位

position:fixed 固定定位

position:sticky 粘性定位

因為position屬性是非常基礎(chǔ)的知識,所以在接下來的篇幅中我不會用很多圖片或demo演示效果。畢竟這些內(nèi)容應(yīng)該是查閱文檔或教程就能知道的。

默認值static

當(dāng)元素的position屬性沒有設(shè)置或者值為static時,元素處于文檔流中,且left等偏移屬性是不起作用的。文檔中還說z-index值無效。我想了一下,如果元素是處于正常文檔流中,一般是不會有其他元素與他在層疊上有上下的沖突,所以z-index的應(yīng)用場景基本是沒有的。也許有我漏考慮的地方?除了這些,static也沒有什么特殊的地方了。

相對定位relative

設(shè)置相對定位的元素仍然處于文檔流中,其占據(jù)的空間仍然保留。但是如果設(shè)置了上下左右偏移屬性,它會相對于原位置向相應(yīng)的方向移動,此時元素空間仍存在,周圍元素不會重新排列。也就是說,該元素原有的位置上被放置了一塊透明的磚塊,看不見但摸得著。另外,相對定位元素會創(chuàng)建一個包含塊,用于作為內(nèi)部子元素定位的基點。

包含塊的定義:由最近的塊級祖先框,表單元格或行內(nèi)塊inline-block祖先框的內(nèi)容邊界(content edge)構(gòu)成。

包含塊的判定:

絕對定位absolute

絕對定位元素會脫離文檔流(normal flow),此時其原有空間為0,也就是不存在透明磚塊占位。附近元素也會重新排列。同時,該元素會產(chǎn)生格式化上下文(BFC),上下外邊距不會合并,不會因為內(nèi)部浮動元素產(chǎn)生高度塌陷。

之所以要解釋一下包含塊的定義和判斷,是因為絕對定位元素的定位點就是最近的包含塊,設(shè)置的上下左右偏移屬性都是以包含塊的左上角為原點(這個跟文字方向有關(guān))。從上圖中可以看出,如果絕對定位的祖先元素position屬性都是static,那么會相對于初始包含塊————body定位。如果存在position屬性為其他值的祖先元素,則相對于其創(chuàng)建的包含塊定位。

這里其實想跟浮動元素做個對比,看到張鑫旭博客里提到過浮動元素可以看作有寬無高的inline-block元素,而絕對定位則是無寬無高的inline-block元素。至于為什么看成inline-block元素,我也不太記得了~

固定定位fixed

固定定位元素,相對于屏幕視口定位,這種情況下不會因為滾動而改變位置。如果是打印網(wǎng)頁,該元素會出現(xiàn)在每個頁面中的固定位置。另外,固定定位元素也會創(chuàng)建格式化上下文。
文檔中還提到,有一種特殊情況會影響fixed定位。就是當(dāng)父級元素的transform屬性不會none時,固定定位的容器改為該父級元素,而不是視口。這種意外情況是需要注意和避免的。
最后,如果你是個移動端web開發(fā)者,還會遇到ios系統(tǒng)webview下fixed布局的一些bug。這些bug可能無法找到完美的解決方案,所以遇到的話就考慮js動態(tài)判斷修改樣式或者直接就重新布局吧。

粘性定位sticky

這個定位方式相信很多人都沒見過,因為它是一個試驗屬性,文檔建議盡量不要在生產(chǎn)環(huán)境中使用。不過它的功能還是很好用的,可以了解一下。

粘性定位是相對定位和固定定位的結(jié)合體。根據(jù)上下左右的偏移屬性設(shè)置閾值。若相對定位時超過閾值會轉(zhuǎn)變?yōu)楣潭ǘㄎ弧?

由于是新屬性,所以去這個demo看看吧。

demo中,代碼主要是

dt{
    position: -webkit-sticky;
    position: sticky;
    top: -1px;
}

首先,從粘性定位在瀏覽器中的支持情況可以看到基本都支持了,除了ie。不過在火狐中不支持table相關(guān)元素,chrome中不支持thead和tr等元素。因此想要正常使用,可能需要加上-webkit等前綴。
其次,設(shè)置top:-1px作為閾值。當(dāng)元素作為相對定位元素時,如果其頂部相對于包容塊的距離>=-1px,就會轉(zhuǎn)變?yōu)楣潭ǘㄎ弧K砸褂谜承远ㄎ唬撝档脑O(shè)置是關(guān)鍵。

除了demo中展示的功能,粘性定位的應(yīng)用場景還可以用在所謂的sticky footer中。相信有很多時候產(chǎn)品都會要求這樣的布局吧~

寬度受限的定位元素

很多時候,我們將絕對定位的元素垂直水平居中使用的是

position:absolute;
top:0;
bottom:0;
right:0;
left:0;
width:50%;
height:50%;
margin:auto;

這種情況下,由于margin設(shè)置為auto值,而根據(jù)等式:
margin+border+padding+width=元素寬度/高度
所以會設(shè)置margin為相應(yīng)方向上空余部分的一半,實現(xiàn)居中的情況。

但是,絕對定位元素不是脫離文檔流了嗎?為什么margin還會起作用呢?原來是因為我們還設(shè)置了上下左右偏移屬性。一般我們只需設(shè)置上或下、左或右,如果同時設(shè)置了上下或左右,也就是說,對立定位方向?qū)傩酝瑫r有具體定位數(shù)值的時候,流體特性就發(fā)生了。此時,絕對定位元素的寬度就會隨著包含塊的寬度進行適應(yīng)。這種情況下的絕對定位元素就和正常文檔流的元素一樣,可以使用margin:auto進行居中了。

display/float/position之間的三角關(guān)系

當(dāng)元素設(shè)置成絕對定位或固定定位時,浮動屬性無效,display也被改為block值。也就是說此時的元素都是塊級元素。

如果display設(shè)置為none,此時元素消失,設(shè)置的position和float屬性自然沒有意義。

總結(jié)

花了2個小時,查文檔、書和博客,總結(jié)了position屬性的概念、應(yīng)用場景和表現(xiàn)方式。還有一些相關(guān)知識只是一筆帶過,比如BFC、文檔流、外邊距合并等等,以及文檔文字方向這種不太常見的知識。

盡管如此,我覺得僅position屬性而言,我已經(jīng)將自己目前遇到的點都講述清楚了。還是有點小成就感的,哈哈。

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

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/51566.html

相關(guān)文章

  • css 聊聊position屬性

    摘要:默認值當(dāng)元素的屬性沒有設(shè)置或者值為時,元素處于文檔流中,且等偏移屬性是不起作用的。相對定位設(shè)置相對定位的元素仍然處于文檔流中,其占據(jù)的空間仍然保留。包含塊的判定絕對定位絕對定位元素會脫離文檔流,此時其原有空間為,也就是不存在透明磚塊占位。 前言 今天呢,想聊聊css里的position屬性。也就是元素定位屬性。目的呢,是為了梳理一下自己學(xué)習(xí)工作中積累的經(jīng)驗。 標(biāo)準(zhǔn) 根據(jù)MDN文檔,CS...

    OpenDigg 評論0 收藏0
  • 【第1期】聊聊css居中那點事

    摘要:前言居中是網(wǎng)頁布局中再常見不過的一種方式了,今天我們就來聊聊居中的那點事。我是水平居中的同樣是針對塊級元素才有效果。來看代碼我是水平居中的必須配合來使用來可以實現(xiàn)居中的效果。方法二我是垂直居中的注意此方法要考慮的兼容性問題。 前言:居中是網(wǎng)頁布局中再常見不過的一種方式了,今天我們就來聊聊css居中的那點事。 我們主要從這幾個方面來了解下居中: 水平居中 垂直居中 水平垂直居中 水平...

    劉永祥 評論0 收藏0
  • 聊聊clip-path

    摘要:這兩個屬性正是今天的重頭戲,博主曾在從隱藏元素談起提起過,但并沒做深入解釋。另外,四個值分別是相對于圖片左上角為原點的坐標(biāo)值。基本所有的瀏覽器都支持,可以放心使用。 前言 圖片是一個網(wǎng)站必不可少的元素,而呈現(xiàn)出絢麗多彩的圖片效果在很多情況下不僅僅是設(shè)計師的工作,通過代碼來修飾圖片也是一個前端工程師必備的技能。因為兼容性的問題,實際項目中可能用的比較少,包括博主自己也只是用過幾次剪切,很...

    zqhxuyuan 評論0 收藏0
  • 聊聊怎么寫react-native上的樣式吧

    摘要:我們來看看文檔上是怎么說的吧在中,你并不需要學(xué)習(xí)什么特殊的語法來定義樣式。我們?nèi)匀皇鞘褂脕韺憳邮健_@些樣式名基本上是遵循了上的的命名,只是按照的語法要求使用了駝峰命名法,例如將改為。 我遇到了什么問題? 不久之前我重構(gòu)了一個古老的項目,總結(jié)了一些js方面的想法,不過對于一個前端項目而言不僅僅只由js組成的嘛,上學(xué)的時候老師和我說HTML+CSS+JS對應(yīng)的是頁面的骨架、皮膚和肌肉。既然...

    Dionysus_go 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<