CSS 盒模型

CSS盒模型（Box Model）是网页布局的核心概念，它将每个HTML元素视为一个矩形盒子，由内容、内边距、边框和外边距四部分组成。

组成部分：

1. ​ 内容区（Content）​ ：存放文本、图片等元素的实际内容，由 width/height 控制大小
2. ​ 内边距（Padding）​ ：内容与边框的间距，通过 padding 调整，支持分方向设置
3. ​ 边框（Border）​ ：包裹内容与内边距的可见线条，可定义样式、颜色及宽度
4. ​ 外边距（Margin）​ ：与其他元素的透明间距，通过 margin 控制，垂直方向可能合并（取较大值）

两种盒模型

CSS3中的盒模型有以下两种：标准盒子模型、IE盒子模型（也叫怪异盒模型）

盒模型都是由四个部分组成的，分别是margin、border、padding和content。

标准盒模型和IE盒模型的区别在于设置 width 和 height 时，所 对应的范围不同 ：

• 标准盒模型的width和height属性的范围只包含了content
• IE盒模型的width和height属性的范围包含了border、padding和content

可以通过修改元素的box-sizing属性来改变元素的盒模型：

• box-sizing: content-box 表示标准盒模型（默认值）
• box-sizing: border-box 表示IE盒模型（怪异盒模型）