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 这篇文章讲的很简单很实用
随机推荐
- babel : 无法加载文件 C:\Users\win\AppData\Roaming\npm\babel.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/ go.micros
babel报错:babel : 无法加载文件 C:\Users\win\AppData\Roaming\npm\babel.ps1,因为在此系统上禁止运行脚本.有关详细信息,请参阅 https:/ g ...
- 架构风格 vs. 架构模式 vs. 设计模式(译)
4.架构风格 vs. 架构模式 vs. 设计模式(译) - 简书 https://www.jianshu.com/p/d8dce27f279f
- @functools.lru_cache()
django.views.debug.get_default_exception_reporter_filter @functools.lru_cache()def get_default_excep ...
- var、let、const之间的区别
var声明变量可以重复声明,而let不可以重复声明var是不受限于块级的,而let是受限于块级var会与window相映射(会挂一个属性),而let不与window相映射var可以在声明的上面访问变量 ...
- Apache Hudi 0.7.0版本重磅发布
重点特性 1. Clustering 0.7.0版本中支持了对Hudi表数据进行Clustering(对数据按照数据特征进行聚簇,以便优化文件大小和数据布局),Clustering提供了更灵活地方式增 ...
- fedora 20安装vim Transaction check error
Transaction check error安装时 yum remove vim-minimal 再安装vim ok
- Java 复习整理day10
package com.it.demo01_quickstart; /* 案例: 讲解网络编程相关概念. 网络编程简介: 概述: 网络编程也叫: 套接字编程, Socket编程, 就是用来实现 网络互 ...
- Preliminaries for Benelux Algorithm Programming Contest 2019
A. Architecture 如果行最大值中的最大值和列最大值中的最大值不同的话,那么一定会产生矛盾,可以手模一个样例看看. 当满足行列最大值相同条件的时候,就可以判定了. 因为其余的地方一定可以构 ...
- Codeforces Global Round 9 C. Element Extermination
题目链接:https://codeforces.com/contest/1375/problem/C 题意 给出一个大小为 $n$ 的排列 $a$,如果 $a_i < a_{i+1}$,则可以选 ...
- codeforces #345 (Div. 1) D. Zip-line (线段树+最长上升子序列)
Vasya has decided to build a zip-line on trees of a nearby forest. He wants the line to be as long a ...