Css盒模型

1.概念

Css盒模型本质上是一个盒子，封装周围的Html元素；

盒模型包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）

2.分类

Css盒模型分为：标准盒模型、怪异盒模型

2.1 标准盒模型（W3C盒子模型）

标准盒模型：盒子总宽/高 = width/height  +padding + border + margin

（即width/height只是内容高度，不包含padding和border）

2.2 怪异盒模型（IE盒子模型）

怪异盒模型：盒子总宽/高 = width/height + margin

（即width/height包含了 padding 和 border 值）

3.设置方式

//标准
//浏览器默认设置
box-sizing:content-box;

//怪异
box-sizing:border-box;