成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS魔法堂：小結(jié)一下Box Model與Positioning Scheme

szysky / 1963人閱讀

摘要：魔法堂重新認(rèn)識和魔法堂你一定誤解過的魔法堂就這個樣魔法堂說說那個被埋沒的志向深入細(xì)節(jié)后會發(fā)現(xiàn)中定位模式之間，和之間存在千絲萬縷的關(guān)系，必須以俯瞰的角度捋一下。當(dāng)采用時，屬性的實(shí)際值會被重置為。由于和則需要通過來引入來提供盒子定位微調(diào)的功能。

前言

?對于Box Model和Positioning Scheme中3種定位模式的細(xì)節(jié)，已經(jīng)通過以下幾篇文章記錄了我對其的理解和思考。
?《CSS魔法堂：重新認(rèn)識Box Model、IFC、BFC和Collapsing margins》
?《CSS魔法堂：你一定誤解過的Normal flow》
?《CSS魔法堂：Absolute Positioning就這個樣》
?《CSS魔法堂：說說Float那個被埋沒的志向》
?深入細(xì)節(jié)后會發(fā)現(xiàn)3中定位模式之間，Box Model和Positioning Scheme之間存在千絲萬縷的關(guān)系，必須以俯瞰的角度捋一下。

Positioning Scheme的優(yōu)先級

?簡單粗暴上規(guī)則:)

Normal flow作為默認(rèn)的定位模式其優(yōu)先級自然是最低的;

Absolute positioning相比Float，與Normal flow關(guān)聯(lián)性更弱，優(yōu)先級最高;
優(yōu)先級從低到高: Normal flow < Float < Absolute positioning

Box Model與Positioning Scheme的關(guān)系

?之前我總覺得Box Model是一個隨定位模式變化的結(jié)構(gòu)，但其實(shí)我是被一些表象給蒙蔽了而已。
?首先我們要堅定不移地記?。?strong>每一個元素只要不是display:none，則它必定會產(chǎn)生一個遵循Box Model的盒子，而這個盒子不管任何情況均由margin box、border box、padding box和content area這4個框組成。（因此說每一個元素會生成0~N個框是正確的哦^_^）
?而Positioning Scheme則決定盒子間布局關(guān)系，并通過影響display屬性影響Ccontent area寬高的設(shè)置方式。

當(dāng)采用Normal flow。inline-level element將在水平方向上一個接一個的排版布局，并且無法通過width和height來強(qiáng)制設(shè)置寬度和高度；block-level element將在垂直方向上逐一排版。

當(dāng)采用Float時，display屬性的實(shí)際值會被重置為block。

當(dāng)采用Absolute positioning時，display屬性的實(shí)際值會被重置為block，并且通過引入top/right/bottom/left這4個margin edge到containing block對應(yīng)的edge的距離來調(diào)整盒子的定位。

由于Normal flow和Float則需要通過position:relative來引入top/right/bottom/left來提供盒子定位微調(diào)的功能。

注意：無論采用哪種定位模式，盒子依然由margin/border/padding/content4個框組成

Positioning Scheme將影響display的結(jié)果值

?當(dāng)采用Float和Absolute positioning時，display屬性值將根據(jù)下列規(guī)則被重置：

設(shè)定值
inline-table
實(shí)際值
table
設(shè)定值
inline, run-in, table-row-group, table-column, table-column-group, table-header-group,
table-footer-group, table-row, table-cell, table-caption, inline-block 
實(shí)際值
block

?另外當(dāng)設(shè)置display:none，就不再考慮Positioning scheme了。因?yàn)樵貨]有對應(yīng)的盒子，還說什么定位，說什么布局呢。

總結(jié)

尊重原創(chuàng)，轉(zhuǎn)載請注明來自：http://www.cnblogs.com/fsjohnhuang/p/537...肥仔John

感謝

KB009: CSS 定位體系概述

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

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

相關(guān)文章

  • CSS魔法堂：Absolute Positioning就這個樣

    摘要：更多關(guān)于的信息可參考魔法堂不得不說的因此的實(shí)際值則是相對于而言，我們可以通過來獲取和的實(shí)際值。對于由于自身有固有的，因此當(dāng)設(shè)置時，其實(shí)際值就是元素固有的。結(jié)果就是除均不為，而為時，會自動計算以滿足等式。兩條不滿足外，其他情況均一致。 前言 當(dāng)我們以position:absolute之名讓元素脫離Normal flow的控制后，以為通過left和top屬性值即可讓元素得以無限的自由時，卻...

    Yangyang 評論0 收藏0

  • CSS魔法堂：你一定誤解過的Normal flow

    摘要：后來終于知道是某位大神將翻譯為文檔流而已。。。。。。另外單純設(shè)置效果與采用是一樣的魔法堂就這個樣，而浮動定位也是基于。相對定位的最強(qiáng)武器就是個屬性了，好明顯它們默認(rèn)值均是。 前言 ?剛接觸CSS時經(jīng)常聽到看到一個詞文檔流，那到底什么是文檔流呢？然后會看到絕對定位和浮動定位能脫離文檔流，從這句可以看到文檔流和絕對定位、浮動定位是同一個范疇的概念，再后來在W3C標(biāo)準(zhǔn)文檔找到關(guān)于Absolu...

    Hancock_Xu 評論0 收藏0

  • CSS魔法堂：說說Float那個被埋沒的志向

    摘要：時其寬度始終保持占滿寬度的態(tài)度。清除浮動就是為浮動影響的范圍劃邊界。那么可歸結(jié)為的父容器包裹所有子元素。注意屬性值不能為空白，否則無法清除浮動。 前言 ?定位系統(tǒng)中第一難理解就是Normal flow，而第二就非Float莫屬了，而Float難理解的原因有倆，1. 一開頭我們就用錯了；2. 它跟Normal flow靠得太近了。本文嘗試?yán)砬錐loat的特性和行為特征，若有紕漏望各位指正...

    legendmohe 評論0 收藏0

  • CSS魔法堂：不得不說的Containing Block

    摘要：前言魔法堂重新認(rèn)識和中提到在沒有兄弟盒子時，的左右邊框會與所屬的的左右相接觸。對于的元素若不存在的為的父，其為。正常情況若子尺寸尺寸，則子溢出溢出后的顯示效果由屬性值決定。異常情況下當(dāng)時，若子的尺寸大于的尺寸而城撐大。 前言 ?《CSS魔法堂：重新認(rèn)識Box Model、IFC、BFC和Collapsing margins》中提到在沒有floated兄弟盒子時，line box的左右邊...

    opengps 評論0 收藏0

發(fā)表評論

0條評論

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