1、介绍
CSS盒模型是网页设计中用于布局和样式设计的重要概念，它将HTML元素视为矩形盒子，并通过设置内容（content）、内边距（padding）、边框（border）和外边距（margin）等属性来控制元素的布局和外观。
2、基本概念
内容（content）
这是盒模型的中心，包含元素的实际内容，如文本或图像。内容的尺寸可以通过width和height属性来设置。
内边距（padding）
位于内容周围，是内容与边框之间的空间。可以通过padding属性来设置。
边框（border）
环绕在内边距外侧，用于分隔元素与其他元素的线条。边框的样式、宽度和颜色可以通过border属性来设置。
外边距（margin）
位于边框外侧，代表元素与其他元素之间的空间。可以通过margin属性来设置。
3、类型
标准盒模型
在标准盒模型中，为盒子设置的width、height属性为content内容的宽度和高度
box-sizing: content-box;
怪异盒模型
在怪异盒模型中，盒子的width、height属性为content内容+padding内边距+border边框的宽度和高度
box-sizing: border-box;
4、块级盒子和内联盒子
块级盒子（block）
- 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
- 每个盒子都会换行
width和height属性可以发挥作用- 内边距（
padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开” - 除非特殊指定，诸如标题(
<h1>等)和段落(<p>)默认情况下都是块级的盒子。
内联盒子（inline）
- 盒子不会产生换行。
width和height属性将不起作用。- 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于inline状态的盒子推开。
- 水平方向的内边距、外边距以及边框会被应用且会把其他处于inline状态的盒子推开。
- 用做链接的
<a>元素、<span>以及<strong>都是默认处于inline状态的。
