Understand the box model, and the basic methods of box model's frame, internal and external margins, horizontal layout, vertical layout, setting floating, and dealing with height collapse

One 、 Horizontal layout ：

     margin-left+ border-left + padding-left+ width +padding-right+ border-right +margin-right
      Horizontal direction this 7 The sum of values must be equal to the width of its parent element content
      30+5+20+100+20+5+？ = 600   If there is an inequality , The browser will adjust this by itself 7 It's worth , So that the equation holds , This process is called overconstraint
How to adjust ：
1、 Of the seven values , without auto, Then adjust margin-right
2、 There are three values that can be set auto    margin-left width  margin-right
        1 individual auto
       margin-left  margin-right  width
  If there is a auto, Others are fixed values , Then the browser will adjust this auto
       2 individual auto
       margin-left width       adjustment width
       width  margin-right     adjustment width
       margin-left  margin-right     Adjust the browser by half , This will center the box horizontally
     
3 individual auto
      margin-left width  margin-right   adjustment width
summary ：
      as long as width by auto, The browser will definitely adjust widthwidth>right>left
 
Two 、 Vertical layout ：
    top+margin-top+borfer-top+padding-top+width+padding-bottom+border-bottom+margin-bottom+bottom= The height of the content block containing the block
    Adjustment is the same as horizontal layout
​
 <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>
 
​

3、 ... and 、 float ：
      Optional value
     float: Optional value
：none The default value is , No floating
     left Float left
      right Floating to the right
            The characteristics of floating ：1. The element breaks away from the standard document flow , Move up the following elements
        Realize text surround picture display , So floating elements will overwrite the elements of the standard stream , But the element text content will not be overwritten
           2. The floating element will not exceed the parent element
           3. Setting the floating of row elements will change the properties of elements , Become a block element
  Four 、 Remove the floating :
        clear :
    Optional value ：none Default , Unclear floating
           left Clear left float
           right Clear right float
           both Clear the side that has the greatest impact on it  -->
    A high degree of collapse ：
        What is it? ？
        solve 1. Set the height of the parent element , However, it is not recommended to adapt to a high level of sub elements .
        solve 2. Remove the floating , It is to clear the two side floating influence of the influence element
        solve 3： Turn on the parent element's BFC（ Block level environment ）,css Shadow attribute ,
             a. The parent element floats , Itself out of the document stream , Affect the layout behind ,, No width and height , The width and height of the parent element are supported by the content by default , Not recommended
             b. The parent element is set as an inline block element , No width and height , The width and height of the parent element are supported by the content by default , Not recommended
             c. Parent element Settings overflow Not visible, Recommended settings hidden/auto
             d. Parent element location （ I haven't learned yet ）
        solve 4. Add a non floating element at the end of the parent element , Clear the floating on both sides of the element ,
             a. stay html Add elements directly to , Then clear the float , But this will disrupt html Structure , Not recommended
             b. Add elements through pseudo classes , Set element properties and clear floats , It won't disturb html Structure , It is recommended to use and solve the problem of outer margin coincidence