目录
介绍
CSS盒模型本质是一个盒子，由边距、边框、填充和实际内容组成。
CSS盒模型分为两种：标准盒模型、IE盒模型（也称为怪异盒模型）。
两种盒模型的区别在于他们的总宽度的计算公式不一样。
在文档首部加了 <!Doctype html>声明，即使用标准盒模型，若不加，则会由浏览器自己决定。
标准盒模型
width = 内容（content）的宽度
height = 内容（content）的高度
总宽度：width + margin（左右） + padding（左右） + border（左右）
总高度：height +margin（上下） + padding（上下） + border（上下）
增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
IE盒模型（怪异盒模型）
width = border + padding + 内容（content）的宽度
height = border + padding + 内容（content）的高度
总宽度：width + margin（左右）（即 width 已经包含了 padding 和 border）
总高度：height + margin（上下）（即 height 已经包含了 padding 和 border）
设置 padding 、border 后，真正宽度或高度就会改变。
box-sizing
CSS 中的 box-sizing 属性定义了 user agent（用户计算机程序）应该如何计算一个元素的总宽度和总高度。
属性值：border-box（IE盒模型）、content-box（标准盒模型）
657
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
