LittleKnife's JavaScript

CSS布局模型

CSS布局模型建立在盒模型的基础上，对于元素布局规则的本质的抽象。不同于CSS布局样式和布局模板，这两个概念描述的是外在的展示形式，而CSS布局模型表示的是布局规则的本质。

布局模型的种类

  1. 流动模型（Flow）
  2. 浮动模型（Float）
  3. 层模型（Layer）
  4. 弹性模型（flexible Box）
  5. 网格模型（grid）

查阅了很多总结布局模型的文章，都只包含前面三个，我感觉flex布局和grid布局应该也是布局模型中的一种，所以这里也总结了进去。（有可能不正确）

流动模型

网页默认的布局模型，没有特殊设置的情况下，网页元素按照流动模型的规则对其中的元素布局。

流动模型的规则

  1. 对于块级元素，自上而下垂直排列，每个块级元素独占一行，默认情况下宽度是100%
  2. 对于行内元素，从左到右水平排列，宽度全靠内容撑开

浮动模型

浮动模型需要设置float属性开启，浮动模型的出现是为了解决原始的流动模型无法使块级元素并排显示的缺陷。

浮动模型的规则

  1. 包裹性：使用float的元素会自动变成一个块级行内元素（inline-block）。一个块级元素在没有设置width的前提下，默认是占满整行，一旦设置了float，那么它的的width就会尽可能的小，由内部内容决定宽度。
  2. 破坏性：高度塌陷
  3. 不完全脱离文档流：当元素设置了浮动之后，其他盒子布局的时候会忽视它，但是盒子内的文本会为浮动元素空出位置。经典的文字环绕图片就是这样实现的。

层模型

层模型就像PhotoShop中的图层一样，每个图层能精确定位操作，整个页面由多个图层组合而成。层模型在html中的应用就是使用position属性来定位元素

层模型的规则

  1. position:absolute —— 绝对定位
  2. position:relative —— 相对定位
  3. position:fixed —— 固定定位
  4. position:sticky —— 粘性定位

弹性模型

弹性模型是一种一维的布局模型，它给flexbox的子元素之间提供了强大的空间分布和对齐能力。通常使用display:flex来设置弹性模型。

弹性模型特点

  1. 主轴和交叉轴
  2. 主轴对齐和交叉轴对齐
  3. 主轴多余空间分配

网格模型

网格模型是一种二维的布局模型，可以同时在主轴和交叉轴上对元素进行布局。通常是使用display:grid来设置网格模型。

网格模型的规则

网格模型和弹性模型相比就是弹性模型只能沿主轴来对其中的子元素进行布局，而网格模型可以同时沿主轴和交叉轴来对其中的子元素布局。