这篇文章是,对于 标准盒模型 和 IE盒模型 的各自 定义,二者的 差异 性,彼此之间的 转换 方法的一个总结:
- CSS 中盒模型概念 :
盒子模型组成 :由元素的 内容(content),边框(border),内边距(padding),外边距(margin)组成。
- 盒子里面的文字,图片等元素就是内容区域(content)。
- 盒子的厚度就是盒子的边框(border)。
- 盒子内容(content)和边框(border)之间的距离就是内边距(padding)(类似于单元格的 cellpadding 属性)。
- 盒子于盒子之间的距离就是外边距(margin)(类似于单元格的 cellspacing 属性)。
CSS 中 width 指的是内容的宽度,而不是盒子的宽度;同样的 height 指的是内容的高度,而不是盒子的高度。
- 盒模型的分类 :
盒模型分类 :
- 标准(W3C)盒模型 。(box-sizing : content-box;)
- 怪异(IE)盒模型 。 (box-sizing : border-box;)
- 标准盒模型和怪异盒模型的区别 :
标准盒模型 :
- 盒子 宽度 : 内容宽度(content)。
- 盒子 高度 : 内容高度(content)。
- 盒子 实际占有的宽度 :内容宽度 (content)+ 左右(padding) + 左右(boder) + 左右(margin)。
- 盒子 实际占有的高度 : 内容高度 (content)+ 上下(padding) + 上下border + 上下(margin)。
怪异盒模型 :
- 盒子 宽度 : 内容宽度(content) + 左右(padding )+ 左右(border)。
- 盒子 高度 : 内容高度(content) + 上下(padding) + 上下(border)。
- 盒子 实际占有的宽度 :内容宽度(content) + 左右(padding) + 左右(boder)+ 左右(margin)。
- 盒子 实际占有的高度 : 内容高度(content) + 上下(padding) + 上下(border) + 上下(margin)。
总结 :二者盒子 实际占有的宽高 一样,CSS中显示的宽高 不一样。
- 盒模型之间的转换 :
元素可以通过 CSS 中的 box-sizing 样式属性来转换盒子模型。
- 标准盒模型 : box-sizing : content-box;
- IE 盒模型 : box-sizing : border-box;