css基础-盒模型box-sizing

网页基本元素是盒子，网页布局核心就是布局盒子，所谓盒子就是把元素看成放内容的容器

盒子模型组成

1. 实际内容 content
2. 内边距padding
3. 边框border
4. 外边距margin

盒子大小计算

传统盒模型

box-sizing: content-box;默认值

例如设置了width:200px（指的是content内容区域的大小，不包括padding, border）

设置的宽度为内容宽度200px，如果设置了border(10px), padding(10px)

盒子实际大小=content+border+padding=200+10+10=220px

 

 css3盒子模型 

box-sizing: border-box;

例如设置了width:200px(指的是盒子总大小，包括了border padding)

设置的宽度为盒子的大小，包括border padding，不包括margin, 即使设置了border padding, 盒子始终是200px

只是content区域的大小会减去这些border padding,margin大小