BFC的介绍和运用

原創

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>熱身

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>

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

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

2020-06-29 18:11:26

重学JS系列：原型继承

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

2020-06-29 18:11:25

substr和substring的区别，和利用substr将指定内容插入到鼠标光标处

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

2020-06-29 18:11:13

JavaScript中，二叉树的三种遍历，及查找最小/大值，指定值，删除指定节点

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

2020-06-29 18:11:11

重学JS系列: new 操作符，和实现一个 new 操作符

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

2020-06-29 18:11:11

JavaScrtipt 内存泄漏

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

2020-06-29 09:16:08

24小時熱門文章

最新文章

最新評論文章