盒子模型：

盒子尺寸的计算：

box-sizing：border-box

开启box-sizing：border-box 后是设置 width 和 height 的是最终的盒子宽度和高度，一样不算外边距！

替换元素：

替换元素加载的是外部元素，并不会受到现有的CSS影响,不过可以通过替换元素控制在盒子中的位置！下面是常见的替换元素

iframe

在盒子中内嵌页面

img

可以自己设置盒子的宽高，再通过object-fit：cover，让图片等比例占满整个盒子，裁掉显示不下的部分，再通过object-position：center，更改图片在盒子中显示的位置

盒子的布局方式:

块级盒子可以手动设置宽高，并且水平和垂直方向的外边距和内边距可以生效，并且会挤占其它盒子空间, 并且独占一行

行内盒子无法手动设置宽高，并且垂直方向的外边距和内边距可以生效，但不会挤占其它盒子的空间，会导致重贴，不过水平方向会，宽度默认自身内容宽度

盒子的布局方式

边距塌陷

CSS盒子模型中，如果给两个盒子同时设置外边距，那么它们最终的距离很可能不是两个盒子外边距之和，这种情况叫边距塌陷。

如果上边距塌陷的盒子中间有borer padding bfc 就不会有边距塌陷

如过下边距塌陷的盒子中间设置了borer height line-height 就不会塌陷