前端面试高频 | CSS盒子模型

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天，点击查看活动详情

一、盒模型的概念和分类

所有的HTML元素都可以看作是一个盒子，盒子模型分为两种：

1. 标准盒子模型（W3C标准）

2. 怪异盒子模型（IE） （常用）

它们的区别是内容计算方式的不同，其中每一个盒子都包括四个部分：

• Margin(外边距)  
• Padding(内边距)  
• Border(边框)  - 在内边距和内容外的边框（黄色区域）
• Content(内容)  - 需要真正展示的文本等内容（蓝色区域）

二、内容计算

1. 标准盒子：

   width = 内容

   盒子的总宽度 = width + padding（左右）+ margin（左右）+ border（左右）

2. 怪异盒子：

   width = 内容 + padding + border

   盒子的总宽度=width+margin（左右），因为宽度已经包含了padding和border

   PS：
      如果html页面顶部声明了<!DOCTYPE>，默认会使用标准盒子模型，也就是W3C标准。
   
      IE6及以上的版本，以及其它标准的浏览器都是`W3C盒模型`
      IE6以下版本的浏览器是IE盒模型
   

三、定义盒模型属性

box-sizing：

• content-box：默认取值，标准盒模型，border和padding不算到width范围内
• border-box：IE的怪异盒模型，border和padding算⼊width的范围
• inherit：从父元素继承

从下面的例子中的运行结果可以看出，两种不同模型的实现效果有很明显的差别：

1. box-sizing: content-box (默认)

实际div的尺寸会增加，向外扩大

div {
  box-sizing: content-box;  
  width: 400px;
  height: 100px;
  padding: 30px;  
  border: 10px solid orange;
}

2. box-sizing: border-box

宽度不进行扩大，设置 border、padding 不会影响元素的 width 与 height

 div {
  box-sizing: border-box;
  width: 400px;
  height: 100px;
  padding: 30px;  
  border: 10px solid blue;
}

效果如下：

3. 配置全局的盒模型

我们经常会在公共css文件中看到如下代码段，用来设置全局的盒模型：

html {
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}

四、总结

1. 两种模式内容计算方式的不同

2. 在css中设置box-sizing属性的值，即可对两种盒子模型进行转换

• 盒模型设置为w3c标准盒子模型，总宽度会扩大

  box-sizing: content-box;

• 盒模型设置为怪异（IE）盒子模型，总宽度不变

  box-sizing:border-box;