css的盒子模型

一、盒子模型分两种

第一种:W3C标准盒子模型(标准盒模型)
第二种:IE标准的盒子模型(怪异盒模型)


二、标准盒模型与怪异盒模型的区别

标准盒模型:width指的是内容区域content的宽度,height指的是内容区域content的高度
标准盒模型下盒子的大小=content +padding+border+margin

怪异盒模型:width指的是内容、内边距、边框的宽度、height指的是内容、内边距、边框的高度
width=content +padding-left+padding-right+border-left+border-right,
height=content +padding-top+padding-bottom+border-top+border-bottom
怪异盒模型下盒子的大小:宽度=width+margin,高度=height+margin


三、通过box-sizing设置盒子模型的解析模式

box-sizing有两个值可选:
(1)content-box:默认值,标准盒模型,盒子的大小=content +padding+border+margin
(2)border-box:怪异盒模型,宽度=width+margin,高度=height+margin

 

你可能感兴趣的:(css,前端)