浅谈CSS的盒模型

CSS的盒模型？

是什么

在css中，是描述和控制元素在页面所占空间的一种模型。盒模型将每个元素看作是一个矩形的“盒子”，并定义了盒子的四个部分：内容区（context），内边距（padding），边框（border），外边距（margin）

1. context：元素的实际内容，图片或者文本，大小由width和height决定。

2. padding：位于内容区与边框之间, eg.padding:1px,1px,1px,1px；(上右下左)

3. border：围绕内容区加内边距的线条，eg.border:1px,red,solid；

4. margin：元素的边框和相邻元素之间，控制元素间的边距 eg.margin:1px,1px,1px,1px；(上右下左)

计算规则：总宽度（width）=context宽度＋padding左右+border左右+margin左右

总高度（height）=context高度＋padding上下+border上下+margin上下

怎么用

用于控制盒子的尺寸和相邻盒子的距离

一些规则

标准盒模型中，box-sizing:context-box,元素的高度和宽度只包括内容区的大小

IE盒模型:box-sizing:border-box，元素的高度包括内容区，内边距和边框的大小