CSS BFC in depth
CSS BFC in depth
BFC (Block Formatting Context)
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
clearfix & clear float
clear: both;
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的更多相关文章
- CSS Modules in depth
CSS Modules in depth https://github.com/css-modules/css-modules https://webpack.js.org/loaders/css-l ...
- 深入理解css BFC 模型
如果要深入理解css布局的各种原理,要在重构页面做得心应手的话,那么你就必须先理解这玩意 "BFC" , BlockFormatting Context(块级格式化上下文): 这里 ...
- CSS BFC(Block Formatting Context)
BFC是 W3C CSS 2.1 规范中的一个概念Block Formatting Context的缩写即格式化上下文,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.简单讲,它是提 ...
- CSS BFC学习笔记
BFC,全称是Block Formatting Context,块级格式化上下文. 详细是什么,能够理解为页面元素的一种特性.触发了BFC的元素往往会产生一些对刚開始学习的人而言意想不到的效果. 触发 ...
- <HTML/CSS>BFC原理剖析
本文讲了BFC的概念是什么: BFC的约束规则:咋样才能触发生成新的BFC:BFC在布局中的应用:防止margin重叠(塌陷,以最大的为准): 清除内部浮动:自适应两(多)栏布局. 1. BFC是什么 ...
- CSS—BFC原理解析与应用
我们在很多地方都见过BFC这个词,或许能够知道大概意思,但是有时候它的具体原理以及作用会记得很模糊,下面就对BFC这个概念深入学习下. 块级格式化上下文(Block Formatting Contex ...
- CSS BFC（格式化上下文）深入理解
什么是BFC 在解释BFC之前,先说一下文档流.我们常说的文档流其实分为定位流.浮动流和普通流三种.而普通流其实就是指BFC中的FC.FC是formatting context的首字母缩写,直译过来是 ...
- CSS——BFC
http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 元素若不是bfc,那么内部浮动元素的高度不参与计算 元素若不是bf ...
- css BFC布局及用处
http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 这篇文章讲的很简单很实用
随机推荐
- fiddler安装以及使用说明
一.fiddler fiddler是一个抓包工具,通过使用它抓包我们可以很清晰的看到抓的内容的协议,URL,参数等. 1.安装 在普通下载网站找到安装包,直接安装,点击下一步即可. 二.使用 1.se ...
- （011）每日SQL学习：SQL开窗函数
开窗函数:在开窗函数出现之前存在着很多用 SQL 语句很难解决的问题,很多都要通过复杂的相关子查询或者存储过程来完成.为了解决这些问题,在 2003 年 ISO SQL 标准加入了开窗函数,开窗函数的 ...
- MSSQL 注入笔记
前置知识: 登录名:登录sql server服务器的用户,而不是操作"数据库用户名". 固定服务器角色:就是上面登录名所属的权限组.其中重要的就是"sysadmin&qu ...
- 常用的正则表达式@java后台
package Regex; import java.util.regex.Matcher; import java.util.regex.Pattern; /** * @作者 Goofy * @邮件 ...
- 从官方文档中探索MySQL分页的几种方式及分页优化
概览 相比于Oracle,SQL Server 等数据库,MySQL分页的方式简单得多了,官方自带了分页语法 limit 语句: select * from test_t LIMIT {[offset ...
- HDU5407 CRB and Candies 【LCM递推】
HDU5407 CRB and Candies 题意: 计算\(LCM(C(n,0),C(n,1),C(n,2),\cdots,C(n,n-1),C(n,n))\) \(n\le 10^6\) 题解: ...
- FZU - 1901 Period II （kmp）
传送门:FZU - 1901 题意:给你个字符串,让你求有多少个p可以使S[i]==S[i+P] (0<=i<len-p-1). 题解:这个题是真的坑,一开始怎么都觉得自己不可能错,然后看 ...
- Atcoder(134)E - Sequence Decomposing
E - Sequence Decomposing Time Limit: 2 sec / Memory Limit: 1024 MB Score : 500500 points Problem Sta ...
- 2019牛客暑期多校训练营(第九场) D Knapsack Cryptosystem
题目 题意: 给你n(最大36)个数,让你从这n个数里面找出来一些数,使这些数的和等于s(题目输入),用到的数输出1,没有用到的数输出0 例如:3 4 2 3 4 输出:0 0 1 题解: 认真想一 ...
- 洛谷 P1525 关押罪犯 (贪心,扩展域并查集)
题意:有\(n\)个罪犯,\(m\)对罪犯之间有仇,现在将这些罪犯分到两个监狱里去,问两个监狱里有仇罪犯之间的最大权值最小为多少. 题解:先按边权从大到小排序,然后贪心,边权大的两个罪犯,我们一定要先 ...