CSS盒子技术详解

第一讲：什么是盒子模型：
       CSS中每一个元素都是一个盒子模型，包括html和body标签元素。在平时设计中，大家对content、padding、margin、background和border来说一定不会陌生。因为盒子模型都具备这些属性。其中width、height、border、background、padding和margin之间的层次关系和相互影响，可以看出padding、content、background-image、background-color，他们四者构成Z轴多重叠关系。但是border与margin、pading三者之间应该是平面上的并级关系，并不能构成Z轴的层叠关系。
      在CSS中盒模型被分为两种：第一种是W3C的标准模型。另一种是IE的传统模型。它们相同之处都是对元素计算尺寸的模型，具体说就是对元素的width、height、padding和border以及元素实际尺寸的计算关系，不同之处是两者的计算方法不一致。
1.W3C的标准盒子模型
外盒尺寸计算(元素空间尺寸)
element空间高度=内容高度+内距+边框+外距;
element空间宽度=内容宽度+内距+边框+外距内盒尺寸计算(元素大小)
element高度=内容高度+内距+边框(height为内容高度)
element宽度=内容宽度+内距+边框(width为内容宽度)

2、IE传统下盒自模型(IE6以下，不包括IE6版)
外盒尺寸计算(元素空间尺寸)
element空间高度=内容高度+外距(height包含了元素内容宽度、边框、边距);
element宽间宽度=内容宽度+外距(width包含了元素内容宽度、边距、内距);

内盒尺寸计算(元素 大小)
element高度=内容高度(height包含了元素内容宽度、边距、内距)
element宽度=内容宽度(width包含了元素内容宽度、边框、内距)

为了解决这个问题，CSS增添了一个盒子模型属性box-sizing，能够事先定义盒子模型的尺寸解析方式。box-sizing的属性值主要有以下三个：
1。content-box：默认值，让元素位置W3C的标准盒子模型。元素的宽度和高度(width/height)。等于元素边框宽度(border)加上元素内距(padding)加上元素内容宽度或高度(content width/height)，也就是element width/height=border+padding+content width/height。

2。border-box：此值会重新定义CSS2.1中盒子模型组成的模式，让元素位置IE传统的盒模型。元素的宽度或高度等于元素、内容的宽度和高度。从盒子模型介绍可知，这里的内容宽度或高度包含了元素额border、padding、内容的宽度或高度(此处的内容宽度或高度=盒子的宽度或高度- 边框- 内距)。

3。inherit：此值使元素继承父元素的盒模型模式。box-sizing属性主要用来控制元素的盒子模型的解析模式，其主要目的是控制元素的总宽度。