摘要：标准盒模型标准所有元素可以看作盒子，在中，这一术语是用来设计和布局时使用。在标准盒模型中盒子占位高度与之一样。不幸的是，和在怪异模式中使用自己的非标准模型。
标准盒模型(w3c标准)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
在标准盒模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
在标准盒模型中：盒子占位width = width + 2margin + 2padding + 2*border,高度与之一样。
盒子真正德width = width + 2padding + 2border。 margin不算！margin可以改变盒子占位的大小，但是盒子的宽高并没有改变，而是位置的改变！
根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
怪异盒模型ie 盒子模型的 content 部分包含了 border 和 pading
要让网页按标准盒模型去解析，则需要加上 doctype声明，否则不同的浏览器会按照自己的标准去解析。
box-sizingbox-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
box-sizing类似于ie盒模型，它会把内边距和边框包含在width内。在实际工作中，我们设置一个固定宽度的盒子，但当给它设置padding、border之后，它的真正宽度就会改变。这时box-sizing就派上用途了。它会自动调整内容的宽度，保证盒子的真正宽度还是我们设置的宽度。
可以查看实例：box-sizing实例
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113043.html
摘要：百度标准盒模型，所有的介绍都是在标准模式下，一个块的总宽度左右左右左右在怪异模式下，一个块的总宽度左右既已经包含了和值然后再介绍一下新属性那么，到底这两个公式里提到的总宽度是什么意思呢两种模式最终效果有什么差别呢话不多说，上代码先看标准 百度标准盒模型，所有的介绍都是在标准模式下，一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)在怪异模式下...
摘要：的作用了解完这两种盒模型后，在介绍一下，他一共有种值，，。就是继承父元素的值，这里不做介绍。比如我们想做一个内边距，边框为，最终包括边框宽度为的，之前的做法是先算出内容宽。 懂得如何运用box-sizing之前，必须需要了解一下常规盒模型和怪异盒模型（IE盒模型）。 我们都知道盒模型从里到外主要包括：content，padding，border，margin。如下图：showImg(...
摘要：提供了糟糕的支持，而虽然接近标准，但依旧未能完全正确的支持标准。尽管修复了许多的问题，但是依然延续实现中的其它故障主要是盒模型问题。因此大部分的声明将触发严格模式即依据标准的规则渲染网页。 深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文将从盒模型开始，一步步涉及一些常见的前端笔试和面试点 主要参考自第一篇文章，然而笔者在读的时...
摘要：最近工作中有机会复习一下的基本知识，那么先从的盒模型开始吧，因为这是当时进现在这家公司笔试的第一题怎么把盒模型变成标准盒模型嗯，有办法，就可以啦。具体参见链接描述常见的盒模型分两类怪异盒模型和标准盒模型，两种盒模型有着很大的不同。 最近工作中有机会复习一下css的基本知识，那么先从css的盒模型开始吧，因为这是当时进现在这家公司笔试的第一题：怎么把IE盒模型变成标准盒模型？嗯，有办法，...
阅读 1020·2019-08-30 15:55
阅读 780·2019-08-30 15:55
阅读 1995·2019-08-30 15:44
阅读 2672·2019-08-29 14:17
阅读 977·2019-08-29 12:45
阅读 3200·2019-08-26 10:48
阅读 3013·2019-08-23 18:18
阅读 2468·2019-08-23 16:47
