css盒模型
css有种基础实际模式叫盒模型，定义了web页面中的元素是如何看做盒子来解析的。
1、css盒模型简介
在css中主要有以下几种盒模型：inline、inline-block，block、table、absolute position、float。
浏览器把每个元素看做一个盒模型，每个盒模型是由以下几个属性组合所决定的：display、position、float、width、height、margin、padding和border等，不同类型的盒模型会产生不同的布局。
w3c标准的盒模型
外盒尺寸计算
element空间高度 = 内容高度（height）+ 内边距（padding）+ 边框（border）+ 外边距（margin）
element空间宽度 = 内容宽度（width）+ 内边距（padding）+ 边框（border）+ 外边距（margin）
内盒尺寸
element高度 = 内容高度（height）+ 内边距（padding）+ 边框（border）
element宽度 = 内容宽度（height）+ 内边距（padding）+ 边框（border）
2、css3盒模型
css3盒模型增添了一个盒模型属性box-sizing，能够事先定义盒模型的尺寸解析方式，语法为：box-sizing:content-box | border-box | inherit
box-sizing:content-box;默认值，让元素维持w3c的标准盒模型。元素的宽度和高度（width、height）等于border+padding+height/width
box-sizing:border-box;此值会重新定义css2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE6以下版本和IE6~7的怪异模式）。元素的宽高等于元素内容（content）的宽高
box-sizing:inherit;此值使元素继承父元素的盒模型模式；
box-sizing属性主要用来控制元素的盒模型的解析模式，其主要目的是控制元素的总宽度。在w3c规范中，元素的box-sizing默认属性值是content-box值，如果不显示属性值box-sizing属性值为border-box，才能明确对元素设置一个总宽度。这种情况下会使页面布局更加方便。
IE6以下以及怪异模式下的IE浏览器对盒模型虽然不符合W3C的标准规范，但这种解析方式并不是一无是处，它也有好的一方面，不管如何修稿元素的边框或者内边距大小，都不会影响元素盒子的总尺寸，也就不会打乱页面的整体布局。而在标准浏览器下，按照W3C规范对盒模型的解析，一旦修改了元素的边框或者内边距，就会影响元素盒子的尺寸，从而影响整个页面的布局。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
