css盒模型

盒模型

• 什么是盒模型？
• 在HTML页面中每一个元素都可以被看作是一个盒子
• 盒模型 分为 标准盒模型 和 怪异盒模型

标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)

怪异模式下： 一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）（IE浏览器）

盒模型之间的转换

• box-sizing:content-box; 将采用标准模式的盒子模型标准
• box-sizing:border-box; 将采用怪异模式的盒子模型标准
• box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。