css盒子模型

内容(content)、填充(padding)、边框(border)、边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性。

标准盒子模型

标准 w3c 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。
width属性的值就等于content的宽度,height属性值就等于content高度

ie 盒子模型

ie 盒子模型的范围也包括 margin、border、padding、content,和标准 w3c 盒子模型不同的是:ie 盒子模型的 content 部分包含了 border 和 pading。即

1
2
width = content + border + padding
height = content + border + padding

背景应用于由内容和内边距、边框组成的区域。

CSS3 box-sizing 属性

box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素。
box-sizing有两个值一个是content-box,另一个是border-box。
当设置为box-sizing:content-box时,将采用标准模式解析计算,也是默认模式;
当设置为box-sizing:border-box时,将采用怪异模式解析计算;
目前使用此属性需要前缀如下:

1
2
3
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box|border-box|inherit;

坚持原创技术分享,您的支持将鼓励我继续创作!