# 盒模型
盒子模型有两种, ie 盒模型和标准 盒模型
# 标准盒模型
W3C模型中:
CSS中的宽(width)=内容(content)的宽
CSS中的高(height)=内容(content)的高
# IE盒模型
IE模型中:
CSS中的宽(width)=内容(content)的宽+(border+padding)*2
CSS中的高(height)=内容(content)的高+(border+padding)*2
# 解决办法
解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。
# box-sizing
box-sizing: content-box|border-box|inherit:
| 值 | 说明 |
|---|---|
| content-box | CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度(最小/最大属性)适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外 |
| border-box | 对元素指定宽度和高度包括了 padding 和 border。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
| inherit | 指定 box-sizing 属性的值,应该从父元素继承 |