【前端学习之HTML&CSS】-- CSS第六篇 – 视觉格式化模型之一 常规流

本文具体内容参考了B站渡一教育的课程，原课程链接如下：
渡一教育课程

前言

html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言，在学习过程中，我们首先从html出发，在html的学习过程中深入了解css，在步入学期末尾阶段再进行js的学习。

在CSS的学习过程中，最重要的内容，主要包含属性值的计算过程、层叠继承、盒模型以及视觉格式化模型，学习完这一节之后，静态网页的基本操作，我们就都掌握了。

一、 概念补充

• 盒模型；规定单个盒子的规则；
• 视觉格式化模型：页面中的多个盒子排列规则/布局规则；

• 排列方式：视觉格式化模型，大体上将页面中盒子的排列分为三种方式，
  1、常规流 2、浮动 3、定位

二、 常规流布局

1. 适用性

常规流、文档流、普通文档流、常规文档流：所有元素，默认情况下，都属于常规流布局

2. 总体规则

• 块盒独占一行、行盒水平依次排列
  

• 包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域；
  
  绝大部分情况下：盒子的包含块，为其父元素的内容盒。
  以下图为例，子元素的包含块即其排列的区域是父元素的内容盒，当父元素内容盒移动时，子元素的区域就会跟着移动（嵌套）；

3. 具体规则

1* 块盒总宽度：

• 每个块盒的总宽度（margin + border + padding + content），必须刚好等于包含块的宽度；

    .parent{
        background-color: lightblue;
        width: 300px;
        height: 200px;
        border: 2px solid;
        padding: 30px;
        margin-left: 50px;
    }
    .child{
        border: 2px solid;
        /* width: 100px; */
        height: 100px;
        background-color: red;
    }

• 父元素的内容盒/宽度width = 300、子元素的总宽度 = border + margin + content + padding = 300；
  可见下图，300 = 296.005 + 1.997*2；
  

• 子元素width宽度的默认值：auto，将剩余空间吸收掉 = 300 - 2*2
  （设置了border，由于padding和margin的默认值为0。则元素的conntent自动吸收掉剩下的宽度）；

• margin的默认值：0，但也可以取值为auto，但是由于宽度width（内容盒）的吸收能力更强，二者都是auto时，只有width可以吸收全部；

• 当border、padding、content/width都吸收完后，剩余空间被margin-right吸收:
  

• margin-left、margin-right：都是auto — 剩余空间均分，居中:
  
  常规流中的块盒在包含块居中：width设定，margin-left、right设为auto

• 不定宽width，此时margin可以为负数，width增加即可，只要保证总宽度相等，width会把剩余空间吸收:
  

2* 垂直方向auto：

• height：auto，表示适应内容的高度；
• margin：auto，表示0；

3* 百分比取值：

• padding、宽、margin可以取值为百分比；
  以上所有百分比相对于包含块的宽度，即父元素的内容盒/width、height；
  【所有的百分比都是相对宽度，即使是margin-top也是相对于宽度】

• 高度的百分比：

  1 包含块的高度取决于子元素的高度, 此时设置百分比无效；
  例如，父元素的高度没有设置，子元素高度设置百分比，
  
  2 包含块的高度不取决于子元素高度，此时子元素高度相对于父元素高度；
  

4* 上下外边距合并：

• 两个常规流块盒，上下外边距相邻，会进行合并【即使是父子元素，也会合并】
  如下图，两个盒子margin都是50px，但是上下外边距合并成了一个50px:

(如果margin不同，取最大值)

• 解决方法：添加一个间隔，如border，就不会合并//将margin改为padding，就不会合并:
  

三、常规流练习

1. 注意事项

• 先书写一部分HTML，然后写CSS，不要完全分离，否则一直看不到样式可能会导致错误；

2. 具体流程（个人特色）

这里给出一个简单的设计稿作为参考进行设计：

具体写法流程及代码见博主的另一篇博客 视觉格式化模型–常规流练习

总结

本篇博客主要对视觉格式化模型中的常规流进行了讲解，毫无疑问，在CSS的学习中，近几篇博客是最为重要也最有难度的课程，我们需要在大量的练习中深刻体会常规流的知识，希望大家都能够掌握内容，之后的内容敬请期待。