盒子模型是什么

浏览器引擎在渲染时，根据一个CSS设计布局规则将HTML元素表示为一个个的矩形盒子，而这套规则就是盒子模型。

• 盒子模型组成：

  • content：盒子内容，即实际内容。显示文本或图像等信息的区域
  • padding：内边距。清除内容周围的边距，内边距是透明的，取值不能为负，会受盒子的background属性影响
  • border：边框。围绕元素内容的内边距的一条或多条线，由粗细、样式和颜色三部分组成
  • margin：外边距。在元素外创建额外的空白，空白通常不能放其它元素的区域

• 盒子模型分类：

  • 标准盒子模型
  • 怪异盒子模型

  默认情况下，盒子模型为 标准盒子模型

• 盒子种类切换方法： CSS 中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度

语法：

box-sizing: content-box|border-box|inherit:

• content-box：默认值，标准盒子模型，元素的width/height不包含 padding和border；
• border-box：怪异盒子模型，元素的width/height包含 padding和border
• inhert：指定 box-sizing 属性的值从父元素继承

标准盒子模型

标准盒子模型，是浏览器默认的盒子模型

盒子宽高计算：

• 盒子总宽度 = width + padding + border + margin
• 盒子总高度 = height + padding + border + margin

demo

怪异盒子模型

盒子宽高计算：

• 盒子总宽度 = width + margin
• 盒子总高度 = height + margin

那就是说，width/height包含了padding和border值

demo

CSS 盒子模型 - 菜鸟教程