CSS3盒模型

标签：content   默认   col   abs   splay   组成   类型   包含   box   

1. W3C的标准盒模型。
2. http:/ /www.iis7.com/b/plc/
   外盒尺寸计算（元素空间尺寸）
   element空间高度＝内容高度＋内距＋边框＋外距
   element空间宽度＝内容宽度＋内距＋边框＋外距内盒尺寸计算（ 元素大小）
   element高度＝内容高度＋内距＋边框（height为内容高度）
   element 宽度＝内容宽度＋内距＋边框（width为内容宽度）
3. IE传统下盒模型（ IE6以下，不包含IE6版本或QuirksMode下IE5.5+）。
   外盒尺寸计算（ 元素空间尺寸）
   element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距）
   element宽间宽度＝内容宽度＋外距（width包含了元素内容宽度、边框、内距）
   内盒尺寸计算（ 元素 大小）
   element高度＝内容高度（ height 包含了元素内容宽度、边框、内距）
   element宽度＝内容宽度（ width包含了元素内容宽度、边框、内距）
   为了解决这种问题， CSS3增添 了 一个盒模型属性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传统的盒模型（ IE6以下版本和IE6～7怪异模式）。元素的宽度或高度等于元素 内容的宽度或高度。 从盒模型介绍可知， 这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（ 此处的内容宽度或高度＝盒子的宽度或 高度-边框-内距）。
   3· inherit：此值使元素继承父元素的盒模型模式。 box-sizing属性主要用来控制元素的盒模型的解析模式， 其主要目的是控制元素的总宽度。 在W3C规范中， 元素的box-sizing默认属性值是content-box 值， 如果不显式重置box-sizing属性值为border-box， 才能明确对元素设置一个总宽度。在这种情况之下会使 页面布局更加方便。

CSS3盒模型

标签：content   默认   col   abs   splay   组成   类型   包含   box   

原文地址：http://blog.51cto.com/13941970/2293818