常规流，浮动流，定位，css:width:auto和margin：auto以及了解margin盒子塌陷

当在常规流下：

1）设置盒子width或margin为auto时，这时候子盒子会吸收所有父盒子未设置的宽度，不影响高（这就是设置margin：0 auto；会居中的原理）；设置padding为auto不起作用
2）同时设置width和margin为auto时，这时width会抢走所有的父盒子未设置的宽，margin不起作用

在浮动流下：

设置盒子width或margin为auto时，不起作用（因为脱离文档流），只有里面有内容时才能撑开盒子，否则的话margin或width为0；非常规流下，外边距不会合并（margin）

定位（绝对定位，相对定位，固定定位）

一个元素，只要position的取值不是static，认为该元素是一个定位元素。定位元素会脱离文档流（相对定位除外），脱离文档流后浮动和常规盒子会被定位元素压着，可以设置z-index来改变（z-index设置为负数的话，会被文档流和浮动覆盖）相对定位的偏移量相对现在位置偏移；但是不会影响别的元素
绝对定位和固定定位都会改变让元素变成块盒，绝对定位子绝父相，用来做精准定位（子元素绝对定位，父元素相对定位；子元素会相对父级元素的第一个定位元素来定位，父级没有定位元素的话就相对html定位）；固定定位相对浏览器视口做定位（一般用于广告、弹窗）；

想要左右居中显示的话可以left和right偏移量都写上0，margin：auto；
想要上下居中显示的话可以top和bottom偏移量都写上0，margin：auto；

设置margin塌陷

 <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: rgb(211, 31, 31);
    }
    .box div{
      margin: 20px 0;
      width:50px;
      height: 50px;
      background-color: rgb(74, 36, 134);
    }
 </style>
 <div class="box">
    <div></div>
 </div> 

你会发现父元素盒子塌陷了，原理:父子嵌套元素在垂直方向的margin,父子元素是结合在一起的,他们两个的margi会取其中最大的值，（兄弟元素之间也会取最大值）解决办法：
1）给父元素加边框（不推荐使用）
2）给父元素设置padding（不推荐使用）
3）触发BFC；父盒子设置下面四种之一（但是用的时候会有不同的影响，需要具体情况使用）
float的值不为none；
overflow的值不为visible；
position的值为fixed / absolute；
display的值为table-cell / table-caption / inline-block / flex / inline-flex

BFC（块级格式化上下文 Block Formatting Context）

它是一块独立渲染的区域，它规定在该区域中常规流块盒的布局
不同的BFC区域渲染时互不干扰
创建的BFC区域隔绝了内部核外部的联系，内部渲染不会影响外部规则
1）创建BFC元素时，需要计算内部浮动元素（清除浮动，一般还是建议利用伪类来清除浮动）
2）创建BFC元素时，他的边框不会与浮动元素重叠
3）创建BFC元素时，不会和子元素合并坍塌