关键词：
参考技术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
以上内容来自自己的理解，如不对的地方，还望批评指正，共同进步
ie盒模型和标准盒模型
标准盒模型和ie盒模型（怪异盒模型）w3c标准盒模型width和height不包括padding和borderie盒模型width和height包含padding和borderie8以上都是w3c标准盒模型 ie5极其以下都是ie盒子模型，ie6、ie7、ie8在混杂模式下ie盒模型，在标准模式... 查看详情
css盒模型
盒模型分：W3C标准的盒子模型（标准盒模型）、IE标准的盒子模型（怪异盒模型）1、标准盒模型标准盒模型中width指content的宽度，height指content的高度。标准盒模型下盒子的大小=content+border+padding+margin 2、怪异盒模型怪异... 查看详情
2022-03-09——标准盒模型与怪异盒模型的区别及box-sizing的应用
...术A1、盒子模型（boxmodel）（分为怪异盒模型即IE盒模型和标准盒模型）在HTML中，可以把元素看做盒子，盒子包括：实际内容（content）、内边距（padding）、边框（border）、外边距（margin）怪异盒模型标准盒模型1.标准盒模型标准... 查看详情
怪异盒模型
一、怪异盒模型 （一） box-sizing：content-box（标准盒模型/IE盒模型）/border-box（怪异盒模型）允许以特定的方式定义匹配某个区域元素的特定元素 1.content-box这是由CSS2.1规定的宽度高度行为； 宽度和高度... 查看详情
彻底搞懂标准盒模型和怪异盒模型(代码片段)
一：标准盒模型：box-sizing:content-box;1：首先强调一点：这个盒子真正的的大小是由文本区域content内边距padding和边框border组成。但在标准盒模型的代码中的with和height是只指向content的大小不包含padding和border的。我... 查看详情
盒模型——标准盒模型与怪异盒模型
盒模型是CSS中一种重要的思维模型，理解了盒模型才能进行更好的页面布局。顾名思义，我们把页面上所有的元素都看做是一个生活中常见的盒子，它具备内容（content），内边距（padding），边框（border），外边距（margin）四个... 查看详情
css盒子模型及盒子模型的类型
...(BoxModel)：转自链接盒子模型有两种，分别是W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)1.标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。2.标准盒模型下盒子的大小=content+border+padding+margin... 查看详情
htmlcssjavascript
...距（padding）、实际内容（content）四个属性。CSS盒模型：标准模型+IE模型标准盒模型：width/height只是内容高度，不包含padding和border值。IE盒子模型(怪异盒模型)：width/height包含了padding和bor 查看详情
css盒模型
盒模型分为两种，一种是标准模式下的盒模型，另一种是怪异模式下的盒模型再说盒模型前先了解一下什么是标准模式，什么是怪异模式一般我们在写代码的时候都会注意到代码的顶端有一个<!DOCTYPEHTML>，这种情况下的渲染... 查看详情
对css盒模型的理解
介绍一下标准css的盒子模型？低版本IE的盒子模型有什么不同的？1、有两种：IE盒子模型（怪异模式）、W3c盒子模型（标准模式）。2、盒模型组成：内容(content)、填充(padding)、边界(margin)、边框(border)。3、区别：IE的content部分把b... 查看详情
ie的盒模型和标准模型(代码片段)
...度+border宽度+padding宽度//改变border宽度，div宽度不会变化标准模型div宽度=内容宽度+border宽度+padding宽度//改变border宽度，div宽度会变化代码<html><head></head><style>.demoborder:1pxsolid;.boxdisplay:inline-block;width:200px;height:200... 查看详情
html&css面试高频考点
...面试高频考点(一) ♥6.W3C盒模型与怪异盒模型标准盒模型（W3C标准）怪异盒模型（IE标准）怪异盒模型下盒子的大小=width（content+border+padding）+margin，即真实大小。*参考标准模式与兼容模式的区别，兼容模式下为怪异... 查看详情
浏览器的标准模式和怪异模式
在标准模式页面按照HTML,CSS的定义渲染，而在怪异模式就是浏览器为了兼容很早之前针对旧版本浏览器设计，并未严格遵循W3C标准而产生的一种页面渲染模式。浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式，如... 查看详情
彻底搞懂标准盒模型和怪异盒模型(代码片段)
一：标准盒模型：box-sizing:content-box;1：首先强调一点：这个盒子真正的的大小是由文本区域content内边距padding和边框border组成。但在标准盒模型的代码中的with和height是只指向content的大小不包含padding和border的。我... 查看详情
深入理解盒模型与bfc(代码片段)
标准盒模型与IE盒模型开发者们都知道，由于历史遗留问题与既定标准的发展，存在着两个css盒模型。即W3C的标准盒模型以及IE的怪异盒模型。在css中，可以用box-sizing去定义元素的盒模型。比较这两个盒模型的差异之前，我们先... 查看详情
怪异盒模型
一、怪异盒模型：1）触发怪异盒模型： box-sizing:border-box;2）怪异盒模型特点：padding和border都会在元素的宽高的内部，不会把盒子撑大。3）box-sizing: ... 查看详情
标准盒模型与ie盒模型
1.盒模型的组成所有HTML元素可以看作盒子，在CSS中，"boxmodel"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元... 查看详情
请简述css盒子模型与css怪异盒模型
...与怪异模型的设置当设置为box-sizing:content-box时，将采用标准模式解析计算（默认模式）；当设置为box-sizing:border-box时，将采用怪异模式解析计算；2、盒模型在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的... 查看详情