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

前言

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

---

一、盒子

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

1. 内容盒（content-box）width/height设置了内容盒的宽高，上图宽高都 是100 ;
2. 填充盒（padding-box）盒子边框内的内容是填充盒的宽高，上图宽高都是110；
3. 边框盒（border-box）盒子外边距内的内容是边框