CSS盒子模型的概念

• 它是由内容区域、内间距区域、边框区域和外边距区域构成的

  • content
  • padding
  • border
  • margin

• 根据 box-sizing 属性的不同，盒子的宽高计算方式也不相同

  • 默认： box-sizing: content-box
  • box-sizing: border-box

• 有块级盒子和行内盒子两种

  • 块级盒子可以设置宽高值，padding 和 margin 则都会生效并且挤占空间。
  • 行内盒子无法手动设置宽高，并且垂直方向上的 padding 和 margin 虽然能够设置生效，但并不会挤占其他盒子的空间，会导致重叠。不过水平方向上的则会挤占其他盒子的空间:

• 可以通过设置外部和内部显示类型改变布局方式

  display: flex;
  display: grid;	
  display: inline-block;
  

• 还有一种特殊盒子 - 替换元素

  • 替换元素有 <img> 、 <iframe> 、 <video> 等

  • 替换元素不受当前页面css样式影响，但可以通过 CSS 来控制替换元素在盒子中的位置

  • 例如图片中：

    object-fit: cover;  // 图片等比例占满整个盒子，裁掉显示不下的部分
    object-position: center; // 设置图片在盒子中的位置，可以是靠下或者居中等
    

• 最后我们了解到了盒子的边距塌陷的情况

  • CSS 盒子模型中，如果给两个盒子同时设置外边距，那么它们最终的距离很可能并不是两个盒子的外边距之和，这种情况会发生在相邻盒子之间，也会发生在父子盒子之间。当它们同时设置了边距时，如果都是正数，则取最大值，如果相同，则取其中之一，如果有正有负，则取最大的正数加上最小的负数之和，如果都是负数，则取最小值。
  • 如果两个盒子之间有 border、padding 或者 BFC 的话，就不会有边距塌陷