BFC(块级格式化上下文)

BFC(Block formatting context)

直译为"块级格式化上下文"。

元素的显示模式

我们前面讲过 元素的显示模式 display。

分为 块级元素 行内元素 行内块元素 ,其实,它还有很多其他显示模式。

那些元素会具有BFC的条件

不是所有的元素模式都能产生BFC,w3c 规范:

display 属性为 block, list-item, table 的元素,会产生BFC.

大家有么有发现这个三个都是用来布局最为合理的元素,因为他们就是用来可视化布局。

注意其他的,display属性,比如 line 等等,他们创建的是 IFC ,我们暂且不研究。

这个BFC 有着具体的布局特性:

有宽度和高度 , 有 外边距margin 有内边距padding 有边框 border。

什么情况下可以让元素产生BFC

以上盒子具有BFC条件了,就是说有资质了,但是怎样触发才会产生BFC,从而创造这个封闭的环境呢?

在好比,你光有资质还不行,你需要一定额外效果才能出发的武学潜力,要么你掉到悬崖下面,捡到了一本九阴真经,要么你学习葵花宝典,欲练此功必先....

同样,要给这些元素添加如下属性就可以触发BFC。

-float属性不为none

-position为absolute或fixed

-display为inline-block, table-cell, table-caption, flex, inline-flex

-overflow不为visible。

BFC元素所具有的特性

BFC布局规则特性:

1.在BFC中,盒子从顶端开始垂直地一个接一个地排列.

2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

3.在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘)。

  1. BFC的区域不会与浮动盒子产生交集,而是紧贴浮动边缘。
  2. 计算BFC的高度时,自然也会检测浮动或者定位的盒子高度

它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

BFC的主要用途

BFC能用来做什么?

(1) 清除元素内部浮动

只要把父元素设为BFC就可以清理子元素的浮动了,最常见的用法就是在父元素上设置overflow: hidden样式,对于IE6加上zoom:1就可以了。

主要用到

计算BFC的高度时,自然也会检测浮动或者定位的盒子高度。

(2) 解决外边距合并问题

外边距合并的问题。

主要用到

盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

属于同一个BFC的两个相邻盒子的margin会发生重叠,那么我们创建不属于同一个BFC,就不会发生margin重叠了。

(3) 制作右侧自适应的盒子问题

主要用到

普通流体元素BFC后,为了和浮动元素不产生任何交集,顺着浮动边缘形成自己的封闭上下文

BFC 总结

BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动,和外边距合并等等,因此,有了这个特性,我们布局的时候就不会出现意外情况了。

优雅降级和渐进增强

什么是渐进增强(progressive enhancement)、优雅降级(graceful degradation)呢?

渐进增强 progressive enhancement:

针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

类似 爬山,由低出往高处爬

优雅降级 graceful degradation:

一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

类似蹦极,由高处往低处下落

  区别:渐进增强是向上兼容,优雅降级是向下兼容。

个人建议: 现在互联网发展很快, 连微软公司都抛弃了ie浏览器,转而支持 edge这样的高版本浏览器,我们很多情况下没有必要再时刻想着低版本浏览器了,而是一开始就构建完整的效果,根据实际情况,修补低版本浏览器问题。

参考 前端pink老师课程

BFC与优雅降级 渐进增强——学习笔记的更多相关文章

  1. 优雅降级&渐进增强

    优雅降级(Graceful Degradation) 关注点:最新的浏览器上构建体验很好的WEB应用. 降级:旧版本浏览器提供差强人意的体验,不影响功能的使用. 渐进增强(Progressive En ...

  2. xml增强学习笔记

    2 Dom4j修改xml文档 2.1 写出内容到xml文档 XMLWriter writer = new XMLWriter(OutputStream, OutputForamt) wirter.wr ...

  3. HTML与CSS学习笔记(5)

    1.文字阴影?(针对文字) text-shadow: 例如 text-shadow: 10px 10px 10px blue;四个值分别是 x y blur color blur表示模糊值,越大越模糊 ...

  4. css优雅降级和渐进增强

    今天看前端公众号发布的文章,学到了几个新词 1.modernizr 2.@support 3.优雅降级 其中第三个“优雅降级”,如此文艺的名字居然还是第一次听到.度娘了一下,发现[优雅降级],[渐进增 ...

  5. 浏览器兼容CSS渐进增强 VS 优雅降级如何选择

    由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功能.二者的目的都是关注不同浏览器下的不同体验,但是它们侧重点不同,所以 ...

  6. 渐进增强与优雅降级 && css3中普通属性和前缀属性的书写顺序

     什么是渐进增强与优雅降级? 服务器和浏览器是不同的.当服务器有新版本时,开发人员直接使用新版本的服务器提供服务即可:但是浏览器端,不同的用户使用的浏览器版本不同,型号差异大,我们不可能让用户强制更新 ...

  7. 渐进增强 VS 优雅降级

    渐进增强(Progressive Enhancement):一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果.交互.追加功能达到更好的体验. 优雅降级(Gracefu ...

  8. 渐进增强(progressive enhancement)、优雅降级(graceful degradation)

    渐进增强 progressive enhancement: 针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果.交互等改进和追加功能达到更好的用户体验. 优雅降级 grace ...

  9. CSS——优雅降级和渐进增强

    什么是渐进增强(progressive enhancement).优雅降级(graceful degradation)呢? 渐进增强 progressive enhancement: 针对低版本浏览器 ...

随机推荐

  1. MySQL命令3

    连接 mysql -u username -p 查看进程 SHOW processlist

  2. libevent(一)定时器Demo

    开始研究libevent,使用的版本是2.0.22. 实现一个定时器:每2秒执行一次printf. #include <stdio.h> #include <stdlib.h> ...

  3. jacoco 生成单测覆盖率报告

    一.jacoco 简介 jacoco 是一个开源的覆盖率工具,它针对的开发语言是 java.其使用方法很灵活,可以嵌入到 ant.maven 中:可以作为 Eclipse 插件:可以作为 javaAg ...

  4. 【Hadoop离线基础总结】Hadoop High Availability\Hadoop基础环境增强

    目录 简单介绍 Hadoop HA 概述 集群搭建规划 集群搭建 第一步:停止服务 第二步:启动所有节点的ZooKeeper 第三步:更改配置文件 第四步:启动服务 简单介绍 Hadoop HA 概述 ...

  5. Mysql常用sql语句(16)- inner join 内连接

    测试必备的Mysql常用sql语句系列 https://www.cnblogs.com/poloyy/category/1683347.html 前言 利用条件表达式来消除交叉连接(cross joi ...

  6. 移动端网站开发要点-meta设置

    <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang="zh-cmn-Hans"&g ...

  7. 深度学习中的序列模型演变及学习笔记(含RNN/LSTM/GRU/Seq2Seq/Attention机制)

    [说在前面]本人博客新手一枚,象牙塔的老白,职业场的小白.以下内容仅为个人见解,欢迎批评指正,不喜勿喷![认真看图][认真看图] [补充说明]深度学习中的序列模型已经广泛应用于自然语言处理(例如机器翻 ...

  8. buuctf-pwn刷题-axb_2019_heap

    版权声明:本文为CSDN博主「L.o.W」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明. 原文链接:https://blog.csdn.net/weixin_441 ...

  9. mybatis中 #{} 和 ${}

    在mybatis中#{}表示一个占位符: 1.#将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号 2.#在很大程度上可以防止sql注入 3.例如#{id}:#{}中的id表示输入的参数名称 ...

  10. GraphQL-- 使用Apollo Server搭建Node服务端

    一.关于Apollo Server Apollo Server是一种使用JS创建GraphQL服务端的一个方案.它的兼容性比较好,可以很好地和GraphQL客户端进行兼容.同时它可以 独立作为服务端进 ...