css盒模型

CSS盒模型

内容盒子(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+marginRight

所占屏幕空间的高：

height+paddingTop+paddingBottom+borderTop+borderBottom+marginTop+marginBottom

边框盒子(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变大，这时候内容会变小

盒子模型注意点（经典面试题）

1. 如果两个盒子是嵌套关系, 那么设置了里面一个盒子(子元素)顶部的外边距, 外面一个盒子(父元素)也会被 顶下来

   /* 结果是两个元素都会下移 */
   <style>   
      	.outer{
        	width: 100px;
        	height: 100px;
        	background-color: pink;         
        }
        .inner{
            width: 40px;
            height: 40px;
            background-color: blue;
            margin-top: 20px;
        }
   </style>
   

   原因：因为父元素的第一个子元素的顶部外边距margin-top如果碰不到有效的border或者padding，就会不断一层一层的找自己父元素的麻烦。只要给父元素设置一个有效的border或padding就可以有效的管制这个margin-top，防止它越级，把自己的margin-top当成父元素的margin-top执行

2. 如果外面的盒子不想被一起顶下来,那么可以给外面的盒子添加一个边框属性

3. 在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin，margin本质上是用于控制兄弟关系之间的间隙的

4. 只有普通文档流中块框的垂直外边距才会发生外边距合并，行内框、浮动框或绝对定位之间的外边距不会合并

5. 在嵌套关系的盒子中, 我们可以利用margin: 0 auto;的方式来让里面的盒子在外面的盒子中水平居中

6. margin: 0 auto; 只对水平方向有效, 对垂直方向无效（垂直方向需要计算）