前端面试题合集 CSS篇---盒模型超详细版！！！前端面试题合集 CSS篇---盒模型超详细版！！！什么是盒模型~ 盒

前端面试题合集 CSS篇---盒模型超详细版！！！

一、什么是盒模型？

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）（通俗来说就是在标准流布局下，页面是由一个个盒子自上而下排列的（对于块级元素而言））
一个盒子由四部分组成： content 、 padding 、 border 、 margin （如下图所示：蓝色区域是内容）

内容（content） ：元素的宽度和高度，即width和height属性所指定的值。
内边距（padding） ：元素内容和边框之间的空间。
边框（border） ：围绕元素内容和内边距的边框。
外边距（margin） ：元素与其他元素之间的外部空间。

二、盒模型分类（W3C 标准盒子模型、IE 怪异盒子模型）

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

在标准盒子模型中，一个元素的总宽度和总高度由内容（content）宽高、内边距（padding）、边框（border）和外边距（margin）共同决定。

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

速记：标准盒模型 width/height只是内容区域，不包含padding和border的值！！！

2. 怪异盒模型（IE盒模型）

怪异模式是IE浏览器特有的盒子模型。在怪异盒子模型中，元素宽度和高度属性（width/height）包含了内容（content）、内边距（padding）和边框（border）。即，一个盒的总宽高 = 元素的width + margin

盒子总宽度 = width（因为width中包含了padding+border） + margin
盒子总高度 = height（因为height中包含了padding+border） + margin

速记：怪异盒模型 width/height包含padding和border的值！！！

三、Box-sizing属性

1. 作用：指定元素的盒模型计算方式，从而改变元素的总尺寸计算方式。它允许开发者选择使用标准盒模型还是怪异盒模型。

2. 取值 `box-sizing: content-box|border-box|inherit:`

content-box 默认值，元素的 width/height 不包含padding，border。相当于设置的宽高只是内容的宽高，与标准盒子模型表现一致
border-box 元素的 width/height 包含 padding，border。相当于设置的宽高已经包含了padding和border，与怪异盒子模型表现一致
inherit 指定 box-sizing 属性的值，从父元素继承

四、代码演示

1. 设置为怪异盒模型 box-sizing: border-box; 盒子总宽度为200px

<style>
  .box {
      width: 200px;
      height: 100px;
      padding: 20px;
      border: 2px solid red;
      background-color: rgb(114, 177, 240);
       /* 怪异盒模型 */
      box-sizing: border-box;
    }
</style>

<div class="box">
盒子模型
</div>

2. 设置为标准盒模型 box-sizing: content-box; 盒子总宽度为244px

<style>
  .box {
      width: 200px;
      height: 100px;
      padding: 20px;
      border: 2px solid red;
      background-color: rgb(114, 177, 240);
       /* 怪异盒模型 */
      box-sizing: border-box;
    }
</style>

<div class="box">
盒子模型
</div>

文章结束啦！本合集会汇总一系列CSS基础面试题，希望能给你们带来帮助，同时也欢迎各位指正以及技术交流！关注我不迷路！

前端面试题合集 CSS篇---盒模型超详细版！！！