Box model (2)

all HTML Elements can be seen as boxes , stay CSS in ,"box model" The term is used in design and layout .

CSS The box model is essentially a box , Encapsulate the surrounding HTML Elements , It includes ： Margin , Frame , fill , And the actual content .

The box model allows us to place elements... In the space between other elements and the surrounding element borders .

1. Horizontal layout

  horizontal direction

  margin-left border-left padding-left width padding-right border-right  margin-right

  Browser rules   The sum of the seven values in the horizontal direction must be equal to the width of the parent element content area

 0  5px  50px  100px  50px  5px  0    ==500   ?

  Like the above , If not equal to , The browser will adjust this by itself 7 It's worth , Let our equation hold , This process is called overconstraint

How to adjust the browser ？

1、 If 7 None of the values are set auto, Then the browser will adjust margin-right

 0  5px  50px  100px  50px  5px  290px    ==500

2、7 Among the values are 3 Values can be set auto   margin-left    width   margin-right

   1 individual auto, The other two values are fixed

      The browser will adjust this auto  

   2 individual auto, other 1 Values are fixed

     margin-left  width       adjustment width

     width  margin-right     adjustment width

     margin-left  margin-right   meanwhile margin-left margin-right, Each half  

   3 individual auto

      margin-left  width  margin-right   adjustment width

2. Shadows and fillets

 box-shadow

              Used to set the shadow effect of an element , It will not affect the page layout

                The first value is ： Horizontal offset   just -> Left   negative -> Right

                Second value ： Vertical offset   just -> Next   negative -> On

                Third values ： Blur radius   The default value is 0px

                Fourth values ： Color     The default value is the background color of the box

 border-radius: ;   Set the fillet effect

        border-radius:50%; Set circle

3. Inline element box model

Inline element box model

    content   Width and height cannot be set directly , Supported by content

    padding   You can use the inner margin , But the vertical direction will not squeeze others , That is, it will not affect the layout of the page

    border     You can set the border , But the vertical direction will not squeeze others , That is, it will not affect the layout of the page

    margin     The outer margin can be set on the left and right , The vertical direction cannot be set

4. The problem of overlapping of outer margins

1> The problem of overlapping outer margins in the vertical direction of brother elements

    1、 Both are positive , Then who listens to who

    2、 If both are negative , Whose absolute value is greater , Listen to who

    3、 If one is positive and one is negative , Then listen to the result of adding the two

  In general , The problem of overlapping outer margins of sibling elements , No additional solution is needed , It is conducive to our development

2>

  A solution to the overlapping of outer margins between father and son  

Scheme 1  

     border: 1px solid transparent; 

Option two ： Open the element BFC attribute

       overflow: hidden;

        margin-top: 100px;

5. Box size problem

  By default ： The size of the visible width of the box is determined by the content area , padding , The border determines

            box-sizing   The calculation used to set the size of the box  width/height Who is it

                Optional value ：

                    content-box Content area The default value is

                    border-box   Width and height are used to set the size of the visible box of the whole box , Including borders ,padding, Content area