盒子模型：
盒子尺寸的计算：
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 就不会塌陷
