What is a box model?

The concept of the box model: The box model is the cornerstone of CSS layout. It defines how web elements are displayed and how they relate to each other.

Composition of box model: Content +padding +border +margin

There are two types of box models: Content-box and border-box

content-box

A content-box is characterized by width being the width of the content.

For example, what is the width of the content in the following code?

<! DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, <title>Document</title> <style>. Content-box {border: 1px solid red; width: 100px; padding :10px; margin: 15px; box-sizing: content-box; } < / style > < / head > < body > < div class = "content - box" > hello < / div > < / body > < / HTML >Copy the code

Obviously, this is a Content-box, so the content is the width of width, which is 100px.

border-box

<! DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, <title>Document</title> <style>. Content-box {border: 1px solid red; width: 100px; padding :10px; margin: 15px; box-sizing: border-box; } < / style > < / head > < body > < div class = "content - box" > hello < / div > < / body > < / HTML >Copy the code

If the border – sizing: border – box; Width =content+padding+border=100px, so content = 78px.

The difference between content-box and border-box is that the width of the content-box contains only the content, while the width of the border-box contains the border (width=content+padding+border).

Margin merging

  1. Merging between child elements and child elements
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta Name ="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> 1px solid red; } .child1{ border: 1px solid blue; margin-bottom: 50px; } .child2{ border: 1px solid yellow; margin-top: 50px; } </style> </head> <body> <div class="parent"> <div class="child1"> <div class="child2"> </div> </div> </body> </html>Copy the code

The margin-bottom and margin-top of the upper and lower face elements are merged between child elements. If you don’t want this combination, just add a sentence to the child elementdisplay:inline-blockandwidth=100%Will do.

  1. Margin merge of parent and child elements
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta Width ="width=device-width, initial-scale=1.0"> <title>Document</title> <style>. 50px 0; } .child{ border: 1px solid blue; margin: 50px 0; } </style> </head> <body> <div class="parent"> <div class="child"> </div> </body> </html>Copy the code

The parent element is merged with the margin-top of the first child element and the margin-bottom of the last child element.

How to prevent margin merging of parent and child elements?

  1. Add a padding to the parent element.
  2. Add a border to the parent element.
  3. Add one to the parent elementoverflow:hidden;

Margin merging of parent and child elements can be cancelled using the above three methods.