CSS BFC in depth

BFC (Block Formatting Context)

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

clearfix & clear float

  1. clear: both;

  2. overflow: auto;

margin collapsing

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

margin 合并后, margin 大小的计算方法

++, max +

--, min -

+-, sum

同为正数，取大的正值(正)

Math.max(10px, 20px) = 20px

同为负数，取小的负值(负)

Math.min(-10px, -20px) = -20px

一正一负，取求和后的值(可正可负)

10px + -20px = -10px

BFC 触发条件

CSS box modal

统一使用 box-sizing: border-box;

CSS 盒子模型

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

https://css-tricks.com/the-css-box-model/

IE 盒子模型 的 content 包括 border、padding

refs

CSS margin collapsing All In One

https://www.cnblogs.com/xgqfrms/p/13643081.html

https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context/

site:css-tricks.com BFC

https://css-tricks.com/almanac/properties/d/display/

https://css-tricks.com/handling-long-unexpected-content-css/

https://www.cssmojo.com/block-formatting-contexts/

https://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/

https://www.w3cplus.com/css/understanding-css-layout-block-formatting-context.html

https://segmentfault.com/a/1190000013023485

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

CSS BFC in depth的更多相关文章

  1. CSS Modules in depth

    CSS Modules in depth https://github.com/css-modules/css-modules https://webpack.js.org/loaders/css-l ...

  2. 深入理解css BFC 模型

    如果要深入理解css布局的各种原理,要在重构页面做得心应手的话,那么你就必须先理解这玩意 "BFC" , BlockFormatting Context(块级格式化上下文): 这里 ...

  3. CSS BFC(Block Formatting Context)

    BFC是 W3C CSS 2.1 规范中的一个概念Block Formatting Context的缩写即格式化上下文,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.简单讲,它是提 ...

  4. CSS BFC学习笔记

    BFC,全称是Block Formatting Context,块级格式化上下文. 详细是什么,能够理解为页面元素的一种特性.触发了BFC的元素往往会产生一些对刚開始学习的人而言意想不到的效果. 触发 ...

  5. <HTML/CSS>BFC原理剖析

    本文讲了BFC的概念是什么: BFC的约束规则:咋样才能触发生成新的BFC:BFC在布局中的应用:防止margin重叠(塌陷,以最大的为准): 清除内部浮动:自适应两(多)栏布局. 1. BFC是什么 ...

  6. CSS—BFC原理解析与应用

    我们在很多地方都见过BFC这个词,或许能够知道大概意思,但是有时候它的具体原理以及作用会记得很模糊,下面就对BFC这个概念深入学习下. 块级格式化上下文(Block Formatting Contex ...

  7. CSS BFC（格式化上下文）深入理解

    什么是BFC 在解释BFC之前,先说一下文档流.我们常说的文档流其实分为定位流.浮动流和普通流三种.而普通流其实就是指BFC中的FC.FC是formatting context的首字母缩写,直译过来是 ...

  8. CSS——BFC

    http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 元素若不是bfc,那么内部浮动元素的高度不参与计算 元素若不是bf ...

  9. css BFC布局及用处

    http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 这篇文章讲的很简单很实用

随机推荐

  1. Go 语言编译过程

    走进Golang之编译器原理_大愚Talk-CSDN博客 https://blog.csdn.net/hel12he/article/details/103061921 go编译器 - 知乎 http ...

  2. Quartz 定时任务调度

    一.在Quartz.NET中quartz.properties的配置文件,忽略不修改,考虑下面: var props = new NameValueCollection { { "quart ...

  3. SpringMVC听课笔记（六：视图和试图解析器）

    1.spring mvc解析视图 2.  视图和视图解析器 3. 视图 4.常用的视图类 5.视图解析器 1) 2) 3) 4)JSTL 需要注意的是,配置了mvc:view-controller,为 ...

  4. Atlas 2.1.0 实践（4）—— 权限控制

    Atlas的权限控制非常的丰富,本文将进行其支持的各种权限控制的介绍. 在atlas-application.properties配置文件中,可以设置不同权限的开关. atlas.authentica ...

  5. HBase的Write Ahead Log (WAL)

    HBase的Write Ahead Log (WAL) 一.预写日志WAL(Write-Ahead-Log) HLog HLogKey LogFlusher LogRoller Replay 问题 二 ...

  6. CS代理+proxychains+nmap进行内网扫描

    前提:拿下边界机之后,进入内网,想用nmap怎么办? CS可以开启代理,但是是socks4的代理,只能使用tcp协议,所以nmap使用的时候要使用-sT选择使用tcp_协议,要使用-Pn不使用ICMP ...

  7. linux 文件目录解释笔记（未完待续...）

    目录 应放置档案内容 /bin 系统有很多放置执行档的目录,但/bin比较特殊.因为/bin放置的是在单人维护模式下还能够被操作的指令. 在/bin底下的指令可以被root与一般帐号所使用,主要有:c ...

  8. WPF 之 INotifyPropertyChanged 接口的使用 （一）

    一.INotifyPropertyChanged 的基本概念 ​ INotifyPropertyChanged 的作用:通知客户端属性值已经更改.详细信息见:INotifyPropertyChange ...

  9. [CCPC2019网络赛] 1008-Fishing Master（思维）

    >传送门< 题意:现在需要捕$n$条鱼并且将它们煮熟来吃.每条鱼要煮相应的时间才能吃(可以多煮一会),锅里每次只能煮一条鱼,捕一条鱼的时间是相同的,但是在捕鱼的时间内不能做其他事(比如换一 ...

  10. Codeforces Round #673 (Div. 2) C. k-Amazing Numbers（思维）

    题目链接:https://codeforces.com/contest/1417/problem/C 题意 给出一个大小为 $n$ 的数组 $a$,计算当 $k$ 从 $1$ 到 $n$ 取值时在所有 ...