This post will introduce the box model from the following aspects

1. Standard box model and weird box model 2.CSS how to set these two models 3. Margin merge 4.BFC 5. Height collapse

1. Basic concepts

The basic concepts of the box model are familiar, from inside out content (padding), border (margin) and standard (W3C) box model (IE) box model.

width
height
width
height
width
height
content
padding
border
<! Doctype html>

2. How to set up two box models

1. When we write
is declared, the box model is resolved to the standard box model regardless of the browser kernel. Width = content. That is, the width we set separately is only displayed on the content. For example, if I set CSS style width: 100px, the 100px refers to the content width only. The total width is equal to content+ padding+ border 2. However, browsers with a partial IE kernel will trigger a weird model (IE6,7,8) when the declaration is not written or lost, width= content+ padding+ border is the combined width of three. Total width = width

In CSS3 we can switch between standard box and weird box models by setting box-sizing properties.

/* Standard box model */
box-sizing:content-box;

 /* Weird box model */
box-sizing:border-box;
Copy the code

3. Merge margins

The so-called margin merge, also known as margin merge, is defined by MDN as:

The upper and lower margins of block-level elements sometimes merge (or collapse) to the largest margin, which is called margin collapsing (sometimes translated as margin consolidation). Note that margins for float elements and absolutely positioned elements do not collapse.

Note that margin merges are at the top and bottom of the block-level elements, which means that margin merges only in the vertical direction of the block-level elements.

There are several cases of margin merging

Adjacent sibling element code:

	<! -- HTML code -->
	<div class="up">I'm the box on top</div>
    <div class="down">I'm the box below</div>
Copy the code
/* CSS code */
div.up{
        width: 100px;
        height: 100px;
        margin: 100px;
        background: #ff6600;
    }
    div.down{
        width: 100px;
        height: 100px;
        margin: 100px;
        background: aquamarine;
    }
Copy the code

We should think the two elements should be 200px apart, but they are 100px apart

Father and son elements

code

  <! -- HTML code -->
    <div class="parent">
        <! -- Father's color is orange -->
        <div class="child">I am a son</div>
        <! -- The son's color is light green -->
    </div>
Copy the code
    /* CSS code */
    div.parent{
        width: 200px;
        height: 200px;
        margin-top: 50px;
        background: #ff6600;
    }
    div.child{
        width: 50px;
        height: 50px;
        margin-top: 100px;
        background: aquamarine;
    }
Copy the code

We think the parent box’s margin-top should be 50px and the top of the child box should be 100px away from the top of the parent box, but that’s not the case. MDN gives you three cases, plus an empty block element, which I won’t cover here. In this case, BFC is used to solve the problem

4.BFC

Definition:

A block formatting context is part of a visual CSS rendering of a Web page. It is the area where the layout of the block box occurs and the float interacts with each other.

Understanding: An element with BFC properties can be thought of as a separate container. The elements inside the container do not affect the layout of the elements outside the container. The BFC has properties that normal containers do not have. (When we talk about normal flow, we call it FC.)

How to trigger the BFC:

1. Root element or other element containing it 2. Float (float of element is not None) 3. An absolutely positioned element (the element has position as absolute or fixed) 4. Inline block inline-block(element with display: inline-block) 5. Table cell (element with display: table-cell, default HTML table cell property) 6. Table title (element with display: table-caption, default HTML table title property) 7. Display: flow-root According to the MDN definition, the root element has triggered the BFC, then the BFC will have the following properties 1. 2. The vertical distance of the boxes is determined by the margin. The margins of two adjacent boxes belonging to the same BFC will overlap. To the left of the margin box of the element, touching the left of the border box containing the block (for left-to-right formatting, otherwise the opposite). This is true even if floats exist. The BFC is an isolated container, and the inner child elements do not affect the outer elements. The BFC region does not stack with float and box

The purpose of the landing

1. Adaptive two-column layout 2. Prevent elements from being overwritten by floats 3. 5. Solve the problem of height collapse

5. Height collapse

Now that we’ve talked about height collapse, let’s talk about it briefly

What is height collapse?

The parent element has no size (or height) set. The child element floats, and the child element jumps out of the parent element’s bounds (de-scaling). When the parent element’s height is auto, the parent element’s height is zero. To take one? Code:

  <! -- HTML code -->
    <div class="parent">
        <! -- The father is orange -->
        <div class="child">I am a son</div>
        <! -- The son's color is light green -->
    </div>
Copy the code
     /* CSS code */
    div.parent{
        width: 200px;
        background: #ff6600;
    }
    div.child{
        width: 50px;
        height: 50px;
        background: aquamarine;
        float: left;
    }
Copy the code

The height of the parent box is not supported by the content (if the parent box is not set to height, its height ADAPTS to the height of the child element), resulting in the height of the parent box being 0.

Solution to height collapse

1. Set the height of the parent box

div.parent{
height:200px;
}
Copy the code

2. Parent box Settings:

overflow:hidden;
/ * or * /
overflow:auto;
/* The height of the collapse of the element is normal, there is no picture */
Copy the code

3. Add an empty box to the end of the parent box and set it to clear float

/ * * / CSS code
    div.emptyBox{
        clear: both;
    }
Copy the code
<! -- HTML code -->
    <div class="parent">
        <! -- The father is orange -->
        <div class="child">I am a son</div>
        <! -- The son's color is light green -->
        <div class="emptyBox"></div>
    </div>
Copy the code

Advantages: Easy to understand, easy to master

Cons: Add meaningless tags, not easy to maintain, and violate the standard of separation of structure and presentation

4. Clear float with after pseudo-element

E::after{
        content: "";
        display: block;
        height: 0;
        clear: both;
        overflow: hidden;
        visibility: hidden;
        /* To be on the safe side, write everything you can
    }
Copy the code

Advantages: This method is similar to the third method, but does not add meaningless tags to the page, making the page structure more complete. — — — — — — — — — — — — — — — — — — — — — — — — — — –, the above is my personal in the learning process of the box model and involves the understanding of some knowledge, if great god found where there is a mistake, please correct in a timely manner. First time post, write bad, also please forgive