css-盒模型

一、概念

        盒模型是css一个重要的概念。在html中每个html元素都被设为一个矩形的盒子，这个盒子由内容+内边距+边框+外边距构成。

二、类型

1、标准盒模型

默认情况下是标准盒模型。我们所设置的宽高是内容区的宽高。盒子的总高度 = 内容区 + 内边距 + 边框 + 外边距

内容区高度 = 设置的高度

2、怪异盒模型

使用box-sizing: border-box开启怪异盒模型。设置的宽高是盒子的整个高度。盒子的总高度 = 设置的高度 + 外边距。

内容区高度 + 边框 + 内边距 = 设置的高度