1。盒模型简介本文简单总结了一些基本概念、知识点和细节。作为前端人员，盒模型是最基础的知识点，在排版和布局中不可避免地要用到盒模型。我们在写HTML的时候，网页上几乎所有的内容都包裹在元素中（当然也可以叫标签）。最常见的有div、span、a、img等。虽然标签的数量各不相同，但总的来说，元素可以分为三种类型：块元素、行内元素、行内块元素，在具体总结盒模型之前，我们先简单描述一下这些元素的属性。我们在CSS中经常听到的一个词叫做“文档流”，那么文档流到底是什么？“流”其实是CSS中的一种基本的定位和布局机制。当然，上面提到的三种元素都必须遵守一定的布局机制，具体来说：块级元素：典型代表div的宽度默认会自动填充父元素，即一个块级元素会占据一个单行，后面的元素会另起一行显示。width、height、padding、margin是可以具体设置的内联元素：一个典型的代表span内联元素不会占一行，相邻的内联元素会按顺序排列。如果不够，换行。不能指定宽高，它的大小由里面的内容展开来决定。虽然不能指定宽度和高度，但是可以设置水平方向的padding和margin。在布局文档时，浏览器渲染引擎会根据CSS-Box模型将所有元素表示为一个矩形框。在CSS中，盒子模型将被用来描述这些矩形盒子——内容元素所占据的空间。.那么盒子里面是什么，如下图所示：对于一个盒子来说，它由四部分组成：margin叫outermargin，border叫border，padding叫innermargin，content叫contentarea细分，margin它可以分为margin-left，margin-right，margin-top和margin-bottom。同样，border和padding也有这样的属性。盒子出来了，自然要计算它的尺寸，但是还有一个幺蛾子，在计算尺寸的时候有两套不同的标准，就是盒子模型有两种：第一种是W3C标准模型和第二个是IE的怪异盒子模型。自然，不同的盒子模型会有不同的计算方法。2.尺寸计算在W3C标准模式下：一个盒子所占的空间width=contentwidth+padding+border+margin在IE怪异的盒子模型中：a盒子所占空间的宽度=width（padding和border都算在内）)+marginheight由于上面的计算方法可以用同样的方法来计算：在CSS的标准盒模型中，width和height指的是内容区域的宽度和高度high。增加填充、边框和边距不会影响内容区域的大小，但会增加整个框的大小。这个功能有时实际上有点烦人——我们可以通过设置box-sizing（一个新的CSS3属性）来改变要拉伸的框。3.box-sizing（在IE8+浏览器中）那么box-sizing到底是什么？MDN中有这样的解释：该属性用于改变用于计算元素宽高的默认CSS盒模型。此属性可用于模拟不正确支持CSS盒模型规范的浏览器的行为。在标准盒模型中，您在元素上设置的宽度和高度仅适用于元素的内容区域。如果这个元素有border或者padding，那么我们在调整一个元素的宽高的时候，需要时刻关注这个元素的border和innermargin，也就是上面说的会放大。当我们实现响应式布局时，此功能特别烦人。box-sizing属性的默认值是content-box，这是标准的盒子模型。box-sizing的另一个属性值border-box，指的是IE框模型。了解盒模型的计算方法非常重要。现在的网页，尤其是手机页面，需要适配不同的屏幕尺寸~~~另外，如果在ie6、7、8中缺少DOCTYPE，也会触发IE模式。参考资料：1.张鑫旭-鑫空间-鑫生活2.MDN-web技术文档
