CSS基础-浅浅的了解盒子和视觉格式化模型后的4800字知识点

前言

这篇文档主要是盒子和视觉格式化模型也就是多个盒子的排列规则的知识点。大体上多个盒子排列规则分为三种方式：常规流、浮动、定位。

---

一、盒子

了解视觉格式化模型前先来了解一下盒子，多个盒子时也就需要各种布局了，而盒子有以下部分组成：

1. 内容盒（content-box）width/height设置了内容盒的宽高，上图宽高都 是100 ;
2. 填充盒（padding-box）盒子边框内的内容是填充盒的宽高，上图宽高都是110；
3. 边框盒（border-box）盒子外边距内的内容是边框盒的宽高，上图宽高都是112；
4. 外边距（margin）边框与其他盒子之间的距离。

二、常规流布局

1. 规则

1. 常规流、文档流、普通文档流、常规文档流
2. 页面中所有的元素，默认都为常规流布局；
3. 其中块盒独占一行（display:block）/行盒不换行，水平依次排序（display:inline）；
4. 每个盒子都有自己的包含块，包含块决定了盒子的排列区域。大部分情况下盒子的包含块是它父元素的内容盒；

2.常规流中的块盒和行盒

1. 块盒

1. 块盒，display等于block的元素；
2. 浏览器默认样式表设置的块盒：容器元素（div/header等）、h1~h6、p；
3. width和heigth属性可以发挥作用；
4. 块盒的宽度默认为auto，将父级元素内容空间吸收掉，撑满父级元素的内容宽度；
5. height默认值为auto，高度随着内容增大或减小；
6. 若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被margin-right全部吸收；
   
7. width吸收能力强于margin。margin-left和margin-right的吸收能力是一样；
8. 在常规流中，块盒要在其包含快（父级元素）中居中，可以定宽、然后左右margin设置为auto。
   .

2.行盒

1. 行盒，display等于inline的元素；
2. 常见的行盒：span、a、img、video、audio；
3. 行盒不会产生换行，height和widht将不起作用；
4. 需要调整行盒的宽高，可以使用字体大小和行