前言

在学习的路上，我们的必经之路就是css的盒模型，那么它又是什么呢，让我们来粗略认识一下什么是盒模型？？

什么是盒模型

• 盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系

• 盒模型由内容区content， 内边距padding， 边框border，外边距margin四部分组成

  • 内容区content：包含html元素的实际内容，包括文本、图像等。
  • 内边距区:padding：元素内容区周围的空白区域，用于控制元素内容与元素边框之间的距离。
  • 边框区border：位于内边距区外面，用于装饰元素并将其与其他元素区分开。
  • 外边距区margin：位于边框区外部的空白区域，用于控制当前元素与其它元素之间的距离。

类型

盒模型有2种类型： 标准盒模型与怪异盒模型

• 两者的区别在于设置width和height时，所对应的范围不一样
• 标准盒模型= content
• 怪异盒模型= border+padding+content

盒模型的转换 可以通过box-sizing来设置

• box-sizing: content-box (标准盒模型)
• box-sizing: border-box (怪异盒模型)

总结

在日常页面布局中，我们可以灵活通过CSS3的属性来进行转换来选择标准盒模型或者是怪异盒模型，以上就是全部内容！