An article gives you a quick understanding of the box model [classic case]

Today, I'd like to take you to a quick understanding of the box model and go directly to the code:

<!doctype html><html>
    <head>
        <meta charset="utf-8" />
        <title>css Box</title>
        <meta name="keywords" content="key word,key word" />
        <meta name="description" content="" />
        <link rel="stylesheet" href="css/index.css" />
    </head>
    <body>
        <div>my css Box test model</div>
    </body></html>

There is no difficulty in the above code, only a div tag is written. As you know, the div tag is a block level element, so it will occupy a full line:

But we also notice that there are some gaps on the left side of the picture:

This gap should not exist in our expectation. It is basically in margin, padding or border.

Let's first look at the right side of the developer tool:

There's a element.style {}, there is a div tag attribute below, the default display: block. What's up there for? Let's change the code as follows:

< div style = "border: 1px solid red" > My css box test model < / div >

Then refresh the page to see:

Now we'll know. This one element.style That's what we write in the code. But we usually don't write like this, that is, when you write code, it's better to put all the attributes in the css file. Don't let this element.style Anything.

Here is a box:

This box is the specific properties of the current css box, such as width and other information.

  • Margin: outer margin

  • border: border

  • padding: inner margin

That is to say, the size of a complete box model is determined by the values of these three parameters. Now let's change the code:

lesson4.html

< div id = "mydiv" > My css box test model < / div >

The original code is the same, just add an id to the div.

index.css

*{}#mydiv{    width: 100px;    height: 100px;        background-color: #000;        color:#fff;}

Then we refresh the page:

The following box areas also change:

We can see that the content area size has changed to 100 * 100, while padding, border and margin are all 0. Let's modify these three values and see the effect again:

*{}#mydiv{    width: 100px;        height: 100px;        background-color: #000;        color:#fff;        padding: 10px;}

The box size has changed from 100 * 100 to 120 * 120.

padding is the inner margin. We can see that there is a distance of 10 pixels between the text and the edge:

From the above picture, we can see that the padding attribute is also divided into top-down and left-right, padding top and padding bottom.

If the margins are not the same in all four directions, it's a bit cumbersome for us to write four, so we can write as follows:

padding: 10px 20px 30px 40px;

As you can see, the four values from left to right represent: up, right, down, left, that is, the margin of clockwise travel. As long as it is written in this way, it is represented by this clockwise direction.

If you write

padding: 10px 20px;

It's 10px up and down, 20px left and right.

All of these will be known after you try.

Border stands for border.

#mydiv{    width: 100px;        height: 100px;        background-color: #000;        color:#fff;        padding: 10px 20px;        border: 10px solid red;}

border: 10px solid red; it means that the top, bottom, left and right are all 10 pixels, solid lines and red. If you want four borders to be different, you can only write one by one:

#mydiv{    width: 100px;        height: 100px;        background-color: #000;        color:#fff;        padding: 10px 20px;        border-top: 10px solid #f00;        border-left: 10px solid #0f0;        border-right: 10px solid #00f;        border-bottom: 10px solid #bbb;}

After adding border, the box size will also change:

Because now the browser may automatically add margin or padding to your code, we often set the following two property values to 0 in the css file:

html, body{
    margin: 0px;
    padding: 0px;
}

At this point, let's look at the style:

lesson4.html

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <title>Css Box model</title>
    <meta name="keywords" content="key1, key2">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" href="css/index.css"></head><body>
    <div id="mydiv">my css Box test model</div></body></html>

index.css

*{}html, body{    margin: 0px;        padding: 0px;}#mydiv{    width: 100px;        height: 100px;        background-color: #000;        color:#fff;        padding: 10px 20px;        border-top: 10px solid #f00;        border-left: 10px solid #0f0;        border-right: 10px solid #00f;        border-bottom: 10px solid #bbb;}

At this point, the style is close to the edge of the browser:

Sometimes we write:

index.css

*{
    margin: 0px;
    padding: 0px;
}

html,body{
    width: 100%;
    height: 100%;
}

#mydiv{
    width: 100px;
    height: 100px;
    background-color: #000;
    color:#fff;
    padding: 10px 20px;
    border-top: 10px solid #f00;
    border-left: 10px solid #0f0;
    border-right: 10px solid #00f;
    border-bottom: 10px solid #bbb;
}

In this way, the size of our box model will adapt to the size of the browser window.
Let's talk about the outer margin - margin. We modify our code to:

lesson4.html

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <title>Css Box model</title>
    <meta name="keywords" content="key1, key2">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" href="css/index.css"></head><body>
    <div class="mydiv">my css Box test model 1</div>
    <div class="mydiv">my css Box test model 2</div></body></html>

index.css

*{
    margin: 0px;
    padding: 0px;
}

html,body{
    width: 100%;
    height: 100%;
}

div.mydiv{
    width: 100px;
    height: 100px;
    background-color: #000;
    color:#fff;
    padding: 10px 20px;
    border-top: 10px solid #f00;
    border-left: 10px solid #0f0;
    border-right: 10px solid #00f;
    border-bottom: 10px solid #bbb;
}

Let's look at the effect:

Two boxes appear on two lines respectively. What should I do if I want to put these two boxes on one line? My first idea is to change the display attribute to inline, but I found that the style changed to:

This is because the width and height of the line elements cannot be modified. At this time, we can use display: inline block:

Now there is another problem, that is, you find that there is an extra blank space between the two boxes, and the blank space cannot be selected. To be honest, if you use inline block, the space in the middle is self-contained by default (if you have to remove it, you need to add float: left or margin: -10;).

Now there is no gap between the box and the browser edge. Now we want it to be a certain distance from the browser. Let's add a margin: 10px; attribute, and then look at:

We see that there is a margin between it and the browser. Let's take a look at the size of the box now:

The box is now 160 * 140


If for software testing, interface testing, automation testing, interview experience exchange. If you are interested, you can add software test exchange: 1085991341, and there will be technical exchanges with peers.
You can see that the size of the box does not calculate the outer margin attribute, that is

160=100+202+102;140=100+102+102

So margin is the outside distance of the box. It's not the size of the box outside the box.

Now you have all the basic concepts of the box model.
The above content hopes to be helpful to you. Friends who have been helped are welcome to like and comment.

Tags: Programming Attribute

Posted on Thu, 28 May 2020 03:07:37 -0700 by kalivos