摘要:參考在講之前,先來了解一下規范里面的一個關于元素的定位規則主要有三種常規文檔流,浮動,絕對定位。而這些值都是相對其父元素來說的。在上面的第一點里面我們已經提到了一個概念叫。
參考: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與IFC,首先要理解另外兩個概念:Box 和 FC(即 formatting context)。 Box 一個頁面是由很多個 Box 組成的,元素的類型和 d...
摘要:最常見的有簡稱和簡稱。根據布局規則第四條的區域不會與重疊。根據布局規則第二條垂直方向的距離由決定。同樣的,當內部有浮動時,為了不影響外部元素的布局,計算高度時會包括浮動的高度。避免重疊也是這樣的一個道理。 BFC 已經是一個耳聽熟聞的詞語了,網上有許多關于 BFC 的文章,介紹了如何觸發 BFC 以及 BFC 的一些用處(如清浮動,防止 margin 重疊等)。雖然我知道如何利用 BF...
閱讀 1830·2021-11-11 16:55
閱讀 749·2019-08-30 15:53
閱讀 3588·2019-08-30 15:45
閱讀 671·2019-08-30 14:10
閱讀 3262·2019-08-30 12:46
閱讀 2122·2019-08-29 13:15
閱讀 2025·2019-08-26 13:48
閱讀 933·2019-08-26 12:23