BFC的介紹和運用

原創 binlety 2020-07-03 18:07

BFC的定義：
BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干。
作用：
創建BFC來避免垂直外邊距疊加
創建BFC來清除浮動
創建BFC來實現自適應佈局

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

JS基礎知識積累

1、undefined返回不同的場景。 以window.xxx引用全局變量，尋找不到，會作爲某個屬性不存在，返回undefined. 直接以XXX引用某變量，尋找不到，則是報xxx is not defined錯誤。 2、作用

邱儿 2020-07-06 10:31:56

JavaScript學習（二）javascript基礎

例1 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>熱身

Morris_ 2020-07-06 05:06:21

js 字符串空字符串判斷

js字符串非空判斷 一、JS中if判斷 非空即爲真 非0即爲真 1、字符串參與判斷時：非空即爲真 判斷字符串爲空的方法 if(str!=null && str!=undefined && str !=’’) 可簡寫爲 if(!st

天泽昊 2020-07-05 13:51:07

帶你手動實現bind方法，讓你收穫滿滿

1.手動實現bind方法的要點 當作爲this參數傳入的值爲原始類型數據時，該數據會被包裝成對象。傳入null或者undefined時，this會被替換爲window。 傳入一般對象時，返回的函數內部this指向該對象。 bin

选择远方 2020-07-05 12:17:39

圖解 webpack（模塊化 - CommonJS）

在前面一篇文章中《模塊化系列》徹底理清 AMD,CommonJS,CDM,UMD,ES6 我們可以學到了各種模塊化的機制。那麼接下里我們就來分析一下 webpack 的模塊化機制。（主要講 JS 部分） 提到 webpack，可以說是與

蓝色的秋风 2020-07-04 03:35:50

jq修改css中!mportant樣式的方法

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Test</title>

qq_14954259 2020-07-02 00:40:16

JavaScript Demo---最簡單的菜單切換效果

<!DOCTYPE html> <html lang="en"> <head> <style type="text/css">     ul{list-style: none;width: 300px;margin:0 auto;heig

qq_14954259 2020-07-02 00:40:16

帶你手動實現Object.create()方法

1.我自己的實現 // 我自己的實現 Object.create() Object.create = function (proto, properties = {}) { let newObj = {}; ne

选择远方 2020-07-01 12:22:32

帶你手動實現數組reduce方法

// 該方法存在構造函數的原型上，即數組實例的原型上。 Array.prototype.myReduce = function (fn, initValue) { if(initValue === undefin

选择远方 2020-06-30 09:04:05

重學前端：原生實現 call、apply、bind 函數。

目錄 這三個函數的 特點 call & apply & bind第一個參數，到底傳的什麼 這三個函數實際解決的是什麼問題？ 先看看怎麼調用 let obj = { arr: [1, 6, 3, 5], getArr: fu

Bomb�� 2020-06-29 18:11:26

重學JS系列：原型繼承

在 ES2015/ES6 中引入了 class 關鍵字，但那只是語法糖，JavaScript 仍然是基於原型的， 所以本文未用 類 實現 構造函數 和 原型 目錄 原型 example 繼承的優缺點 原型的概念: 所有對象都

Bomb�� 2020-06-29 18:11:25

substr和substring的區別，和利用substr將指定內容插入到鼠標光標處

substr對象 語法 stringObject.substr(start,length) 作用: substr() 方法可在字符串中抽取從 start 下標開始的指定數目的字符。 先看一段代碼 var str = '12345

Bomb�� 2020-06-29 18:11:13

JavaScript中，二叉樹的三種遍歷，及查找最小/大值，指定值，刪除指定節點

我們上一篇寫了一個簡易二叉樹的創建。 學習二叉樹的創建也是對經典的數據結構又有了一定的瞭解，而很多數據結構也是從二叉樹演化而來的 我們在看一次這種圖 而我們學習創建二叉樹的主要目的還是進行遍歷，查找，操作這三大點。 那我們這次就

Bomb�� 2020-06-29 18:11:11

重學JS系列: new 操作符，和實現一個 new 操作符

new 的特點 如果實現一個 new 操作符 一、new 運算符 new運算符創建一個用戶定義的對象類型的實例或具有構造函數的內置對象的實例。new 關鍵字會進行如下的操作： 創建一個空的 js 對象{} 鏈接該對象（即設置

Bomb�� 2020-06-29 18:11:11

JavaScrtipt 內存泄漏

一、內存生命週期 內存分配：當我們申明變量、函數、對象的時候，系統會自動爲他們分配內存 內存使用：即讀寫內存，也就是使用變量、函數等 內存回收：使用完畢，由垃圾回收機制自動回收不再使用的內存    二、內存泄漏 內存泄漏：不再用到的內存，

MiemieWan 2020-06-29 09:16:08