标准盒模型和怪异盒模型

一丶两种盒子模型

1 标准盒模型：

• 标准盒模型是CSS中默认的盒模型。

• 标准盒模型的宽度（width）和高度（height）属性仅包括内容区域（content area）的尺寸。

• 内容区域的尺寸不包括内边距（padding）、边框（border）和外边距（margin）。

• 公式：在标准盒模型中，元素的宽度（width）指的是元素内容区域的宽度，不包括边框（border）、填充（padding）和外边距（margin）。换句话说，元素的宽度只包括纯粹的内容宽度。即：
  $$盒子的宽度=width(content)+padding+border$$

1.1 标准盒模型示意图

2 怪异盒模型：

• 怪异盒模型是某些浏览器的非标准盒模型。
• 怪异盒模型的宽度（width）和高度（height）属性包括内容区域（content area）、内边距（padding）和边框（border）的尺寸。
• 公式：在怪异盒模型中，元素的宽度（width）包括内容区域的宽度、填充（padding）和边框（border），但不包括外边距（margin）。换句话说，元素的宽度包括内容宽度、填充和边框的总和。即：
  $$盒子的宽度=width(content+padding+border)$$

2.1怪异盒模型示意图

3 区分标准盒模型和怪异盒模型：

• 在CSS中，通过设置box-sizing属性来控制盒模型的类型。
• 对于标准盒模型，box-sizing的值为content-box（默认值）。盒子的宽度为内容的宽度。
• 对于怪异盒模型，box-sizing的值为border-box。将盒子转为怪异盒模型的计算方式，不会出现因为最初设置好的宽高被内边距撑大的情况。

4 总结

在不设置box-sizing:border-box的情况下，自己定义的width相当于只定义了content的宽高；但是如果设置了box-sizing:border-box，自己定义的宽高就相当于定义了padding+border+content的总宽度，此时不管你是否添加内边距和边框，都不会影响盒子的大小，会自动裁剪掉content的相应区域