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 这篇文章讲的很简单很实用
随机推荐
- Markdown 编辑器+同步预览+文件笔记管理+静态博客 metadata 管理
Leanote: 1. 笔记管理, 支持富文本, markdown, 写作模式.... 编辑器绝对好用. 另外特意为coder制作了一个贴代码的插件, 真是太贴心(因为作者也是coder) 2. 博客 ...
- GRASP职责分配模式
https://mp.weixin.qq.com/s/IaxAnWfVqe3mM0bHFVV5Gg 软件开发必修课:你该知道的GRASP职责分配模式 原创 悟真 阿里技术 今天 收录于话题 #设计模式 ...
- shiro的授权与认证
shiro的授权与认证 package com.cy.pj.common.aspect;import java.lang.reflect.Method;import java.util.Arrays; ...
- libevent源码学习之event
timer event libevent添加一个间隔1s持续触发的定时器如下: struct event_base *base = event_base_new(); struct event *ti ...
- mysql和oracle的字符拼接方法
不同的数据库,相应的字符串拼接方式不同,通过对比加深一下记忆. 一.MySQL字符串拼接 1.CONCAT函数 语法格式:CONCAT(char c1, char c2, ..., char cn) ...
- 详述C++casting操作
Casting----类型转换,也就是将数据从一种类型转换到另一种类型的操作.本文首先给出两种类型转换的方式:隐式转换和显式转换,然后简单介绍一下C语言常用的类型转换方式,最后详细叙述C++中常用的三 ...
- 一文打尽端口复用 VS Haproxy端口复用
出品|MS08067实验室(www.ms08067.com) 本文作者:Spark(Ms08067内网安全小组成员) 1.概述 Haproxy是一个使用c语言开发的高性能负载均衡代理软件,提供tc ...
- SpringCloud-常用组件介绍
SpringCloud-常用组件介绍 分布式系统开发用于分布式环境(多个服务器不在同一个机房,同一个业务服务在多台服务器运行) Spring Cloud 是基于Springboot的分布式云服务架构, ...
- Prometheus—告警altermanger
Prometheus-告警altermanger 1.告警altermanger装配 2.告警Mysql 3.Prometheus针对nodes告警规则配置 相关内容原文地址链接: 51CTO:wfw ...
- java生成Https证书，及证书导入的步骤和过程
以下是相关的Tomcat,JDK和Windows环境: Tomcat版本:tomcat-7.0.55 JDK版本: jdk1.6.0 目录所在的位置: Serve的目录:D:\server\tomca ...