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

資訊專(zhuān)欄INFORMATION COLUMN

想要清晰的明白（一）： CSS視覺(jué)格式化模型|盒模型|定位方案|BFC

Edison / 2976人閱讀

摘要：并且這種過(guò)程遵循標(biāo)準(zhǔn)的描述只要不是和絕對(duì)定位方式布局的，都在普通流里面。定位相對(duì)定位在普通流之中，是相對(duì)于它在普通流中的位置中進(jìn)行移動(dòng)，元素占據(jù)原來(lái)位置絕對(duì)定位脫離普通流，不占據(jù)空間相對(duì)于距離它最近的那個(gè)已定位的祖先相對(duì)絕對(duì)元素決定的。

視覺(jué)格式化模型

頁(yè)面(文檔樹(shù))可以想象成是由一個(gè)個(gè)的Box組合而成的，而視覺(jué)格式化模型(Visual formatting model)是一套規(guī)則，將這些框布局成訪(fǎng)問(wèn)者看到的樣子。

哪些因素控制了這些布局 
    1. 盒的尺寸和類(lèi)型
    2. 定位體系 Positioning Scheme （常規(guī)流，浮動(dòng)和絕對(duì)定位）
    3. 文檔樹(shù)中元素之間的關(guān)系
    4. 外部信息（如：視口大小，圖片的固有尺寸等）

下文講針對(duì)性的解釋這些影響布局的因素，先來(lái)解釋些概念~

元素框 
css假設(shè)每個(gè)元素都會(huì)生成一個(gè)或者多個(gè)Box，稱(chēng)為元素框，元素框中心有內(nèi)容區(qū)，內(nèi)容區(qū)外周?chē)藀adding，border，margin，盒模型就是用來(lái)處理這些內(nèi)容的一個(gè)模型
包含塊 
每個(gè)元素都是相對(duì)于包含塊擺放，包含塊就是一個(gè)元素的“布局上下文”,

    
p的包含塊是div

    //div的包含塊是body
替換/非替換元素 
替換元素就是瀏覽器根據(jù)元素的標(biāo)簽和屬性，來(lái)決定元素的具體顯示內(nèi)容。
通過(guò) CSS content 屬性來(lái)插入的對(duì)象 被稱(chēng)作?匿名可替換元素
如果元素的內(nèi)容包含在文檔之中，則為非替換元素
非替換元素的所有規(guī)則同樣適用于替換元素，只有一個(gè)例外，width如果是auto,元素的高寬就是內(nèi)容的固有高寬，比如img就是圖片的原始大

例如瀏覽器會(huì)根據(jù)

瀏覽器會(huì)根據(jù)元素的標(biāo)簽類(lèi)型和屬性來(lái)顯示這些元素。可替換元素也在其顯示中生成了框。

CSS Box(盒模型/框模型) 
CSS 框模型 (Box Model) 規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距、邊框 和 外邊距 的方式，我們常見(jiàn)的盒模型大致有兩種，一種是塊級(jí)的盒子（Block Box），一種是行級(jí)的盒子（Line Box）

詳細(xì)盒子的規(guī)則見(jiàn)下篇想要清晰的明白（二）CSS 盒模型Block box與Line box，但是我們至少可以知道盒子模型，在整個(gè)視覺(jué)模型中做到的是一個(gè)什么角色，盒子模型是處理盒子本身內(nèi)部屬性，像比如邊距，邊框的，而視覺(jué)格式化模型是來(lái)處理這些盒子擺放的

Block Box 
display ： block 、 list-item 以及 table 會(huì)讓一個(gè)元素成為塊級(jí)元素。
Line Box 
每一行稱(chēng)為一條Line Box，它又是由這一行的許多inline-box組成
display：inline會(huì)讓一個(gè)元素稱(chēng)為行內(nèi)元素
inline-block 
將對(duì)象呈現(xiàn)為inline對(duì)象，但是對(duì)象的內(nèi)容作為block對(duì)象呈現(xiàn)。之后的內(nèi)聯(lián)對(duì)象會(huì)被排列在同一行內(nèi)。比如我們可以給一個(gè)link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
Formatting context 
每個(gè)元素，或者說(shuō)每個(gè)Box會(huì)根據(jù)設(shè)置的display值，去選擇渲染它的方式，不同的display有不同層級(jí)：block-level box（塊級(jí)）inline-level box(行級(jí))，run-in box(插入型框 css3)，不同的層級(jí)會(huì)參與不同的環(huán)境（formatting context）去渲染

上文提到的環(huán)境就是這個(gè)Formatting context（格式化上下文），他是一個(gè)有渲染規(guī)則的渲染區(qū)域，不同的層級(jí)有不同的渲染規(guī)則，比如BFC和IFC

BFC 什么是BFC

塊級(jí)格式化上下文，Block formatting context(簡(jiǎn)稱(chēng)BFC)，規(guī)定了塊級(jí)盒子的渲染布局方式，他在計(jì)算盒子高度，margin值計(jì)算等地方有區(qū)別于其他環(huán)境。

BFC有什么特點(diǎn) 
內(nèi)部盒子會(huì)在垂直方向排列


同一個(gè)BFC中的元素可能會(huì)發(fā)生margin collapse；


BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，里外互相不影響


計(jì)算BFC的高度時(shí)，考慮BFC所包含的所有子元素，連浮動(dòng)元素也參與計(jì)算；


當(dāng)元素不是BFC的子元素的時(shí)候，浮動(dòng)元素高度不參與BFC計(jì)算（既是常見(jiàn)的盒子塌陷問(wèn)題）
什么元素會(huì)觸發(fā)產(chǎn)生一個(gè)新的BFC 
根元素 


float屬性不為none


position為absolute或fixed


display為inline-block, table-cell, table-caption, flex, inline-flex


overflow不為visible
再認(rèn)真理解下這張圖


我們可以用BFC來(lái)干嘛

清除浮動(dòng)

阻止邊距折疊

用于布局，什么兩欄自適應(yīng)高度之類(lèi)的

BFC兼容性

IE6-7不支持BFC，而是使用私有屬性hasLayout。表現(xiàn)上來(lái)看hasLayout和BFC相似，觸發(fā)hasLayout條件與BFC相似，另外需要為元素設(shè)置IE特有的CSS屬性zoom:1; zoom用于設(shè)置或檢索元素的縮放比例，值為1即使用元素實(shí)際尺寸，使用zoom既可以觸發(fā)hasLayout又不會(huì)對(duì)元素產(chǎn)生其他影響，相對(duì)來(lái)說(shuō)更加方便

CSS定位方案 
css布局宏觀上來(lái)說(shuō)是受定位方案影響，定位方案包括普通流，浮動(dòng)，定位
普通流 
元素按照其在 HTML 中的位置順序決定排布的過(guò)程。并且這種過(guò)程遵循標(biāo)準(zhǔn)的描述
只要不是float和絕對(duì)定位方式布局的，都在普通流里面。
浮動(dòng) 
浮動(dòng)框不在文檔的普通流中，浮動(dòng)的流會(huì)漂浮在普通的流上面。
浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/pre>
定位

 1. 相對(duì)定位在普通流之中，是相對(duì)于它在普通流中的位置中進(jìn)行移動(dòng)，元素占據(jù)原來(lái)位置
 2. 絕對(duì)定位脫離普通流，不占據(jù)空間相對(duì)于距離它最近的那個(gè)已定位的祖先(相對(duì)/絕對(duì))元素決定的。
 3. 固定定位，相對(duì)于瀏覽器窗口定位，脫離普通流，不占據(jù)空間
 
 剩下的下篇見(jiàn)！！！(*￣3￣)╭


參考資料


caopen.net


CSS三種基本定位機(jī)制


css之BFC詳解


inline-boxd的前世今生


《CSS.The.Definitive.Guide》


CSS float浮動(dòng)的深入研究、詳解及拓展

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

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

相關(guān)文章

  • 想要清晰的明白（二）CSS 盒模型Block box與Line box

    摘要：垂直格式化，有一個(gè)很重要的方面是會(huì)造成垂直相鄰?fù)膺吘嗪喜ⅲ鉀Q這個(gè)的方式見(jiàn)想要清晰的明白一中的部分。參考資料權(quán)威指南第三版為負(fù)值產(chǎn)生的影響和常見(jiàn)布局應(yīng)用布局圣杯布局雙飛翼布局深入理解和的基友關(guān)系深入理解中的行高 在上一篇想要清晰的明白（一）： CSS視覺(jué)格式化模型|盒模型|定位方案|BFC比較宏觀的了解了盒子模型的作用，接下來(lái)就詳細(xì)的介紹兩種盒子的具體細(xì)節(jié) Block Box show...

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

  • CSS中各種布局的背后(*FC)

    摘要：中各種布局的背后，實(shí)質(zhì)上是各種的組合。相反，一些塊容器盒，比如非替換行內(nèi)塊及非替換表格單元格，不是塊級(jí)盒。描述元素跟它的后代之間的影響。行盒行盒由行內(nèi)格式化上下文產(chǎn)生的盒，用于表示一行。彈性容器外和彈性項(xiàng)目?jī)?nèi)的一切元素都不受影響。 CSS中各種布局的背后，實(shí)質(zhì)上是各種*FC的組合。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 FFC 和 GFC。 盒模型(Box M...

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

  • 視覺(jué)格式化模型之BFC

    摘要：詳見(jiàn)權(quán)威指南塊級(jí)元素即塊級(jí)元素是源文檔中被格式化為塊的元素，或者屬性為的元素。概念顧名思義塊級(jí)格式化上下文。每個(gè)元素的的左邊，與包含塊的左邊相接觸對(duì)于從左往右的格式化，否則相反。 情景：浮動(dòng)的高度塌陷時(shí)，使用overflow：hidden可使父元素將浮動(dòng)的子元素包含起來(lái)，解決問(wèn)題。但背后的原理是什么？這就是今天要談的BFC。 在將BFC之前需要先了解幾個(gè)概念： 盒子模型（Box mo...

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

  • 前端進(jìn)階之什么是BFC？BFC的原理是什么？如何創(chuàng)建BFC？

    摘要：官方說(shuō)法就是它規(guī)定了用戶(hù)端在媒介中如何處理文檔樹(shù)。是的包含塊，同時(shí)又是的包含塊，不是絕對(duì)的。因此稱(chēng)為匿名盒子。行內(nèi)盒子行內(nèi)級(jí)元素會(huì)生成行內(nèi)級(jí)盒子，該盒子同時(shí)會(huì)參與行內(nèi)格式化上下文的創(chuàng)建。如果只有一個(gè)值指定為，則其使用的值來(lái)自相等。 作者：陳大魚(yú)頭 github： KRISACHAN 盒模型 The CSS box model describes the rectangular b...

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

  • BFC，包含塊，文檔流，浮動(dòng)，定位是個(gè)啥關(guān)系---CSS視覺(jué)格式化模型

    摘要：視覺(jué)格式化模型瀏覽器在解析渲染我們所寫(xiě)的內(nèi)容，順序渲染普通文檔流。渲染結(jié)果如下圖這兒有一個(gè)知識(shí)點(diǎn)文檔流按我的理解就是在瀏覽器渲染顯示的一個(gè)模式，這個(gè)模式的特點(diǎn)自上而下，從左到右排列規(guī)則。如果不特殊指定，瀏覽器會(huì)默認(rèn)當(dāng)前的渲染是按文檔流模式。 CSS視覺(jué)格式化模型 瀏覽器在解析渲染我們所寫(xiě)的html內(nèi)容，順序渲染（普通文檔流）。 1 2 3 4 ...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<