认识盒模型

盒子属性

盒子属性有:width height margin padding border max-width min-width max-height min-height

盒子种类

1.标准盒子

标准盒子又叫内容盒子， w3c盒子  可以通过box-sizing:content-box设置

内容盒子的宽高设置给内容区 

盒子宽:width+paddingLeft+paddingRight+borderLeft+borderRight

盒子高:height+paddingTop+paddingBottom+borderTop+borderBottom

盒子所占页面宽:盒子宽+marginLeft+marginRight

盒子所占页面高:盒子高+marginTop+marginBottom

2.边框盒子

边框盒子又叫IE盒子，怪异盒子，可以通过box-sizing:border-box设置

边框盒子的宽高设置给盒子本身的

盒子宽:width = contentWidth+paddingLeft+paddingRight+borderLeft+borderRight

盒子高:height = contentHeight+paddingTop+paddingBottom+borderTop+borderBottom

所占页面宽:盒子宽 + marginLeft+marginRight

所占页面高:盒子高 + marginTop+marginBottom

说一说css盒模型

 1.盒子种类：

1.内容盒子 标准盒子 w3c盒子

2.边框盒子 IE盒子 怪异盒子

2.盒子区别：

1标准盒子的width和height是设置给内容区的宽高

2.边框盒子的width和height是设置给盒子的宽高