The box model

Box model is particularly important in CSS learning, a deep understanding of the box model is conducive to the level of CSS development hints, in the development of difficult to understand the phenomenon, often because of the lack of understanding of the model.

The term Box model comes from the English word Box modelmodel. How do we understand the box model? I think we can call any label that has something else inside it a box. For example, div, P, SPAN, etc., can be added to a box model, while img, input, etc., which cannot contain other elements, can be called a box.

Composition of the box model

The standard box model consists of a margin area, a border area, an inner margin area, and content.

If we click on any web page and press F12, we'll see the box model.

We can see several properties in the box model

  • Margin: Extends the border area with white space to separate adjacent elements, also known as margins

  • Border: border

  • Padding: The distance between the content and the border, also known as the inside margin

  • Content: The area in which elements can be placed, such as text images, etc. The general setting width height refers to the width and height of the content.

Let’s start with the border

A border

The border is defined using the border attribute, which requires us to manually add three parameters to it.

The three parameters are the width, style and color of the border.

border: 1px solid red;
Copy the code

The default border for an empty element looks like this

We start by trying to add text content to the div tag

<div class="box">I'm text content</div>
Copy the code

When there is text content, the border wraps the text content

Since the div tag is a block-level element, its default width is %100. So you get this whole line of borders

You can change the width of the div tag to make the border look better.

.box{
    width: 100px;
    border: 1px solid red;
}
Copy the code

The second parameter of the boder property changes the style of the border.

There are so many styles that can be modified that interested friends can try them slowly

More on borders can be found in this article

From the outside

When we look closely at where the black arrow is pointing, we see that the border doesn’t fit the page.

There is a certain gap between the border and the web page, as for why there will be a gap I believe that those who read the above seriously should have guessed.

This gap is our margin area, and setting the margin creates extra “white space” outside the element.

The easiest way to set margins is to use the margin property, which accepts any unit of length, percentage value, or even negative value.

Some tags have a default value for a margin attribute, such as the body tag that wraps the div tag.

Let's hit F12 and select the Body tag.

We found that the body tag does have a default margin of 8px

We just need to clear the value of the margin to make the border fit the page

body{
    margin: 0;
}
Copy the code

As can be seen from the box model of body above, the margins are divided into upper, lower and left.

If we add only one length unit to the margin attribute, the default is four margins.

And that’s why all we need to do to clear the margins in all four directions is specify a unit of length.

Is it possible to specify margins in the upper, lower, and left directions?

Of course it is

If we specify two arguments, the first argument defaults to the upper and lower margins and the second argument to the left and right margins.

margin: 100px 200px;
Copy the code

If we specify four parameters, these four parameters correspond to the margin parameters of the top, right, bottom, and left positions

margin: 100px 200px 300px 400px;
Copy the code

It's actually a clockwise order, it doesn't go up, down, left, or right.

Margins are also nice because they allow us to center our elements horizontally

This operation requires that the element be a block element and that the width be fixed

margin: 0 auto;
Copy the code

In addition to using the margin attribute to define the four margin parameters, we can also use the following four attributes to specify them separately.

margin-top: 100px;
margin-right: 200px;
margin-bottom: 300px;
margin-left: 400px;
Copy the code

The effect is the same.

padding

An inside margin is the distance between the content and the border, and much of what we’ve done above about margins applies to inside margins.

padding: 100px 200px 300px 400px; orpadding-top: 100px;
padding-right: 200px;
padding-bottom: 300px;
padding-left: 400px;
Copy the code

The difference between the standard model and IE model

Box-sizing is set to content-box; width and height are set to content-box.

The IE model refers to the box model with box-sizing as border-box. Width and height is content + padding + border;

The default box model is the standard model, i.e. Box-sizing: content-box;

To set up the IE model we need to change the Content-box to border-box

Margins overlapping

Margin collapse occurs when the adjacent boundaries of two or more boxes (which may be adjacent or nested) (without any non-empty content, padding, or border between them) overlap to form a single boundary.

Margins of parent and child elements overlap

First, let’s explain when margin overlap occurs between parent and child elements. Now consider the case where the parent element contains a child element. Margin overlap occurs when the child element has margin, border, and padding set to 0.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent {
            background: #e7a1c5;
        }
        .parent .child {
            background: #c8cdf5;
            height: 100px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child">

    </div>
</div>
</body>
</html>
Copy the code

As you can see from the code above, our div tag does not define the border and padding attributes and does not have a default value.

Then there should be what we call margin overlap

If there is no border or padding between the margin-top of a block element and the margin-top of its first child element, Or if there is no border or padding between the margin-bottom of a block element and the margin-bottom of its last child element, the margin will collapse. Excess margins of child elements are truncated by margins of parent elements.

Let’s try to define a border to see if we can solve the margin overlap problem

border: 1px solid red;
Copy the code

It does solve this problem, which means we just need to separate the parent and child elements by one layer.

When we define marine-top for both parent and child elements, we take a larger margin-top value.

.parent {
    background: #e7a1c5;
    margin-top: 60px;
}
.parent .child {
    background: #c8cdf5;
    height: 100px;
    margin-top: 100px;
}
Copy the code

Margins of adjacent elements overlap

When we talk about margin collapse it’s not actually the case up here.

It’s something like this

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .blue{
            background: blue;
            height: 20px;
            margin-bottom: 110px;
        }
        .parent {
            background: #e7a1c5;
            margin-top: 60px;
        }
        .parent .child {
            background: #c8cdf5;
            height: 100px;
            margin-top: 100px;
        }
    </style>
</head>
<body>
<div class="blue"></div>
<div class="parent">
    <div class="child">

    </div>
</div>
</body>
</html>
Copy the code

We define another element on the parent element. If the marine-bottom of the element is greater than or equal to the final margin-top obtained after the margin overlap of the parent element, the margin-top of the parent element will not work. This is often called margin collapse.

The boundaries of empty elements overlap

If we define an empty element that has a margin, but no border or padding then the top and bottom margins will bump into each other and the two will merge.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8"> < span style>.box{
            margin-top: 20px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
Copy the code

Prevent vertical margin overlap

One way to solve these problems is to create BFC. The full name of BFC is Block Formatting Context.

  • The elements in the same BFC influence each other, and margin collapse may occur.
  • The BFC is a separate container on the page, and the child elements inside the container do not affect the outside elements and vice versa;
  • When calculating the height of the BFC, all elements contained in the BFC, including floating elements, are considered.
  • [Fixed] The floating box area is not superimposed on the BFC

That is, we just need to put overflow: hidden in the parent or adjacent element; Can.

floating

In CSS, there are block-level elements and inline (inline) elements.

Block-level elements are displayed on a single line while inline elements remain displayed on the same line as the previous content.

The common definition for block-level elements is div and for inline elements span

Block-level elements can contain inline elements and not vice versa.

<div class="div1">block-level</div>
<div class="div2">The element</div>

<span class="span1">inline</span>
<span class="span2">The element</span>
Copy the code

When we open a web page in everyday life, we can see that it is not a standard top-down document flow layout like the HTML we write.

In this page, multiple block-level elements are placed in the same line. This effect can be achieved by floating

float

Float elements are also known as float elements, and elements with a float attribute float to the left or right depending on the value of the attribute. Floating elements are detached from the normal document flow, but floating elements affect more than themselves; they affect the alignment of surrounding elements around them. Simply put, let the block element ignore the float element and let the inline element flow around the float element to create a floating layout. As follows:

Floating characteristics

Regardless of whether an element is inline or block-level, if floated, the floating element generates a block-level box that can be set to width and height, so float is often used to make menus with horizontal columns that can be sized and arranged horizontally.

Text-wrap images are typically used for float, where the IMG element is set to float: left, leaving the document flow to the left. The P element ignores the IMG element and flows in from the top left corner of the window, but the text in the P element is aware of the IMG element and flows in around the image. And the IMG element floats on top of the P element.

<body>
<div class="div1">
    <img src=".. /.. /resources/image/5.jpg" >
</div>
    <p>Text-wrap images are typically used for float, where the IMG element is set to float: left, leaving the document flow to the left. -------------------------------------------------------------------------- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- and p element to ignore the existence of the img element, through the window into the upper left corner, But the text in the P element is aware of the img element and flows around the image. -------------------------------------------------------------------------- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- and the img element is floating on the upper deck of the p element. -------------------------------------------------------------------------- --------------------------------------------------------------------------</p>
</body>
Copy the code
div{
    float: left;
}
Copy the code

The IMG element floats on top of the P element (out of the normal stream)

Out-of-normal flow means that its parent container cannot find floating elements when calculating the width and height. That is, the parent container is not propped open by floating elements inside;

We added a border to the body tag and scaled the page to normal proportions (we scaled the page down for display).

If that doesn’t make sense, we add an inner margin and border to the IMG attribute

div{
    float: left;
    border: 5px solid #8d8b8b;
    padding: 10px;
}
Copy the code

The idea that the IMG element floats on top of the P element is easier to understand by looking at the red body border underneath the inner margin.

Add a background color to the body.....

By default, block-level elements are 100% wide. Once you float block-level elements, they immediately become enveloping like inline elements, and the width ADAPTS to the content.

That is, if we can’t fit so many block-level elements floating in the same row on our page, the extra block-level elements will be moved to the next row.

Let’s make several copies of the img element above to see if this is the case.

Let’s zoom in and out

That's true

There is also a stuck situation

We deleted some of the img elements that were copied and added colored borders and left floats for the remaining three IMG elements.

Add the height attribute to the first IMG element, which is greater than the height of the image itself.

.div1{
    height: 250px;
    float: left;
    border: 5px solid #64b373;
}
.div2{
    float: left;
    border: 5px solid #4c4cf8;
}
.div3{
    float: left;
    border: 5px solid #f1f168;
}
Copy the code

If we zoom the page at this point, the yellow border of the IMG element goes to the next line.

Normally, the yellow border img element would go under the green border IMG element, but this is not the case

Confirmation:

Render the document from top to bottom from the perspective of the browser.

After rendering the green and blue border img elements, rendering the yellow IMG element does not fit the right side.

When it gets to the next line, it starts to move to the left against the bottom edge of the blue border IMG element. When the move hits the bottom corner of the green border IMG element, it can’t move and it’s stuck.

So when we set the height differently, we get a “stuck” situation.

Remove the floating

With some of the features mentioned above, I’m sure it’s clear that floating doesn’t work everywhere.

Because of the floating nature of the development we will inevitably encounter backfire situations, such as the parent container height collapse, layout chaos as the page zoom……

So at some point we need to clear the float

The Clear property

This property provides some values for us to call

  • none

    • The element will not move down to clear the previous float.

  • left

    • The element is moved down to clear the previous left float.

  • right

    • The element is moved down to clear the previous right float.

  • both

    • The element is moved down to clear the previous left and right float.

  • inline-start

    • This keyword indicates that the element is moved down to clear the float on the beginning side of its containing block. Float to the left or right of an area.

  • inline-end

    • This keyword indicates that the element is moved down to clear the floating point at the end of its containing block, that is, floating to the right or left of a region.

There are many ways to clear a float. We can add the clear attribute to the float element.

<div class="clear" style="clear: both"></div>
Copy the code

Before the clear attribute is added:

After adding:

When the float is cleared with clear, it preserves the block-level element and the float effect, that is, it occupies a single column just like the block element and does not split the parent element just like the float element.

Overflow

Add overflow: Hidden to the container of floating elements; Or overflow: auto; You can clear floats, and in IE6 you also need to trigger hasLayout, such as setting the container width or zoom:1 for the parent element. After the overflow property is added, the float element goes back to the container layer and pushes up the container height to clean up the float.

Add a float for the container as well

Adding a float attribute to the container of a float element clears internal floats, but this will make it float as a whole, affecting the layout and is not recommended

Add an empty element

We can also add an empty element after the floating element and give it a clear attribute.

This also helps to clear up the float, but is not recommended because of the trouble.

Using pseudo-elements

We can implement adding an invisible Block element to the end of an element using :after pseudo-element. This also cleans up the float.

As you can see, the pseudo element is at the bottom, and the height from the top is the height of the float element, which incidentally supports the parent element.

Relax your eyes

Smuggle (no

Original picture P station address

Painters home page