一、什么是盒模型
- 当对一个文档进行布局(layout)的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basic box model),将所有元素表示为一个个矩形的盒子(box)
一个盒子由四个部分组成:
content
、padding
、border
、margin
二、CSS有两种盒模型
盒模型分为:标准盒模型(浏览器默认) 和 IE怪异盒模型
1.标准盒模型
标准盒模型的 with 和 height 只是内容 content 的宽高,不包含 padding
和 border
值。如设置width
为200px,但如果有padding等存在,盒子实际高宽大于 200px
盒子实际宽高计算公式:
- 盒子总宽度 = width + padding + border + margin;
- 盒子总高度 = height + padding + border + margin
2.IE 怪异盒子模型
IE 怪异盒子模型的 with 和 height 则是包含了 内容 content 和 padding 、border 的值。
-
盒子总宽度 = width + margin;
-
盒子总高度 = height + margin;
三、CSS那个属性定义了引擎应该如何计算一个元素的总宽度和总高度
1. CSS 中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度
box-sizing: content-box|border-box|inherit:
- content-box 默认值,元素的 width/height 不包含padding,border,与标准盒子模型表现一致
- border-box 元素的 width/height 包含 padding,border,与怪异盒子模型表现一致
- inherit 指定 box-sizing 属性的值,应该从父元素继承