本文已参与「新人创作礼」活动，一起开启掘金创作之路

​

 水平布局：

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

    <style>
      .outer {
        width: 600px;
        height: 200px;
        border: 10px red solid;
      }

      .inner {
        width:100px;
        height: 100px;
        background-color: #bfa;
        border: 5px dashed green;
        padding: 0px;
        /* margin-left: auto;
        margin-right:auto; */
        margin: 0px auto;
      }
    </style>
    


        body>
    <div class="outer">
      <div class="inner"></div>
    </div>
  </body>

​

一、水平布局：

     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的结构，推荐使用和解决外边距重合问题结合

​