css中盒子模型与box-sizing属性

时间:2022-01-15 00:03:53

盒子模型

w3c标准:定义的width为 内容,有padding,border 都会使得 最终呈现的宽度为 定义的width+padding+border的总和,有margin另加

ie标准:定义的width为包含了border,padding,使得最终呈现的宽度 为定义的width,有margin另加

box-sizing:使盒子为ie模式呈现

content-sizing:使盒子w3c模式下 呈现

一般初始全局css样式:

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  }