对盒模型的理解

盒模型分为w3c盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)。

标准盒模型 box-sizing:content-box;

IE盒模型 box-sizing:border-box;

标准盒模型,元素内容占据的空间是由width设置决定的,所以,盒子实际内容(content)的width/height = 设置的width/height;盒子总宽度/总高度 = width/height + padding + border + margin;

IE盒模型,盒子的(content)宽度 + padding + border = 设置width;

盒子的(content)高度 + padding + border = 设置height;

盒子总宽度/总高度 = width/height + margin = content的宽度/高度 + padding + border + margin;

 

posted on 2019-06-06 16:46  平平淡淡summer  阅读(413)  评论(0编辑  收藏  举报

导航