深入CSS （下） | 青训营笔记主要围绕盒模型中行级与块级这两种常见的布局结构展开，讲解其基本定义、各自特征、工作属性

讲师：赵文博

课程介绍

本节课主要围绕盒模型中行“行级”与“块级”这两种常见的布局结构展开，讲解其基本定义、各自特征、工作属性和排版规则，提供业内操作思路，帮助同学强化 CSS 实战技能。

课程重点

CSS 盒模型 - 行级
CSS 盒模型 - 块级

块级VS行级

display属性

inline-block 属性就是就字面意思，它本身就是一个行级的，就是也就说 inline-block 它可以和其他的一些 inline 的元素，比如一些文字或者一些图片去放在同一行里面，左右这样排放的，它是可以这是它作为 inline 的一个体现。后面的 block 怎么体现？就是说它作为一个整体，就 inline-block 作为一个整体，只能放在一行里边，就就是一个 inline-block ，它不能被拆散成多行。

把 inline-block 理解为一张图，它可以跟其它的文字放在一行，但没办法把一个图片去拆到 2两行去展示，这是inline-block 的一个特性，不会被拆成多行。

还有一个 display 属性叫none，在排版时就完全忽略，布局的时候就把它去掉就好了。

行级排版上下文

<div>
  This is a paragraph of text with long word Honorificabilitudinitatibus. Here is an image
  <img src="https://assets.codepen.io/59477/cat.png" alt="cat">
  And <em>Inline Block</em>
</div>

<style>
  div {
    width: 10em;
    //overflow-wrap: break-word;
    background: #411;
  }

  em {
    display: inline-block;
    width: 3em;
    background: #33c;
  }
</style>

DIV 其实就是创建了一个行级的一个排版上下文，在上面这个排版上下文里边，它会遵循文字从左到右去排放，然后一行显示不下的时候就换行

块级排版上下文

<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>

实际的块极和行极的区别，在常规流里边，一个盒子内，它子集的一个盒子就只能是那个都是块级或者都是行级，如果是块级的，那我们就从上到下去摆放就好了，如果都是行级的，那我们就从左到右这样一个方法表示

span 本身它是一个行级的一盒子，但是这里边又有文字又有块级的元素，所以就出现了一种状况，就是块级的这个 block 的这个盒子和行级的这个盒子同处于同一个父级里面。这个时候浏览器是怎么处理的？因为它不允许你一个副级里面既有块级的一个行级的，所以它会去创建两个匿名的块级盒子，把这个文字包起来。

Flex Box 是什么？

一种新的排班上下文
它可以控制子级盒子的:
- 摆放流向(上下左右)
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许拆行

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>
<style>
  .container {
    display: flex;
    border: 2px solid #966;
  }

  .a, .b, .c {
    text-align: center;
    padding: 1em;
  }

  .a {
    background: #fcc;
  }

  .b {
    background: #cfc;
  }

  .c {
    background: #ccf;
  }
</style>

Fiexibility

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

flex-grow

<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-shrink

<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: 400px;
  }

  .a {
    flex-shrink: 0;
  }
</style>

flex

Grid布局

display:grid

划分网格

grid line 网格线

通过这些线划分网格区

grid布局是 CSS 在布局这个方面最强大的一个武器，就是基本上所有的一些布局的方式其实都能够通过 grid 布局这种方式来实现的。

float 浮动

image 图片标签设置成 float：left 之后，你会发现像这个图片就会在这个容器的左边的这个位置， p 标签它的位置是不受影响的，它还是从这个 section 最开始的这个位置去绘制。那只不过 p 标签里边的这些文字它是会在排版的时候绕开这个图片的，所以就形成了一个图片环绕文字的这样的一个效果，这是 float 的一个特性。

绝对定位

由于 box 设置了 absolute，它要找到一个那个容器去进行定位，所以它会先去看一下 container 是不是它的 position,container 它没有设置 ratio ， absolute 不会相对它进行定位，然后再往上找container，再往上找可能就找到了 body 也没有，那怎么办？就在网上找到了 html，那么此时这个 box 是相对于html 去进行定位，所以它的 top 或者 left 就会让这个红色的这个 box 移动到整个页面，整个视口它的最左上角，所以它是相对于边缘进行一个定位。

position:fixed它相对于屏幕当前合适的这一块区域，它是固定的，它的一个用法就是滚动的时候你要永远固定到这个区域。

深入CSS （下） | 青训营笔记