盒子模型--标准盒模型和怪异盒模型

盒子模型由content（内容）、margin（外边距）、padding（内边距）、border（边框）组成

    <!-- 标准盒模型与怪异盒模型 -->
    <div style="width:500px;height:300px;border:1px #000 solid;padding:10px;"></div>

设置标准盒模型，box-sizing：content-box；

width = content(内容)的宽度,

style中宽高不包含内边距和边框

这个块实际宽（520px）= content（宽度）+ padding（左右内边距） + border（左右边框）

设置怪异盒模型，box-sizing：border-box；

width = content(内容)的宽度 + padding左右内边距 + border左右边框,

style中宽高包含内边距和边框

这个块实际宽 = width

触发怪异盒模型：

1.丢失<!DOCTYOE html>在ie678下触发怪异盒模型

2.在元素style中添加box-sizing：border-box；