CSS中IFC、BFC、Flex Box和Grid布局 | 青训营笔记

小研睡不醒
52 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第1天

一，行级排版上下文（IFC）

  • Inline Formatting Context（IFC）
  • 只包括行级盒子的容器会创建一个IFC
  • IFC内的排版规则
    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align 决定一行内盒子的水平对齐
    • vertical-align 决定一个盒子在行内的垂直对齐
    • 避开浮动（float）元素*

我的理解：行级排版相对于其他来说时比较简单的排版，就相当于简单div包裹了行内标签，可以实现水平，垂直对齐。

二，块级排版上下文（BFC）

  • Block Formatting Context（BFC）

  • 某些容器会创建一个BFC

    • 根元素
    • 浮动，绝对定位，inline-block
    • Flex子项和Grid子项
    • overflow值不是visible的块盒
    • display：flow-root

  • BFC内的排版规则

    • 盒子从上到下摆放
    • 垂直margin合并
    • BFC内盒子的margin不会与外面的合并
    • BFC不会和浮动元素重叠

我的理解：简单来说，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。这个可以解决高度塌陷，以及margin边距重叠问题

三，Flex Box

  • 一种新的排版方式
  • 它可以控制子级盒子的：
    • 摆放的流向
    • 摆放的顺序
    • 盒子宽高
    • 水平和垂直方向的对齐
    • 是允许折行

image.png

image.png

image.png

Flexibility

  • 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
  • flex-grow 有剩余空间时的伸展能力
  • flex-shrink 容器空间不足时收缩的能力
  • flex-basis 没有伸展或收缩时的基础长度

我的理解：我在项目中使用最多的就时flex布局，因为他简单，不用写太多多余的代码，而且满足了一些自适应的要求，方便我们去布局。

四，Grid布局

image.png

划分网格

image.png

规定一个div占那几块

image.png

我的理解：grid布局分场景使用，比如展示照片墙，可以使用grid布局，可以规定，每个盒子占多少分，这样使用grid网格布局就比较好一些。

avatar
文章
阅读
粉丝