可能是最好的 BFC 解析了

2021-10-03 20:41:42 字數 964 閱讀 6912

css 盒模型描述了通過 文件樹中的元素 以及相應的 視覺格式化模型 所生成的矩形盒子。簡單來說,盒模型定義了乙個 矩形盒子,當我們需要對文件進行布局時,瀏覽器的渲染引擎就會根據盒模型,將所有元素表示為乙個個矩形的盒子,盒子的外觀由 css 決定。

乙個標準的盒子由四個部分組成,由內向外分別為:內容,內邊距,邊框,外邊距:

標準的盒模型中,內容區域的大小可以明確地通過 width,min-width,max-width,height,min-height,max-height 控制,也就是說,通過 css 設定的元素寬高只是包含內容區域。你可能聽說過 怪異盒模型,這種盒模型最早在 ie 瀏覽器**現,也叫 ie盒模型,box-sizing 屬性值為 border-box 時,元素會呈現怪異盒模型,此時,元素的寬高包含了內容,內邊距和邊框。

視覺格式化模型

css 視覺格式化模型描述了盒子是怎樣生成的,簡單來說,它定義了盒子生成的計算規則,通過規則將文件元素轉換為乙個個盒子。

每個盒子的布局由尺寸,型別,定位,盒子的子元素或兄弟元素,視口的尺寸和位置等因素決定。

視覺格式化模型的計算,取決於乙個矩形的邊界,這個邊界,就是 包含塊( containing block ):

複製**上述**中,table和tr都是包含塊,table是tr的包含塊,同時tr又是td的包含塊。 盒子不受包含塊的限制,當盒子的布局跑到包含塊的外面時,就是我們說的溢位(overflow)。 視覺格式化模型定義了盒(box)的生成,其中的盒主要包括了塊級盒,行內盒 和 匿名盒。 塊級元素 css 屬性值 display 為 block,list-item,table 的元素。 塊級盒 塊級盒具有以下特性:

css 屬性值 display 為 block,list-item,table 時,它就是塊級元素

視覺上,塊級盒呈現為豎直排列的塊

每個塊級盒都會參與 bfc 的建立

每個塊級元素都會至少生成乙個塊級盒,稱為主塊級盒;一些元素可能會生成額外的塊級盒,比如

可能是你見過最好的 React Hooks 庫

ahooks 1 是由螞蟻 umi 團隊 淘系 ice 團隊以及阿里體育團隊共同建設的 react hooks 工具庫。ahooks 基於 react hooks 的邏輯封裝能力,提供了大量常見好用的 hooks,可以極大降低 複雜度,提公升開發效率。ahooks 致力成為和 antd fusion...

這可能是學日語最好的幾個App

除了之前推薦的lingodeer和memrise真的是灰常好的學語言的工具 學習的方向和規律都是比較科學的。不知道的小夥伴這裡?語言學習愛好者的福利 lingodeer yama之前用的 當然現在很少用了,沒什麼時間,不過好評很多嗷 那我乙個個推薦 nhk新聞 這個閒來無事的時候用來聽聽nhk新聞 ...

差異可能是重要的

3位可儲存8個值。n位可儲存2 n值。因為乙個位元組的8位,乙個位元組可以存放2 8 256 的值。變數的大小對大量的資訊可以儲存 這是更大的變數可以容納更多的限制。我們將進一步解決這個問題的時候,我們進入不同型別的變數。第二,電腦有乙個有限的可用記憶體。每一次我們宣告乙個變數,那游離的記憶是只要用...