这是我参与「第五届青训营」伴学笔记创作活动的第 4 天

一、本堂课重点内容：

CSS行级块级布局
Flex排版上下文
Grid排版上下文
浮动

二、详细知识点介绍：

行级与块级

行级盒子与块级盒子，属于CSS概念

块级盒子	行级盒子
不和其他盒子并列排放	和其它行级盒子一起放在一行或拆开成多行
适用于所有盒模型属性	盒模型中的width、height不适用

行级元素和块级元素，属于HTML概念

块级元素	行级盒子
生成块级盒子	生成行级盒子内容分散在多个行盒(line box)中
body、article、div、main、section、h1-6、p、ul、li等	span、em、strong、cite、code 等
display:block	display:inline

display属性

block：块级盒子

inline：行级盒子行级盒子行级盒子

inline-block：本身是行级，可以放在行盒中;可以设置宽高;作为一个整体不会被拆散成多行。把inlineblock理解成一张图片，图片不能被分成两行，但是可以混排

none：排版时完全被忽略

常规流

根元素、浮动和绝对定位的元素会脱离常规流
其它元素都在常规流之内 (in-flow)
常规流中的盒子，在某种排版上下文中参与布局

行级排版上下文

line Formatting Context (IFC)，只包含行级盒子的容器会创建一个IFC

IFC内的排版规则

盒子在一行内水平摆
放一行放不下时，换行显示
text-align 决定一行内盒子的水平对齐
vertical-align 决定一个盒子在行内的垂直对齐
避开浮动(float)元素

块级排版上下文

Block Formatting Context (BFC)

某些容器会创建一个BFC

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

BFC内的排版规则

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

Flex排版上下文

一种新的排版上下文，它可以控制子级盒子的，使用就是display: flex:

摆放的流向(← → ↑ ↓ )
摆放顺序
盒子宽度和高度
水平和垂直方向的对齐
是否允许折行

父容器的属性

flex-direction

决定着主轴的方向

flex-direction: row | row-reverse | column | column-reverse

justify-content

设置子元素在主轴方向上的对齐方式

align-items

子容器的属性

align-self

属性值和align-items一样，但是是控制单个元素的

Flexibility

可以设置子项的弹性: 当容器有剩余空间时，会伸展;容器空间不够时，会收缩。

flex-grow 有剩余空间时的伸展能力
flex-shrink 容器空间不足时收缩的能力
flex-basis 没有伸展或收缩时的基础长度

分配的是除去固有宽度之后的剩余空间。比如说现在ABC三个固有宽度都是100，现在显示器宽度是500，那么flex-grow为2或者1代表A分走了500-300=200里面的2/3

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

<style>
  .container {
    display: flex;
  }

  .a, .b, .c {
    width: 100px;
  }

  .a {
    flex-grow: 2;
  }

  .b {
    flex-grow: 1;
  }
</style>

可以缩写成一个属性flex

Grid排版上下文

Grid可以突破流式布局，可以使用display:grid使元素生成一个块级的Grid容器

然后就是划分网格，fr表示”份“，也就是除去有明确数值的元素之后划分的比例

网格线

网格区域

浮动

最初设计出来就是实现文字环绕，以前用浮动还会实现很多别的功能，现在随着flex和grid强大起来，浮动主要回归本质工作，即图文混排文字环绕。

定位

可以给元素加上position属性来实现定位

static	默认值，非定位元素
relative	相对自身原本位置偏移，不脱离文档流
absolute	绝对定位，相对非static祖先元素定位
fixed	相对于视口绝对定位

relative

在常规流里面布局
相对于自己本应该在的位置进行偏移
使用 top、left、bottom、right 设置偏移长度
流内其它元素当它没有偏移一样布局

absolute

脱离常规流
相对于最近的非 static 祖先定位
不会对流内元素布局造成影响

三、实践练习例子：

<span>
  This is a text and
  <div>block</div>
  and other text.
</span>

<style>
  span {
    line-height: 3;
    border: 2px solid red;
    background: coral;
  }

  div {
    line-height: 1.5;
    background: lime;
  }
</style>

四、课后个人总结：

之前不太了解Flex布局，所以不管啥都是用浮动，现在要多用用Flex和Grid

五、引用参考：

juejin.cn/post/686691…

深入CSS (下) ｜ 青训营笔记