CSS盒模型

1.1 外边距问题

典理情形一：

• 结构关系：嵌套块元素的垂直外边距塌陷

• 问题描述：当父元素没有padding，margin，border时子元素与父元素直接相邻、子元素的margin值会传递给父元素并且再次与父元素的margin值发生合并最终的结果是正值取两者中的较大值，负值取绝对值较大的值。

• 表现：父子元素公用一个外边距

  .parent{
      width:100px;
      height:100px;
      background-color:red;
      
  }
  .child{
      width:100px;
      height:100px;
      background-color:green;
      
      margin-top:100px;
      margin-bottom:100px;
  }
  ​

​​

• 解决方法

  • 给父元素设置边框或内边距（慎用）

  • 父元素overflow:hidden，改变规则

典型情形二：

• 结构关系：相邻元素垂直外边距合并

• 问题描述：当两个块级兄弟元素垂直方向上的margin值直接相遇，会发生合并，最终结果是正值取两者中的较大值，负值取绝对值较大的值

• 表现：两个外边距合并成一个

  .box1{
      width:100px;
      height:100px;
      background-color:red;
      margin-bottom:100px;
  }
  .box2{
      width:100px;
      height:100px;
      background-color:green;
      margin-top:100px;
  }
  <div class="box1">
     <div class="box2"></div>
  </div>

• 解决方法

  • 尽量只定义其中一个的margin值

  • 给其中一个盒子加父元素overflow:hidden，改变渲染规则

• 其他情况同上【简单带过如后代元素出现同类问题等】

1.2 总结

• 设问通过对盒模型的实际使用对比出它与快递盒子的不同之处

• 总结盒子模型占位的计算：width/height + padding + margin

• 提示学生注意实际开发的过程中要明确测量的宽高是内容宽还是包括了padding的占位宽高

• 垂直方向上相遇的margin值出现折叠问题