亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Absolute 和 Relative

李增田 / 1847人閱讀

摘要：在中，元素的大小是不變的，通過設(shè)置等屬性，改變元素相對于自身的位置。所以被的元素，是可能會和其他元素重疊的，但是不會對之后的元素的位置有影響。被稱為絕對定位。絕對定位的元素是根據(jù)其決定的，完全脫離，對后續(xù)的兄弟節(jié)點的布局無任何影響。

花了一個周末的時間，把 css-postion 的標(biāo)準(zhǔn)讀了一遍，把關(guān)于 Absolute 和 Relative 的部分的理解在這里記錄一下。

Positioning schemes

在 css 中，有三種定位方案:

Normal flow

Floats

Absolute positioning

Normal flow 是最常見的 BFC 和 IFC，也就是常說的塊級元素從上到下，內(nèi)聯(lián)元素從左到右布局的情況；Floats 即常見的盒子水平布局的情況；Absolute positioning 讓盒子完全脫離 Normal flow， 通過設(shè)置 top，left 等屬性來決定 position。

注意：這里只說到 Floats 和 Absolute 是 out-of-flow 的，沒有說 Relative。我看過很多文章都說 Relative 也讓盒子脫離了流，是錯誤的說法（我就深受其害）。

Containing Blocks

一個元素的盒子的位置和大小通常是由一個特定的矩形計算出來的，這個特定的矩形就是元素的 containing block。 對于 static 和 relative 的元素，它的 containing block 同普通盒子，一般是指包含它的最近的父級元素（nearest ancestor）。對于 fixed（不在這次文章之內(nèi)，按下不表）和 absolute 有如下的表現(xiàn):

containing block 被最近的positon不等于static的祖先元素創(chuàng)建:

如果最近的祖先元素是塊級元素(block-level)，containing block 由盒子的內(nèi)邊距層(padding edge) 創(chuàng)建。

如果最近的祖先元素是內(nèi)聯(lián)級元素(inline-level)，那么containing block 由書寫模式的 direction 屬性決定。這種情況比較少用，不分析了。

如果沒有祖先元素，或者祖先元素沒有設(shè)置 position 為 static 以外的值，那么 containing block 就是 initial containing block。

注意：對于上面第三點，initial containing block 并不是指 body， 我看到很多文章都把這里說成 body。

Relative positioning

相對定位：是相對于自己定位。在 normal flow 中，元素的大小是不變的，通過設(shè)置top等屬性，改變元素相對于自身的位置。所以被 relative 的元素，是可能會和其他元素重疊的，但是不會對之后的元素的位置有影響。 一個相對定位的盒子會為后代節(jié)點創(chuàng)建一個新的絕對定位的 containing block。

Absolute positioning

對于 position： absolute 和 position： fixed 都是指 Absolute positioning。 本文暫只討論 position: absolute。 Absolute positioning 被稱為絕對定位。 絕對定位的元素是根據(jù)其 containing block 決定的，完全脫離 normal flow， 對后續(xù)的兄弟節(jié)點的布局無任何影響。一個絕對定位的盒子會為后代節(jié)點創(chuàng)建一個新的絕對定位的 containing block 和為子節(jié)點創(chuàng)建一個 normal flow 的containing block

top, right, bottom, left

當(dāng)一個元素的 position 屬性被設(shè)置了除 static 之外的值， 這個元素的位置可以被 top, right, bottom, left這四個物理屬性決定。注意，在同時設(shè)置 left、right 或者 bottom、top 的時候會出現(xiàn)競爭情況。

結(jié)尾

因為女朋友在學(xué) css，需要我在旁指導(dǎo) 而 css 一直是我的弱項，所以我花了一個周末時間把 css-position 的標(biāo)準(zhǔn)梳理了下，這樣指導(dǎo)起來也比較有底氣。這篇文章基本都是對下面參考的鏈接的筆記，我之前學(xué)這部分的內(nèi)容時，都是從網(wǎng)上找的別人的博客看的，有很多和標(biāo)準(zhǔn)出入的地方，這一天也解了不少的疑惑；如果有想學(xué)的同學(xué)，還請直接看 css-positon 的草案比較靠譜，而且草案中 example 也有不少。

參考:

草案

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/115068.html

相關(guān)文章

  • 相對定位(Relative positioning)

    摘要：當(dāng)一個盒根據(jù)常規(guī)流或者浮動擺放好后，它可能會相對于該位置移動，這叫相對定位。 當(dāng)一個盒根據(jù)常規(guī)流或者浮動擺放好后，它可能會相對于該位置移動，這叫相對定位。 相對定位的盒保持它在常規(guī)流中的大小，包括換行和空格都會原樣保留 relative與absolute,fixed relative與absolute的關(guān)系 在例1中,absolute元素的top/left:0的定位在瀏覽器窗口的左...

    cyixlq 評論0 收藏0

  • 通過案例理解position:relative和position:absolute

    摘要：并沒有脫離普通流，只是視覺上發(fā)生的偏移。上面的案例中，將第二個子級元素換為內(nèi)聯(lián)元素，子元素下的起點位置并沒有改變。 w3school過了HTML的知識之后，覺得要自己單純地去啃知識點有點枯燥，然后自己也很容易忘記，所以便找具體的網(wǎng)站練手便補上不懂的知識點。position:relative和postion:absolute困擾了我快一個星期之久，網(wǎng)上找到的資料魚龍混雜，剛確定這樣的理解...

    miqt 評論0 收藏0

  • 通過案例理解position:relative和position:absolute

    摘要：并沒有脫離普通流，只是視覺上發(fā)生的偏移。上面的案例中，將第二個子級元素換為內(nèi)聯(lián)元素，子元素下的起點位置并沒有改變。 w3school過了HTML的知識之后，覺得要自己單純地去啃知識點有點枯燥，然后自己也很容易忘記，所以便找具體的網(wǎng)站練手便補上不懂的知識點。position:relative和postion:absolute困擾了我快一個星期之久，網(wǎng)上找到的資料魚龍混雜，剛確定這樣的理解...

    codergarden 評論0 收藏0

  • 探究position定位中absolute和relative的異同

    摘要：總結(jié)一下定位相對于誰進行定位有點復(fù)雜就是找出定位元素父元素鏈上的所有父元素，由近到遠哪個元素不是默認定位即定位的，那么就相對于它進行定位。當(dāng)父元素鏈上所有父元素都是默認定位，那么定位就是相對于元素的，效果和定位差不多。 相信學(xué)過CSS的同學(xué)都曾經(jīng)對于position的各種屬性很困惑，尤其是absolute和relative定位，簡直就是傻傻分不清，筆者寫這篇文章就是希望通過代碼實驗的方...

    NickZhou 評論0 收藏0

  • css position: absolute、relative詳解

    摘要：在使用相對定位時，無論元素是否進行移動，元素依然占據(jù)原來的空間。放置絕對定位對象在可視區(qū)域之外會導(dǎo)致滾動條出現(xiàn)。相對定位是相對于元素在文檔流中初始位置的，而絕對定位是相對于最近的已經(jīng)定位的祖先元素。 CSS2.0 HandBook上的解釋： 設(shè)置此屬性值為 absolute 會將對象拖離出正常的文檔流絕對定位而不考慮它周圍內(nèi)容的布局。假如其他具有不同 z-index 屬性的對象已經(jīng)占...

    h9911 評論0 收藏0

發(fā)表評論

0條評論

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