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 这篇文章讲的很简单很实用
随机推荐
- Java Optional使用指南
提到NullPointerException(简称NPE)异常,相信每个Java开发人员都不陌生,从接触编程的第1天起,它就和我们如影随形,最近处理的线上bug中,有不少都是对象没判空导致的NullP ...
- Cannot assign requested address问题总结
Cannot assign requested address问题总结 - 简书 https://www.jianshu.com/p/51a953b789a4 python3 server.pyE07 ...
- int ping = 11; 限流 客户端验证与服务端是连接的
int ping = 11; ZooKeeper Programmer's Guide https://zookeeper.apache.org/doc/r3.1.2/zookeeperProgram ...
- httpd反向代理实践（一）
div.example { background-color: rgba(229, 236, 243, 1); color: rgba(0, 0, 0, 1); padding: 0.5em; mar ...
- JasperReports 取消自动分页/忽略分页
因为需要将合同比价单由PDF文档形式改为HTML页面方式,虽然转换文档类型了,但是发现HTML页面中间到了一定行数就出现了空行把Detail给隔开了.之前总想着怎样消除中间空行,以为是报表top页面边 ...
- （十二）整合 Shiro 框架，实现用户权限管理
整合 Shiro 框架,实现用户权限管理 1.Shiro简介 1.1 基础概念 1.2 核心角色 1.3 核心理念 2.SpringBoot整合Shiro 2.1 核心依赖 2.2 Shiro核心配置 ...
- jQuery——操作DOM
所谓Web体验,就是Web服务器与Web浏览器之间的合作.过去,都是由服务器生成HTML文档,然后浏览器负责解释并显示该文档.后来,我们可以用CSS技术来动态修改页面的外观. ###操作属性 jQue ...
- scala 时间，时间格式转换
scala 时间,时间格式转换 1.scala 时间格式转换(String.Long.Date) 1.1时间字符类型转Date类型 1.2Long类型转字符类型 1.3时间字符类型转Long类型 2. ...
- GJ项目技术代码相关总结
第一次实习公司的GJ项目快要结束,自己总结了一些工作中的代码,留到记录学习. 根据下拉条件,进行查询,展示出不同的表单选项:并在鼠标进入到指定区域时显示部分内容,鼠标移出内容区域时,隐藏内容. 焦点移 ...
- BigDecimal 用法详解
BigDecimal简介 BigDecimal用法: BigDecimal的构造方法 BigDecimal常用方法描述 BigDecimal比较 BigDecimal总结 BigDecimal简介 J ...