- 有两种,
IE盒子模型、W3C盒子模型;- 盒模型: 内容(content)、填充(
padding)、边界(margin)、 边框(border);- 区 别:
IE的content部分把border和padding计算了进去;
- 盒子模型构成:内容(
content)、内填充(padding)、 边框(border)、外边距(margin) IE8及其以下版本浏览器,未声明DOCTYPE,内容宽高会包含内填充和边框,称为怪异盒模型(IE盒模型)- 标准(
W3C)盒模型:元素宽度 =width + padding + border + margin - 怪异(
IE)盒模型:元素宽度 =width + margin - 标准浏览器通过设置 css3 的
box-sizing: border-box属性,触发“怪异模式”解析计算宽高
box-sizing 常用的属性有哪些?分别有什么作用
box-sizing: content-box;默认的标准(W3C)盒模型元素效果box-sizing: border-box;触发怪异(IE)盒模型元素的效果box-sizing: inherit;继承父元素box-sizing属性的值
本文详细介绍了盒模型的两种类型:IE盒子模型和W3C盒子模型,以及它们在计算元素宽高时的区别。IE8及以下版本的浏览器在未声明DOCTYPE时,内容区域会包含边框和内填充,形成怪异盒模型。而标准盒模型中,元素宽度不包含边框和内填充。CSS3的box-sizing属性可以用来切换这两种盒模型,其中content-box为标准模式,border-box则触发IE盒模型效果。此外,box-sizing: inherit则允许元素继承父元素的盒模型设置。
792

被折叠的 条评论
为什么被折叠?



