盒子模型
CSS盒模型本质上是一个盒子,封装周边的HTML元素,
包括 外边距margin,边框border,内边距padding,实际内容content 四个属性
盒模型允许我们在其他元素和周围元素边框之间的空间放置元素
标准盒模型:
content的width/height=我们设置的width/height
盒子总宽度/高度=我们设置的width/height+padding+border+margin
IE盒子模型(怪异盒模型):
content的宽度/高度 + padding +border = 我们设置的width/height
盒子总宽高 = 我们设置的width/height + margin
CSS3指定盒子模型种类:
box-sizing:content-box; //标准盒模型
box-sizing:border-box; //怪异盒模型
box-sizing:inherit; //从父元素继承box-sizing属性的值
两种模式下如何解决样式兼容性:
建议不要给元素添加具有指定宽度的内边距,而是将内边距和外边距添加到元素的父元素和子元素。