关键词：
标准盒模型和怪异盒模型：
- 什么是盒模型？
- 网页设计中css技术所使用的一种思维模型
- 盒模型的组成：
- 外边距（margin）、边框（border）、内边距（padding）、内容（content）
- 盒模型的分类：
- 标准（W3C）盒模型、怪异（IE）盒模型
- 对于两者的区别，用这幅图就可以说明，简单直接明了（自己画的图，凑合着看啦）
- 标准盒：
标准盒模型是一种正规的盒子模型，它css的width由四部分组成：
外边距margin（left、right、both have） + 边框border + 内边距padding（left、right、both have） + 内容content
eg：margin-left + border-left-width + padding-left + content + padding-right + borer-right-width + margin-right
它css的height由四部分组成：
外边距margin（top、bottom、both have） + 边框border + 内边距padding（top、bottom、both have） + 内容content
eg：margin-top + border-top-width + padding-top + content + padding-bottom + borer-bottom-width + margin-bottom
- 怪异盒：
怪异盒模型是一种不正规的盒子模型，它css的width由两部分组成：
外边距margin（left、right、both have） + 内容content
eg：margin-left + content + margin-right
它css的height由两部分组成：
外边距margin（top、bottom、both have） + 内容content
eg：margin-top + content + margin-right
- 注意：标准盒和怪异盒之间的切换：
- 标准盒切换怪异盒：box-sizing：border-box；
- 怪异盒切换标准盒：box-sizing：content-box。
盒模型——标准盒模型与怪异盒模型
盒模型是CSS中一种重要的思维模型，理解了盒模型才能进行更好的页面布局。顾名思义，我们把页面上所有的元素都看做是一个生活中常见的盒子，它具备内容（content），内边距（padding），边框（border），外边距（margin）四个... 查看详情
标准盒模型和怪异（ie）盒模型
...出来往往很难！这种情况在面试当中经常遇到：请回答，标准盒模型和怪异盒模型的区别？ 大多数浏览器采用W3C标准模型，而IE中采用Microsoft自己的标准。 怪异模式是“部分浏览器在支持W... 查看详情
css盒模型
盒模型分：W3C标准的盒子模型（标准盒模型）、IE标准的盒子模型（怪异盒模型）1、标准盒模型标准盒模型中width指content的宽度，height指content的高度。标准盒模型下盒子的大小=content+border+padding+margin 2、怪异盒模型怪异... 查看详情
css盒模型
盒模型分为两种，一种是标准模式下的盒模型，另一种是怪异模式下的盒模型再说盒模型前先了解一下什么是标准模式，什么是怪异模式一般我们在写代码的时候都会注意到代码的顶端有一个<!DOCTYPEHTML>，这种情况下的渲染... 查看详情
彻底搞懂标准盒模型和怪异盒模型(代码片段)
一：标准盒模型：box-sizing:content-box;1：首先强调一点：这个盒子真正的的大小是由文本区域content内边距padding和边框border组成。但在标准盒模型的代码中的with和height是只指向content的大小不包含padding和border的。我... 查看详情
怪异盒模型
一、怪异盒模型 （一） box-sizing：content-box（标准盒模型/IE盒模型）/border-box（怪异盒模型）允许以特定的方式定义匹配某个区域元素的特定元素 1.content-box这是由CSS2.1规定的宽度高度行为； 宽度和高度... 查看详情
对css盒模型的理解
介绍一下标准css的盒子模型？低版本IE的盒子模型有什么不同的？1、有两种：IE盒子模型（怪异模式）、W3c盒子模型（标准模式）。2、盒模型组成：内容(content)、填充(padding)、边界(margin)、边框(border)。3、区别：IE的content部分把b... 查看详情
请简述css盒子模型与css怪异盒模型
...与怪异模型的设置当设置为box-sizing:content-box时，将采用标准模式解析计算（默认模式）；当设置为box-sizing:border-box时，将采用怪异模式解析计算；2、盒模型在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的... 查看详情
浏览器的标准模式和怪异模式
在标准模式页面按照HTML,CSS的定义渲染，而在怪异模式就是浏览器为了兼容很早之前针对旧版本浏览器设计，并未严格遵循W3C标准而产生的一种页面渲染模式。浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式，如... 查看详情
html&css面试高频考点
...面试高频考点(一) ♥6.W3C盒模型与怪异盒模型标准盒模型（W3C标准）怪异盒模型（IE标准）怪异盒模型下盒子的大小=width（content+border+padding）+margin，即真实大小。*参考标准模式与兼容模式的区别，兼容模式下为怪异... 查看详情
彻底搞懂标准盒模型和怪异盒模型(代码片段)
一：标准盒模型：box-sizing:content-box;1：首先强调一点：这个盒子真正的的大小是由文本区域content内边距padding和边框border组成。但在标准盒模型的代码中的with和height是只指向content的大小不包含padding和border的。我... 查看详情
css盒子模型及盒子模型的类型
...(BoxModel)：转自链接盒子模型有两种，分别是W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)1.标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。2.标准盒模型下盒子的大小=content+border+padding+margin... 查看详情
css盒模型（css的两种盒模型：标准盒模型怪异盒模型）和css3指定盒子模型种类的box-sizing属性
所有HTML元素可以看作盒子，在CSS中，"boxmodel"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性... 查看详情
怪异盒模型(代码片段)
...>17<body>18<div>19<!--20box-sizing:盒模型的设置2122标准盒模型content-box23盒子的宽:border+padding+width24盒子的高:border+padding+width25怪异盒模型:border-box26盒子的宽:就是设置的width会包含border+padding27盒子的高:就是设置的height会包... 查看详情
css3弹性盒---怪异盒
怪异盒模型 box-sizing:content-box 标准盒模型 总宽/高度=width+ 查看详情
ie盒模型和标准盒模型
标准盒模型和ie盒模型（怪异盒模型）w3c标准盒模型width和height不包括padding和borderie盒模型width和height包含padding和borderie8以上都是w3c标准盒模型 ie5极其以下都是ie盒子模型，ie6、ie7、ie8在混杂模式下ie盒模型，在标准模式... 查看详情
怪异盒模型
一、怪异盒模型：1）触发怪异盒模型： box-sizing:border-box;2）怪异盒模型特点：padding和border都会在元素的宽高的内部，不会把盒子撑大。3）box-sizing: ... 查看详情
深入理解盒模型与bfc(代码片段)
标准盒模型与IE盒模型开发者们都知道，由于历史遗留问题与既定标准的发展，存在着两个css盒模型。即W3C的标准盒模型以及IE的怪异盒模型。在css中，可以用box-sizing去定义元素的盒模型。比较这两个盒模型的差异之前，我们先... 查看详情