认识盒子模型，盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法

一、水平布局：

     margin-left+ border-left + padding-left+ width +padding-right+ border-right +margin-right
     水平方向这7个值相加必须等于其父元素内容的宽度
      30+5+20+100+20+5+？ = 600   如果出现不等于的情况，浏览器就会自己调整这7个值，从而让等式成立，这个过程叫过度约束
如何调整的：
1、七个值当中，如果没有auto，那么就调整margin-right
2、有三个值可以设置auto    margin-left width  margin-right
        1个auto
       margin-left  margin-right  width
 如果有一个auto，其他的为固定值，那么浏览器就会调整这个auto
       2个auto
       margin-left width      调整width
       width  margin-right     调整width
       margin-left  margin-right    浏览器各调整一半，从而会让盒子水平居中
     
3个auto
      margin-left width  margin-right   调整width
总结：
      只要width为auto，浏览器肯定会调整widthwidth>right>left
 
二、垂直布局：
    top+margin-top+borfer-top+padding-top+width+padding-bottom+border-bottom+margin-bottom+bottom=包含块的内容块的高度
    调整与水平布局一样
​
 <style>
        .div1 {
            width: 300px;
            height: 300px;
            background-color: coral;
            position: relative;
        }
        
        .son1 {
            width: 50px;
            height: 50px;
            background-color: cornflowerblue;
            position: absolute;
            left: 0;
            right: 0;
            /* margin: 0 auto; */
            top: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
 
​

三、浮动：
     可选值
     float: 可选值
：none 默认值，没有浮动
     left 向左浮动
      right 向右浮动
            浮动的特点：1.元素会脱离标准文档流，下面元素的上移
        实现文字环绕图片显示，所以浮动元素会覆盖标准流的元素，但是不会覆盖元素文字内容
           2.浮动元素不会超过父元素
           3.行元素设置浮动会改变元素性质，变成块元素
  四、清除浮动:
        clear :
    可选值：none 默认，不清楚浮动
           left 清除左浮动
           right 清除右浮动
           both 清除二边对它影响最大的一侧浮动  -->
    高度塌陷：
        是什么？
        解决1.设置父元素高度，但是不能自适应子元素的一个高不推荐。
        解决2.清除浮动,是清除影响元素的二侧浮动影响
        解决3：开启父元素的BFC（块级化环境），css影藏属性，
             a.父元素浮动,本身脱离文档流，影响后面的布局，，不设置宽高，父元素宽高默认由内容撑开，不推荐
             b.父元素设置为行内块元素，不设置宽高，父元素宽高默认由内容撑开，不推荐
             c.父元素设置overflow非visible,推荐设置hidden/auto
             d.父元素定位（暂没有学到）
        解决4.父元素最后添加一个非浮动元素，清除该元素二边浮动，
             a.在html中直接添加元素，再清除浮动，但这样会打乱html的结构，不推荐
             b.通过伪类添加元素，设置元素属性和清除浮动，不会打乱html的结构，推荐使用和解决外边距重合问题结合