CSS盒模型介绍

盒模型简单介绍

盒模型是浏览器渲染引擎在对文档进行布局（layout）时，会将每一个元素解析成一个矩形的盒子，这个盒子从内到外由四部分组成：

content:内容部分

padding：内边距

border:边框

margin：外边距

盒模型分类

浏览器中的盒模型由两种，一种是w3c标准盒模型，一种是IE怪异盒模型，可以在CSS中通过box-sizing属性设置元素的盒模型，有以下两个值

content-box标准盒模型（默认值也是这个）

border-box怪异盒模型

二者的区别

标准盒模型和怪异盒模型的区别主要在于对于元素宽高计算方式的不同：

在标准盒模型中，元素的width=content的宽度

在怪异盒模型中，元素的width=content+padding+border;（这里的padding包含左右padding，border包含左右border）

同样的，

在标准盒模型中，元素的height=content的高度

在怪异盒模型中，元素的height=content+padding+border（这里的padding包含上下padding，border包含上下border）;