盒模型 (学者说）

盒模型

• 什么是盒模型？

盒子模型 是css中一个重要的概念，理解了盒子模型才能更好的排版。盒子模型有两种，分别是ie盒子模型(怪异盒模型)和标准 w3c 盒子模（标准盒模型）型。常说的盒模型呢，其实就是元素也就是标签，所有的标签都是盒模型

• 如何计算盒模型的宽度？

  • 标准盒模型

  左右外边距（margin）+ 左右边框（border) + 左右内边距（padding) + 宽度（width)

  box-sizing:border-box; 注：标准盒模型转变为怪异盒模型

  • 怪异盒模型

  左右外边距（margin) + 宽度（width) (”width"已经包含了padding和border的值）

  box-sizing:content-box; 注：怪异盒模型转变为标准盒模型