BFC的語法

来源:https://www.cnblogs.com/JAY7758/archive/2020/02/26/12349130.html
-Advertisement-
Play Games

先說一下什麼是BFC(Block Formatting Contexts) BFC:塊級格式化上下文(獨立的渲染區)。通俗的說是塊級元素佈局邏輯或規則,想要觸發BFC就要是塊級元素,要不把它轉為塊級元素(display:block;) BFC的觸發條件。 1.在html框架中就能觸發bfc,也就是一 ...


  先說一下什麼是BFC(Block Formatting Contexts)

BFC:塊級格式化上下文(獨立的渲染區)。通俗的說是塊級元素佈局邏輯或規則,想要觸發BFC就要是塊級元素,要不把它轉為塊級元素(display:block;)

  BFC的觸發條件。

1.在html框架中就能觸發bfc,也就是一開始我們寫塊狀元素的時候它會垂直放置,而不會水平放置。因為這是bfc的佈局規則(每個元素獨占一行)。

2.當float的屬性值不為none時,也就是左右浮動時,就能觸發BFC。

3.position是absolute(絕對定位)或fixed(固定定位)。

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

5.overflow不為visible。

  BFC的佈局規則。(滿足觸發條件)

1.在兩個塊級元素中,給它們添加一下一上margin時你會發現它們的距離不會累加,只會顯示最大的margin。這就是BFC的佈局規則,只要在一個塊級元素中套入另一個BFC就可以解決。

在一個div中套入另一個div不要讓它們同級。

 

 

分別設置兩個上下margin的值為30px,給第二個的父元素添加overflow:hidden;讓它形成BFC。運行就可以顯示累加邊距。

  代碼。設置上div邊距margin-bottom:30px;下div邊距margin-top:30px;

overflow:hidden;為觸發BFC條件。

 

 

  運行結果如下,兩個div邊距就為60px

 

 

 2.BFC內部的box為在垂直方向,一個接一個放置,(見上觸發條件1)

 3.每個元素的margin box的左邊,與包含塊border box的作用相接觸。

 4.BFC的區域不會與float box重疊。

  當左邊box為浮動時,右邊是BFC區域,二者不會重疊。

  

 

 運行結果:

 

 

 5.BFC就是頁面上的一個隔離的獨立容器,容器裡面的子元素不會影響到外面的元素

 6.當計算BFC的高度時,浮動元素也參與計算。

  比如父元素不設高度時,子元素是浮動元素,這樣父元素的高度就會塌陷,影響頁面佈局。讓父元素觸發BFC就可以解決(如overflow:hidden),因為BFC會計算浮動元素的高度

  BFC佈局與普通文本佈局的區別

1.BFC不會和浮動的元素重疊,普通文本會重疊。

2.BFC會計算浮動元素的高度,使父元素不會塌陷。普通文本不會計算,父元素高度會塌陷。

3.BFC會計算上下塊元素margin的邊距,普通文本只會顯示上下塊元素最大的margin。

4.BFC中的margin不會傳遞給父級,普通文本的margin會傳遞給父級。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 常用的休眠方式有freeze,standby, mem, disk freeze: 凍結I/O設備,將它們置於低功耗狀態,使處理器進入空閑狀態,喚醒最快,耗電比其它standby, mem, disk方式高 standby:除了凍結I/O設備外,還會暫停系統,喚醒較快,耗電比其它 mem, disk ...
  • -- 慢 SELECT * FROM table_name ORDER BY rand() LIMIT 5; -- 較慢 SELECT * FROM `table` WHERE id >= (SELECT floor( RAND() * ((SELECT MAX(id) FROM `table`)- ...
  • 創建table的時候就使用utf8編碼 在每次創建表的時候都在最後加上 就可以很好的支持中文 修改已經有的table的編碼 當使用預設編碼創建了一個table的時候,是不能支持中文的,這時候使用如下語句對table_name進行修改: 此後再往這個table插入中文的時候,就可以正常存儲和讀取了,但 ...
  • DML操作的大致流程 在解答上述疑惑之前,我們來梳理一下DML操作的大致流程: 1、語法解析、語義解析 2、生成執行計劃 3、事務修改階段 1) 激活事務,事務狀態由not_active變為active 2) 查找定位數據 3) 樂觀插入 4) 記錄insert相關的undo記錄,並將undo記錄的 ...
  • 眾所周知,微信小程式對下載的文件大小有限制,目前是最大支持10M。我們在用去水印小程式保存視頻的時候,如果遇到長視頻,視頻大小可能就超過限制。遇到這種情況,我們如何才能把視頻保存到手機相冊呢? 首先,如果你用的是Android手機就會很幸福,因為Android系統比較開放,不像蘋果系統比較封閉。An ...
  • 註意:無特殊說明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 InkWell InkWell組件在用戶點擊時出現“水波紋”效果,InkWell簡單用法: 是點擊事件回調,如果不設置無法出現“水波紋”效果,效果如下: 設置 ...
  • 通過js基礎語法瞭解到js的值包含數字,字元串和布爾值;js運算符分為算數,賦值,比較和邏輯運算符;js的流程式控制制包含條件判斷if,switch選擇;迴圈for while;下麵js的函數及作用域,學習掌握知識點:1.函數是什麼?形參和實參2.函數裡面的arguments3.作用域和預解析4.閉包和... ...
  • 前言 工欲善其事,必先利其器。 在前端工作中,我們常常使用到Chrome開發者工具去做各種各樣的事情。 但是您真的瞭解這些開發者工具嗎? 官方文檔還是挺詳細的: "chrome devtools文檔" 。 但是文檔中仍然會有一些功能沒有描述到和一筆帶過。 而我的這篇指南,會略過那些一目瞭然的功能以及 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...