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 发布文章使用：只允许注册用户才可以访问！
最新文章
- AWS S3 CLI的权限bug
- SQL中的连接可以分为内连接，外连接，以及交叉连接 。
- [转]使用CSS3实现树形控件
- fill 函数
- 牛客OJ——[编程题]A+B和C__如何输入多组测试数据(测试OK)
- Apache服务
- 关于android app两次点击返回键退出的处理
- shuffle机制和TextInputFormat分片和读取分片数据(九)
- android4.0 禁止横竖屏切换使用 android:configChanges="orientation|keyboardHidden"无效
- PHP学习笔记8-文件操作
- maven配置全局的jdk和配置局部的jdk
- javascript 判断对象类型
- git查日志命令
- 关于Java中static关键字的用法以及从内存角度解析
- R和Python，对抗or融合？
- 如何查看SQL SERVER数据库当前连接数
- MyEclipse中将项目的编码从默认GBK改变为默认UTF-8
- maven的注意点
- ace -- api
- 【Devops】【docker】【CI/CD】关于jenkins构建成功后一步，执行的shell命令详解+jenkins容器运行宿主机shell命令的实现方法