html BFC獨立渲染區

2022-07-27 07:54:14 字數 1312 閱讀 1389

bfc 定義

bfc(block formatting context)直譯為」塊級格式化上下文」。它是乙個獨立的渲染區域,只有block-level box參與, 

它規定了內部的block-level box如何布局,並且與這個區域外部毫不相干。

bfc布局規則:

1.內部的box會在垂直方向,乙個接乙個地放置。

2.box垂直方向的距離由margin決定。屬於同乙個bfc的兩個相鄰box的margin會發生重疊(取最大值)

1、兩個相鄰的外邊距都是正數時,摺疊結果是它們兩者之間較大的值。

2、兩個相鄰的外邊距都是負數時,摺疊結果是兩者絕對值的較大值。

3、兩個外邊距一正一負時,摺疊結果是兩者的相加的和。  

3.在bfc中,每乙個盒子的左外邊緣(margin-left)會觸碰到容器的左邊緣(border-left)

(對於從左往右的格式化,否則相反)。即使存在浮動也是如此。

4.bfc的區域內,不會與float 的 盒子 重疊。

5.bfc就是頁面上的乙個隔離的獨立容器,容器裡面的子元素不會影響到外面的元素。反之也如此。

6.計算bfc的高度時,盒子內部 浮動元素也參與計算

哪些元素會生成bfc?

根元素 html

float 為left,right, 不為none

position 為absolute或fixed,,不是static或者relative

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

overflow 為hidden,scroll

不為visible

1. 解決高度塌陷
2

.利用bfc避免外邊距摺疊

bfc可能造成外邊距摺疊,也可以利用它來避免這種情況。

bfc產生外邊距摺疊要滿足乙個條件:兩個相鄰元素要處於同乙個bfc中。

所以,若兩個相鄰元素在不同的bfc中,就能避免外邊距摺疊。

3.使用bfc避免文字環繞

4.在多列布局中使用bfc

如果我們建立乙個佔滿整個容器寬度的多列布局,在某些瀏覽器中最後一列有時候會掉到下一行。這可能是因為瀏覽器四捨五入了列寬從而所有列的總寬度會超出容器。但如果我們在多列布局中的最後一列裡建立乙個新的bfc,它將總是佔據其他列先佔位完畢後剩下的空間。

Vue 模板渲染 條件渲染 列表渲染

當獲取到後端資料後,我們會把它按照一定的規則載入到寫好的模板中,輸出成在瀏覽器中顯示的 html,這個過程就稱之為渲染。而 vue.js 是在前端 即瀏覽器內 進行的模板 渲染。1.前後端渲染對比 前端渲染 的優勢 是在瀏覽器裡利用 js 把資料和 html 模板進行組合,業務分離,後端只需要提供資...

獨立編譯QVFB

今天是母親節,剛給我媽打了 她感冒還沒有好透,有些咳嗽。祝願天下所有的母親都身體健康,快快樂樂,願天下的所有的兒女都能體會到父母養育我們的艱辛,帶著一顆感恩的心去做人做事.搭建嵌入式qt開發環境已經進行了好幾天了,異常的艱難,做到中間有時候都煩躁地想推翻重來,可那又會是更漫長的過程,中間的編譯配置讓...

SpringMVC獨立執行

1.攔截所有 jsp js png css 全攔截 建議不使用 2.action do 攔截以do action 結尾的請求,肯定能使用erp後台 3.攔截所有 不包括jsp 包含.js png css 強烈建議使用前台 對靜態資源放行 springmvc first org.springframe...