面试官：说说你对 CSS 盒模型的理解

我们先看个例子：下面的 两个 div 元素的红色区域是多少呢？

 .box {
            width: 200px;
            height: 200px;
            padding: 20px;
            margin: 20px;
            background: red;
            border: 20px solid black;
            box-sizing: border-box;
        }

   .box {
            width: 200px;
            height: 200px;
            padding: 20px;
            margin: 20px;
            background: red;
            border: 20px solid black;
        }

Css盒模型介绍：

每个HTML元素都由一个矩形框（盒子）组成，称为盒模型。CSS 盒模型定义了一个 HTML 元素的尺寸和边距。

盒模型的组成部分：

• Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height。
• Padding box: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置。
• Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
• Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

标准盒模型和IE盒模型介绍： 

• 标准盒模型：元素的宽度和高度只包括内容（content），不包括内边距（padding）、边框（border）和外边距（margin）。
• IE盒模型：元素的宽度和高度包括内容（content）、内边距（padding）和边框（border），但不包括外边距（margin）。

盒模型之间的转换：

 可以通过设置 CSS 的 box-sizing 属性来指定使用哪种盒模型。默认情况下，box-sizing 属性的值为 content-box，即使用标准盒模型。可以将其设置为 border-box，即使用IE盒模型。

最后答案

第一个在标准盒模型下区域为：200+20*2=240。

第二个在ie盒模型下区域为 200-20*2=160