CSS面试题之盒子模型

是什么

• 盒子模型组成有 4 部分,分别为:内容 内边距 外边距(一般不计入盒子实际宽度) 边框
• 盒子模型有 2 种:标准盒子模型与怪异盒子模型
• 标准盒子模型=content(内容)+border(边框)+padding(内边距)
• 怪异盒子模型=content(内容)(已经包含了 padding 和 border)
• css3 种可以通过设置 box-sizing 属性来完成标准或许怪异盒子模型之间的切换,怪异盒子模型:box-sizing: border-box;标准盒子模型:box-sizing:content-box

在CSS中，盒子模型 可以分成：

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

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

标准盒子模型和怪异盒子模型的区别之处

1. 标准盒子模型的width指的是内容区域:

    标准盒子模型下盒子的大小 = content + border + padding + margin
   

2. 怪异盒子模型中的宽度指的是内容、边框、内边距总的宽度(content+border+margin)

    怪异盒子模型下盒子的大小 = width(content + border + padding) + margin
   

Box-sizing

CSS 中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度

语法：

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

• content-box 默认值，元素的 width/height 不包含 padding，border，与标准盒子模型表现一致
• border-box 元素的 width/height 包含 padding，border，与怪异盒子模型表现一致
• inherit 指定 box-sizing 属性的值，应该从父元素继承

设置盒子为 border-box 模型

<style>
  .box {
    width: 200px;
    height: 100px;
    padding: 20px;
    box-sizing: border-box;
  }
</style>
<div class="box">盒子模型</div>

这时候，就可以发现盒子的所占据的宽度为 200px