CSS盒子模型仅仅是一个形象的比喻,每一个可见的HTML元素都是一个盒子,一个盒子由外到内可以分成四个部分:margin(外边距)、border(边框)、padding(内边距)以及content(内容)。有两种盒子模型,一种是内容盒子,一种是边框盒子。
内容盒子(W3C盒子) --- 默认盒子模型
使用box-sizing属性可以改变盒子模型,取值“content-box”的盒子为默认盒子模型。
width 属性仅表示盒子内容所占的宽度
height 属性仅表示盒子内容所占的高度
内容区的宽:width
内容区的高:height
盒子的宽:width+paddingLeft+paddingRight+borderLeft+borderRight
盒子的高:height+paddingTop+paddingBottom+borderTop+borderBottom
所占屏幕空间的宽:width+paddingLeft+paddingRight+borderLeft+borderRight +marginLeft+marginRigh
所占屏幕空间的高:height+paddingTop+paddingBottom+borderTop+borderBottom+marginTop+marginBottom
内容盒子也称为普通盒子,其特点为:当我们为一个盒子指定width属性的时候,实际上width仅为内容的宽度,当padding和border变大的时候,内容宽度不变,盒子所占的总体宽度要变大。
边框盒子(IE盒子模型)
IE盒子使用box-sizing属性可以改变盒子模型,取值“border-box”的盒子为边框盒子模型。
内容区的宽:width-paddingLeft-paddingRight-borderLeft-borderRight
内容区的高:height-paddingTop-paddingBottom-borderTop-borderBottom
盒子的宽:width
盒子的高:height
所占屏幕空间的宽:width+marginLeft+marginRight
所占屏幕空间的高:height+marginTop+marginBottom
边框盒子也称为怪异盒子,其特点为:当我们为一个盒子指定width属性的时候,实际上width包含了border和padding的宽度,如果border不变,padding变大,这时候内容会变小。
有什么错误请在评论区写下大佬们宝贵的建议