CSS盒子模型仅仅是一个形象的比喻,每一个可见的HTML元素都是一个盒子,一个盒子由外到内可以分成四个部分:margin(外边距)、border(边框)、padding(内边距)以及content(内容)。
我们可以发现margin、padding和border都是CSS属性,它们三是用来控制盒子的边距边框,而content就是描述HTML元素的内容,通过width/height属性设置content的宽度和高度。
内容盒子(W3C盒子)
默认盒子模型 W3C盒子
- 使用box-sizing属性可以改变盒子模型,取值“content-box”的盒子为默认盒子模型。
- width 属性仅表示盒子内容所占的宽度
- height 属性仅表示盒子内容所占的高度
W3C盒子
内容区的宽 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”的盒子为边框盒子模型。
IE盒子
内容区的宽 width-paddingLeft-paddingRight-borderLeft-borderRight
内容区的高 height-paddingTop-paddingBottom-borderTop-borderBottom
盒子的宽 width
盒子的高 height
所占屏幕空间的宽 width+marginLeft+marginRight
所占屏幕空间的高 height+marginTop+marginBottom
边框盒子也称为怪异盒子,其特点为:当我们为一个盒子指定width属性的时候,实际上width包含了border和padding的宽度,如果border不变,padding变大,这时候内容会变小。
盒子模型注意点
如果两个盒子是嵌套关系, 那么设置了里面一个盒子(子元素)顶部的外边距, 外面一个盒子(父元素)也会被 顶下来。
原因
子元素和父元素上边框重合在一起。
因为父元素的第一个子元素的顶部外边距margin-top如果碰不到有效的border或者padding,就会不断 一层一层的找自己父元素的麻烦。只要给父元素设置一个有效的border或padding就可以有效的管制这个 margin-top,防止它越级,把自己的margin-top当成父元素的margin-top执行。