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

資訊專欄INFORMATION COLUMN

扯點(diǎn)：FC - Formatting Context

notebin / 2558人閱讀

摘要：指頁(yè)面中一個(gè)渲染區(qū)域，并且擁有一套渲染規(guī)則，他決定了其子元素如何定位，以及與其他元素的相互關(guān)系和作用。兩個(gè)同胞盒間的垂直距離取決于屬性。同一個(gè)塊格式化上下文中的相鄰塊級(jí)盒的垂直外邊距將折疊。

FC（Formatting Context）指頁(yè)面中一個(gè)渲染區(qū)域，并且擁有一套渲染規(guī)則，他決定了其子元素如何定位，以及與其他元素的相互關(guān)系和作用。常見(jiàn)的FC有BFC、IFC，GFC和FFC。

BFC

BFC(block formatting context)直譯為"塊格式化上下文"。

block - 塊級(jí)盒參與塊格式化上下文

context - 這里的上下文指一個(gè)流：普通文檔流, float, position

它是一個(gè)獨(dú)立的渲染區(qū)域。它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干。

觸發(fā)條件

the root element or something that contains it - 根元素或其它包含它的元素

floats (elements where float is not none) - 浮動(dòng)元素 (元素的 float 不是 none)

absolutely positioned elements (elements where position is absolute or fixed) - 絕對(duì)定位元素 (元素的 position 為 absolute 或 fixed)

inline-blocks (elements with display: inline-block) - 內(nèi)聯(lián)塊 (元素具有 display: inline-block)

table cells (elements with display: table-cell, which is the default for HTML table cells) - 表格單元格 (元素具有 display: table-cell，HTML表格單元格默認(rèn)屬性)

table captions (elements with display: table-caption, which is the default for HTML table captions) - 表格標(biāo)題 (元素具有 display: table-caption, HTML表格標(biāo)題默認(rèn)屬性)

anonymous table cells implicitly created by the elements with display: table, table-row, table-row-group, table-header-group, table-footer-group (which is the default for HTML tables, table rows, table bodies, table headers and table footers, respectively), or inline-table - 匿名表格元素，在元素display：table, table-row, table-row-group, table-header-group, table-footer-group(分別是默認(rèn)的HTML表、表行,表,表頭和表頁(yè)腳)，inline-table時(shí)創(chuàng)建

block elements where overflow has a value other than visible - 具有overflow 且值不是 visible 的塊元素

display: flow-root

elements with contain: layout, content, or strict - 元素有contains屬性，值為layout, content, or strict

flex items (direct children of the element with display: flex or inline-flex) - flex items（display: flex or inline-flex元素的直接子元素）

grid items (direct children of the element with display: grid or inline-grid) - grid items（display: grid or inline-grid）

multicol containers (elements where column-count or column-width is not auto, including elements with column-count: 1) - multicol containers（元素的column-count或者column-width不是auto，包括元素column-count設(shè)置成1）

column-span: all should always create a new formatting context, - even when the column-span: all element isn"t contained by a multicol container - column-span: all 總是會(huì)創(chuàng)建一個(gè)新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一個(gè)多列容器中。

截止到2018.1.9為止，查看最新的觸發(fā)條件 MDN鏈接

約束規(guī)則

在塊格式化上下文中，盒從包含塊頂部一個(gè)接一個(gè)地垂直擺放。

兩個(gè)同胞盒間的垂直距離取決于 margin 屬性。

同一個(gè)塊格式化上下文中的相鄰塊級(jí)盒的垂直外邊距將折疊。

每個(gè)盒的左外邊緣緊貼包含塊的左邊緣（從右到左的格式里，則為盒右外邊緣緊貼包含塊右邊緣），有浮動(dòng)也是如此

BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。外面的元素不會(huì)影響到容器內(nèi)的子元素。

計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算

IFC GFC，F(xiàn)FC

GFC，F(xiàn)FC是在css3提出的規(guī)范，后面會(huì)結(jié)果flex和grid做總結(jié)。

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

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

相關(guān)文章

  • 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

  • FC及BFC

    摘要：什么是塊級(jí)格式化上下文是布局的對(duì)象和基本單位，直觀點(diǎn)來(lái)說(shuō)，就是一個(gè)頁(yè)面是由很多個(gè)組成的。的用途可以阻止元素被浮動(dòng)元素覆蓋實(shí)現(xiàn)自適應(yīng)兩欄布局可以包含浮動(dòng)元素清除內(nèi)部浮動(dòng)不同的可以阻止重疊思維導(dǎo)圖 1.什么是FC showImg(https://segmentfault.com/img/bVbfrN8?w=808&h=286); 2.BFC塊級(jí)格式化上下文(Block formatting...

    魏明 評(píng)論0 收藏0

  • FC及BFC

    摘要：什么是塊級(jí)格式化上下文是布局的對(duì)象和基本單位，直觀點(diǎn)來(lái)說(shuō)，就是一個(gè)頁(yè)面是由很多個(gè)組成的。的用途可以阻止元素被浮動(dòng)元素覆蓋實(shí)現(xiàn)自適應(yīng)兩欄布局可以包含浮動(dòng)元素清除內(nèi)部浮動(dòng)不同的可以阻止重疊思維導(dǎo)圖 1.什么是FC showImg(https://segmentfault.com/img/bVbfrN8?w=808&h=286); 2.BFC塊級(jí)格式化上下文(Block formatting...

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

  • BFC與IFC概念理解+布局規(guī)則+形成方法+用處

    摘要：下面就來(lái)介紹和的布局規(guī)則。布局規(guī)則原文整理為中文內(nèi)部的會(huì)在垂直方向，一個(gè)接一個(gè)地放置。解決方案為加上使其形成，根據(jù)規(guī)則第六條，計(jì)算高度時(shí)就會(huì)計(jì)算的元素的高度，達(dá)到清除浮動(dòng)影響的效果。并為這個(gè)外層元素設(shè)置，使其形成。 想要理解BFC與IFC，首先要理解另外兩個(gè)概念：Box 和 FC（即 formatting context）。 Box 一個(gè)頁(yè)面是由很多個(gè) Box 組成的，元素的類型和 d...

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

  • css布局的各種FC簡(jiǎn)單介紹：BFC，IFC，GFC，F(xiàn)FC

    摘要：完整的說(shuō)法是屬于同一個(gè)的倆個(gè)相鄰的的會(huì)發(fā)生重疊，與方向無(wú)關(guān)。元素會(huì)位于與與之間，使得寬度縮短。簡(jiǎn)單的說(shuō)，有了之后，布局不再局限于單個(gè)維度了。 什么是FC？ Formatting Context，格式化上下文，指頁(yè)面中一個(gè)渲染區(qū)域，擁有一套渲染規(guī)則，它決定了其子元素如何定位，以及與其他元素的相互關(guān)系和作用。 BFC 什么是BFC Block Formatting Context，塊級(jí)格式...

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

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

0條評(píng)論

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