CSS3盒子模型

一、CSS盒子模型简介

CSS中主要有以下盒模型：inline、inline-block、block、table、absolute 、float等。浏览器把每个元素看作一个盒子模型，每一个盒子模型是由以下属性组合所决定的：display、position、float、width、height、margin、padding和border等。不同类型的盒模型会产生不同的布局。

二、盒子模型的两种模式

在W3C的传统CSS2.1盒模型中，通过声明width和height值来控制内容区域的宽度和高度，然后附加上内边距和边框等，这通常成为内容盒模型。

在CSS中盒模型分为两种，一种W3C的标准模型，另一种是IE的传统模型。

（1）W3C的标准盒模型

外盒尺寸计算（元素空间尺寸）

element空间高度 = 内容高度 + 内距 + 边框 + 外距

element空间宽度 = 内容宽度+ 内距 + 边框 + 外距

内盒尺寸计算（元素大小）

element高度 = 内容高度 + 内距 + 边框（height为内容高度）

element宽度 = 内容宽度 + 内距 + 边框（width为内容宽度）

（2）IE传统下盒模型

外盒尺寸计算（元素空间尺寸）

element空间高度 = 内容高度 + 外距（height包含了元素内容高度、边框、内距）

element空间宽度 = 内容宽度 + 外距（width包含了元素内容宽度、边框、内距）

内盒尺寸计算（元素大小）

element 高度 = 内容高度（height 包含了元素内容、边框、内距）

element宽度 = 内容宽度（width 包含了元素内容宽度、边框、内距）

三、CSS3盒模型属性

box-sizing属性的语法及参数：box-sizing： content-box|  border-box | inherit

1、content-box：默认值，让元素维持w3c的标准盒模型。元素的宽度和高度等于元素边框加上元素内距（padding）加上元素内容宽度或高度，也就是element width/height = border + padding + content width/height。

2、border-box：此值会重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统盒模型。元素的宽度或高度等于元素内容的宽度或高度。

3、inherit：此值使元素继承父元素的盒模型模式。

box-sizing属性主要用来控制元素盒模型的解析模式，其主要目的是控制元素的总宽度。在W3C规范中，元素的box-sizing属性的默认值为content-box值，如果不显式重置box-sizing的属性值为border-box，才能明确设置一个总宽度。