码云 61. CSS3 盒子模型
CSS 中有一种基础设计模式叫盒模型，盒模型定义了 Web 页面中的元素中如何来解析。CSS 中每一个元素都是一个盒模型，包括 html 和 body 标签元素。在盒模型中主要包括width、height、border、background、padding和margin这些属性，而且他们之间的层次关系可以相互影响，来看一张盒模型的 3D 展示图：
从图中可以看出padding属性和content属性层叠background-image属性，层叠background-color属性，这个是存在的，它们四者之间构成了Ｚ轴（垂直屏幕的坐标）多重层叠关系。但是border属性与margin属性、padding属性三者之间应该是平面上的并级关系，并不能构成Ｚ轴的层叠关系。
box-sizing
在 CSS 中盒模型被分为两种，第一种是 w3c 的标准模型，另一种是 IE 的传统模型，它们相同之处都是对元素计算尺寸的模型，具体说不是对元素的width、height、padding和border以及元素实际尺寸的计算关系，它们不同之处是两者的计算方法不一致，原则上来说盒模型是分得很细的，这里所看到的主要是外盒模型和内盒模型，如下面计算公式所示：
1. W3C 标准盒模型
外盒尺寸计算（元素空间尺寸）
element 空间高度＝内容高度＋内距＋边框＋外距
element 空间宽度＝内容宽度＋内距＋边框＋外距
内盒尺寸计算（元素大小）
element 高度＝内容高度＋内距＋边框（height 为内容高度）
element 宽度＝内容宽度＋内距＋边框（width 为内容宽度）
2. IE 传统下盒模型（IE6 以下，不包含 IE6 版本或”QuirksMode 下 IE5.5+”）
外盒尺寸计算（元素空间尺寸）
element 空间高度＝内容高度＋外距（height 包含了元素内容宽度、边框、内距）
element 宽间宽度＝内容宽度＋外距（width 包含了元素内容宽度、边框、内距）
内盒尺寸计算（元素大小）
element 高度＝内容高度（height 包含了元素内容宽度、边框、内距）
element 宽度＝内容宽度（width 包含了元素内容宽度、边框、内距）
在 CSS3 中新增加了box-sizing属性，能够事先定义盒模型的尺寸解析方式，其语法规则如下：
box-sizing: content-box | border-box | inherit
取值说明:
| 属性值 | 属性值说明 |
| content-box |
默认值，其让元素维持 W3C 的标准盒模型，也就是说元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height），也就是 element width/height = border + padding + content width / height |
| border-box |
重新定义 CSS2.1 中盒模型组成的模式，让元素维持 IE 传统的盒模型（IE6 以下版本和 IE6-7 怪异模式），也就是说元素的宽度或高度等于元素内容的宽度或高度。从上面盒模型介绍可知，这里的内容宽度或高度包含了元素的 border、padding、内容的宽度或高度（此处的内容宽度或高度＝盒子的宽度或高度—边框—内距）。 |
| inherit |
使元素继承父元素的盒模型模式 |
其中最为关键的是box-sizing中content-box和border-box两者的区别，他们之间的区别可以通过下图来展示，其对盒模型的不同解析：
以上关于61. CSS3 盒子模型的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 61. CSS3 盒子模型
