css盒模型

1、<div></div>:本身没有太多的默认属性，可塑性极强；默认宽度为100%(相对于父标签)。

2、盒模型概念：css会把所有的标签当成一个个“盒子”，通过css所提供的相关css属性能够实现任意标签的尺寸设置以及位置定位。而由这些css属性而构成的体系就是所谓的盒模型。

尺寸

• width：设置盒子的内容宽度
• height：设置盒子的内容高度
• border：设置盒子的边框

边距

• padding：设置内边框，内边框是指内容和border之间的距离，默认是和width分开的
• margin：设置外边距，即设置盒子和挨着的盒子的距离

3、两种盒模型

• 内容(标准、w3c)盒子:把宽高设置为内容的宽高，box-sizing:content-box;

        宽=width+paddingLeft+paddingRight+borderLeft+borderRight

        高=height+paddingTop+paddingBottom+borderTop+borderBottom

     所占屏幕空间

       宽=width+paddingLeft+paddingRight+borderLeft+borderRight +marginLeft+marginRight

       高=height+paddingTop+paddingBottom+borderTop+borderBottom+marginTop+marginBottom

• 边框(怪异、ie)盒子:把宽高设置给盒子的宽高，box-sizing:border-box;

        宽=width  

        高=height 

       所占屏幕空间的宽 =width+marginLeft+marginRight  

       所占屏幕空间的高 =height+marginTop+marginBottom