CSS BFC in depth

BFC (Block Formatting Context)

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

clearfix & clear float

  1. clear: both;

  2. 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的更多相关文章

  1. CSS Modules in depth

    CSS Modules in depth https://github.com/css-modules/css-modules https://webpack.js.org/loaders/css-l ...

  2. 深入理解css BFC 模型

    如果要深入理解css布局的各种原理,要在重构页面做得心应手的话,那么你就必须先理解这玩意 "BFC" , BlockFormatting Context(块级格式化上下文): 这里 ...

  3. CSS BFC(Block Formatting Context)

    BFC是 W3C CSS 2.1 规范中的一个概念Block Formatting Context的缩写即格式化上下文,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.简单讲,它是提 ...

  4. CSS BFC学习笔记

    BFC,全称是Block Formatting Context,块级格式化上下文. 详细是什么,能够理解为页面元素的一种特性.触发了BFC的元素往往会产生一些对刚開始学习的人而言意想不到的效果. 触发 ...

  5. <HTML/CSS>BFC原理剖析

    本文讲了BFC的概念是什么: BFC的约束规则:咋样才能触发生成新的BFC:BFC在布局中的应用:防止margin重叠(塌陷,以最大的为准): 清除内部浮动:自适应两(多)栏布局. 1. BFC是什么 ...

  6. CSS—BFC原理解析与应用

    我们在很多地方都见过BFC这个词,或许能够知道大概意思,但是有时候它的具体原理以及作用会记得很模糊,下面就对BFC这个概念深入学习下. 块级格式化上下文(Block Formatting Contex ...

  7. CSS BFC（格式化上下文）深入理解

    什么是BFC 在解释BFC之前,先说一下文档流.我们常说的文档流其实分为定位流.浮动流和普通流三种.而普通流其实就是指BFC中的FC.FC是formatting context的首字母缩写,直译过来是 ...

  8. CSS——BFC

    http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 元素若不是bfc,那么内部浮动元素的高度不参与计算 元素若不是bf ...

  9. css BFC布局及用处

    http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 这篇文章讲的很简单很实用

随机推荐

  1. Page not found (404) 不被Django的exception中间件捕捉 中间件

    Using the URLconf defined in config.urls, Django tried these URL patterns, in this order:

  2. Linux命令——netcat

    简介 netcat的简写是nc,被设计为一个简单.可靠的网络工具,主要作用如下: 1 实现任意TCP/UDP端口的侦听,nc可以作为server以TCP或UDP方式侦听指定端口 2 端口的扫描,nc可 ...

  3. 理解和运用 ClassLoader 该篇文章就够了

    定义 根据<深入理解Java虚拟机>提到"通过一个类的全限定名(packageName.ClassName)来获取描述此类的二进制字节(class文件字节)这个动作的代码模块就叫 ...

  4. Language Guide (proto3) | proto3 语言指南（十三）JSON映射

    JSON Mapping - JSON映射 Proto3支持JSON中的规范编码,使得在系统之间共享数据更加容易.下表按类型对编码进行了描述. 如果JSON编码的数据中缺少一个值或者它的值为null, ...

  5. 四：SpringBoot-定时任务和异步任务的使用方式

    SpringBoot-定时任务和异步任务的使用方式 1.定时任务 2.同步和异步 3.定时器的使用 3.1 定时器执行规则注解 3.2 定义时间打印定时器 3.3 启动类开启定时器注解 4.异步任务 ...

  6. Linux踩坑填坑记录

    Linux踩坑填坑记录 yum安装失败[Errno 14] PYCURL ERROR 6 - "Couldn't resolve host 'mirrors.aliyun.com'" ...

  7. linux shell判断文件,目录是否存在或者具有权限

    在linux中判断文件,目录是否存在或则具有的权限,根据最近的学习以及网上的资料,进行了以下的总结: #!/bin/sh myPath="/var/log/httpd/" myFi ...

  8. linux上 用户间发送消息 通信

    联想:scp命令 1.使用write命令,向指定用户发送信息:           用户可以使用write命令给其他在线用户发送消息.格式: $ write zhangsan hello   worl ...

  9. 一块网卡配2IP地址

    我们知道在Linux下网卡被称为eth0,eth1,eth2.....,所有网卡的配置文件都存储在 /etc/sysconfig/network-script/下,文件名是以ifcfg-eth0,if ...

  10. Kubernetes --（k8s） service

    service Kubernete Service 是一个定义了一组Pod的策略的抽象,我们也有时候叫做宏观服务.这些被服务标记的Pod都是(一般)通过label Selector决定的 对于Kube ...