盒子模型

盒子模型

css盒子模型分为2种,一种是内容盒子(w3c盒子),一种是边框盒子(IE盒子)
内容盒子
box-sizing:content-box;
在这种情况下设置的宽和高都是内容区的大小,盒子的具体情况为:
盒子的宽度=内容区的宽度(自定义的宽)-+左右边框的宽度+左右内边距的宽度
盒子的高度=内容区的高度(自定义的高)-+上下边框的宽度+上下内边距的宽度
在浏览器中:
盒子的宽度=内容区的宽度(自定义的宽)-+左右边框的宽度+左右内边距的宽度+左右外边距的宽度
盒子的高度=内容区的高度(自定义的高)-+上下边框的宽度+上下内边距的宽度+上下外边距的宽度

边框盒子
box-sizing:border-box;
在这种情况下设置的宽和高是盒子的大小,盒子的具体情况为:
盒子内容区的宽度=盒子的宽度(自定义的宽)-左右边框的宽度-左右内边距的宽度
盒子内容区的高度=盒子的高度(自定义的高)-上下边框的宽度-上下内边距的宽度
在浏览器中:
盒子的宽度=盒子的宽度(自定义的宽)+外边距的宽度
盒子的高度=盒子的高度(自定义的高)+外边距的高度