标准盒模型和怪异（IE）盒模型

Posted 2023-03-27

参考技术A         提起盒模型，我觉得我们都知道是什么，也知道是其大致的概念！但是要系统的用专业性的词汇表达出来往往很难！这种情况在面试当中经常遇到：请回答， 标准盒模型和怪异盒模型的区别？
        大多数浏览器采用W3C标准模型，而IE中采用Microsoft自己的标准。
        怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器。
        当不对Doctype进行定义时，会触发怪异模式。（这个我一般都做文档声明）

1.W3C标准盒模型

在标准模式下，一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)
（ 这个我们可以理解为： 洋葱一样层层扒皮，每层都算）

2.怪异（IE）模型

在怪异模式下，一个块的总宽度=width+margin（左右）（既width已经包含了padding左右和border左右值）
（这个我们可以理解为： 一个班集体出了border就是铁板一块只和别的班有账算，内部没有 ）

3.CSS3指定盒子模型种类
box-sizing 属性可以指定盒子模型种类：它有三种属性值  content-box || border-box || inherit;
A：content-box W3C标准模式
B：border-box  怪异模式
C：inherit 继承父元素的盒子模型
一般用到通过CSS属性来设置盒子模型的时候，前两种用的比较多

为了加深理解大家可以点击这个链接： https://www.cnblogs.com/yky-iris/p/7719895.html
本篇文章也参考了这位大佬的文章： https://www.imooc.com/article/68238

以上内容来自自己的理解，如不对的地方，还望批评指正，共同进步

标准盒模型和怪异盒模型

CSS中Box model是分为两种:: W3C标准 和 IE标准盒子模型。

大多数浏览器采用W3C标准模型，而IE中则采用Microsoft自己的标准。

怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器。

当不对doctype进行定义时，会触发怪异模式。

在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）