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

資訊專欄INFORMATION COLUMN

什么是 Block Formatting Context (BFC)

dayday_up / 3356人閱讀

摘要:參考在講之前,先來了解一下規范里面的一個關于元素的定位規則主要有三種常規文檔流,浮動,絕對定位。而這些值都是相對其父元素來說的。在上面的第一點里面我們已經提到了一個概念叫。

參考:https://www.w3.org/TR/CSS21/v...
在講BFC之前,先來了解一下CSS2.1規范里面的一個關于元素的定位規則(positioning schemes),主要有三種:常規文檔流,浮動,絕對定位。
1: 常規文檔流(Normal flow):常規文檔流包含三種情況:

1: 塊級盒元素(block-level boxes)的塊級格式(block formatting)
2: 行內盒元素(inline-level boxes)的行內格式(inline formatting)
3: 塊級盒元素和行內盒元素的相對定位

2: 浮動(Floats):

1: 第一步:先按照常規文檔流的規則定位
2: 第二步:從文檔流里面抽離出來,最大化地靠左或者靠右
3: 浮動的元素對后續的元素定位有影響

3: 絕對定位(Absolute positioning):

1: 絕對定位包括 "position: absolute"和"position: fixed"
2: 絕對定位的元素從文檔流里面徹底地抽離出來,對后續的元素定位沒有影響
3: 絕對定位的元素最終的位置取決的‘top’,"right", "bottom", "left"設置的值。而這些值都是相對其父元素來說的。

在上面的第一點里面我們已經提到了一個概念叫:block formatting。那什么又是Block Formatting Context呢?這里先看看MDN是給出的定義:

A block formatting context is a part of a visual CSS rendering of a
Web page. It is the region in which the layout of block boxes occurs
and in which floats interact with each other.

額,看完之后,我腦袋里面只有一個想法: What is that?
不如先不去追究這個概念,先來看看在哪些情況下,會創造BFC:

1:根元素
2: 浮動元素:float的值不是‘none’的元素
3: 絕對定位元素:(position: absolute 或者 position: fixed)
4: 行內塊級元素:(display: inline-block)
5: 表格單元格(table cells):(display: table-cell,也是 HTML table cells的默認值)
6: 表單標題(table captions): (display: table-caption, 也是HTML table captions的默認值)
7: 塊元素(block element)當overflow為非"visible"的其他值:auto, hidden, initial, overlay, scroll. 當overflow:inherit, 這時候取決于最終繼承到的值。
8: display: flow-root的元素
9: column-span: all的元素

看完了上面產生BFC的各種情況,現在再來看看BFC到底有些什么規則:
1: 在一個塊元素格式上下文(BFC),這些盒子(boxs)從父元素(容器元素)的頂端垂直地一個接一個排列
2: 兩個相鄰元素的垂直間距(margin)會折疊(collapse)
3: 每一個元素的左邊界緊貼著容器元素的左邊界(當然這是針對從左到右排列的元素,從右到左排列的元素那就是又邊界緊貼著容器元素的右邊界)。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/83716.html

相關文章

  • BFC原理詳解

    摘要:最常見的有簡稱和簡稱。可以把它理解成是一個獨立的容器,并且這個容器的里的布局,與這個容器外的毫不相干。根據布局規則第二條垂直方向的距離由決定。參考前端精選文摘神奇背后的原理之詳解深入理解流體特性和特性下多欄自適應布局布局 一.BFC是什么 在解釋 BFC 是什么之前,需要先介紹 Box、Formatting Context的概念。 1.BOX:CSS布局的基本單位 Box是CSS布局的...

    ziwenxie 評論0 收藏0
  • 關于BFC的總結

    摘要:雖然工作這么多年了,但是如果讓我直接解釋一下什么是的時候,還是感覺有點不知道怎么準確的表達,下面就翻翻文檔,總結一下,加深一下認識吧。兩個兄弟盒之間的垂直距離由屬性決定。最常見的有簡稱和簡稱。 雖然工作這么多年了,但是如果讓我直接解釋一下什么是BFC的時候,還是感覺有點不知道怎么準確的表達,下面就翻翻文檔,總結一下,加深一下認識吧。大家也可以關注我的GitHub后續的更新 1.BFC...

    chadLi 評論0 收藏0
  • 關于BFC的總結

    摘要:雖然工作這么多年了,但是如果讓我直接解釋一下什么是的時候,還是感覺有點不知道怎么準確的表達,下面就翻翻文檔,總結一下,加深一下認識吧。兩個兄弟盒之間的垂直距離由屬性決定。最常見的有簡稱和簡稱。 雖然工作這么多年了,但是如果讓我直接解釋一下什么是BFC的時候,還是感覺有點不知道怎么準確的表達,下面就翻翻文檔,總結一下,加深一下認識吧。大家也可以關注我的GitHub后續的更新 1.BFC...

    oneasp 評論0 收藏0
  • BFC與IFC概念理解+布局規則+形成方法+用處

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

    lbool 評論0 收藏0
  • BFC 神奇背后的原理(轉)

    摘要:最常見的有簡稱和簡稱。根據布局規則第四條的區域不會與重疊。根據布局規則第二條垂直方向的距離由決定。同樣的,當內部有浮動時,為了不影響外部元素的布局,計算高度時會包括浮動的高度。避免重疊也是這樣的一個道理。 BFC 已經是一個耳聽熟聞的詞語了,網上有許多關于 BFC 的文章,介紹了如何觸發 BFC 以及 BFC 的一些用處(如清浮動,防止 margin 重疊等)。雖然我知道如何利用 BF...

    April 評論0 收藏0

發表評論

0條評論

dayday_up

|高級講師

TA的文章

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