前端盒子模型

CSS的盒子模型

CSS的盒子模型是CSS技术所使用的一种思维模式，CSS里面可以形象的所有HTML标签当成一个矩形的盒子（类似生活中的盒子）；
盒子模型的组成部分：margin（外边框）、padding（内边框）、border）（边框）、content（内容区）；
盒子模型的分类： 标准的盒子模型（w3c盒子模型）、怪异盒模型（IE盒子模型）；

标准的盒子模型：

怪异盒子模型：

从以上两个图片可以看出 两种盒子模型的组成部分都含有：margin、padding、border、content，不同的是怪异盒子的content包含了border和padding；
一开始我看这两个图的时候还是很懵逼的，我举个例子可能就懂了
举例子说明二者的区别：

div{ width:200px; height:200px; margin:30px; padding:10px;
border:10px; }

标准的盒子模型：

盒子在页面中占的宽度width=200（content的宽）+ margin * 2+padding * 2 + border * 2=200+302+102+10*2=300;
盒子的实际宽度是：300-margin * 2 =240；
IE盒子模型：
盒子在页面中占的宽度 width=200(content的宽) + margin *2 = 260;
盒子的实际宽度是：260-margin * 2 =200;

关于组成部分属性需要注意的地方：

• margin-top存在兼容问题：默认情况下，给子元素添加margin-top后，本身盒子应该自动往下移，但是浏览器解析的是父元素下移；
  解决办法：

• 给子元素或父元素添加浮动（看布局情况）；

• 给最近的父元素添加透明的上边框；

• 给父元素添加overflow：hidden；
  2.margin的上下间距会重叠（原因是因为BFC),当两个并列的元素，给上面一个元素添加了margin-bottom，另一个添加了margin-top时，这个时候两个margin会发生重叠，最终显示的结果是最大的数据。
  解决办法：

• 给下面的元素添加父元素，并且添加overflow：hidden；
  3.padding是内边距，添加会把容器撑大，不可以给负值，不支持auto；

IE的盒子模型：

触发方式就是文档的声明结构中的doctype不写，这个是IE8以下的低版本有;
另一种办法就是给元素添加box-sizing：border-box；这是属于css3的属性，触发容器为怪异盒子模型后，再给模型添加border和padding就不会把盒子撑大，当设置了容器的固定宽高时，又添加padding;
想要保证盒子大小不变，必须减去padding的数值，也可以考虑触发怪异盒子模型，如果没有设置容器的固定宽高，那么就不用减去padding。

逆战班：李老师；