CSS box model and HTML element display mode

cjh_ code 2021-11-25 15:23:44

The box model :

        css The box model is essentially a box , Encapsulates the HTML Elements , From the inside out, it includes : Content 、 padding 、 Frame 、 Margin . The box model allows us to place elements around it , Including other box models . A page consists of several small boxes .

  Solve the collapse of vertical outer margin :

         What is vertical outer margin collapse : Block elements of two nested relationships , When the child element has an outer margin , It will cause the collapse of the parent element

solve :

  1. You can give the parent element a transparent border (border:1px solid transparent)
  2. You can define an inner margin for the parent element
  3. You can add overflow:hidden( Overflow hidden )

Display mode of elements :

  • Block-level elements :

  1. Monopolize one line
  2. You can set the width and height
  3. If the width is not set , The default is the parent element 100%
  4. Can contain other elements
  • Inline elements :

  1. Multiple elements are displayed on one line
  2. You can't set the width and height
  3. Width and height are determined by the size of the content
  4. Can only contain inline elements
  • Inline block element :

  1. Multiple elements are displayed on one line
  2. You can set the width and height
  3. If the width and height are not set, the default is determined by the content

Conversion of display mode : 

display:block( To block level elements )

display:inline( Convert to inline element )

display:inline-block( Turn to inline block elements )

 

Please bring the original link to reprint ,thank
Similar articles

2021-11-25

2021-11-25

2021-11-25

2021-11-25

2021-11-25

2021-11-25

2021-11-25