Understand the box model

Prevention at home, against the war learning

First, the concept of the box model

　　In the html document we have seen, each element can form a box, and html can be said to have composed each box. The so-called box, a container is loaded things,

In the absence of any content and any defined attributes, his frame, size is not visible. To better understand the box, we add an attribute to the box.

Second, the properties of the box

　　1, the size of the box

　　Define the size of the box can be determined according to the width and height of the box width and height values of the set value, width and height of the box can not be defined directly with the contents distraction. We first define two

Boxes, in order to facilitate observation, we add background color to the box.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .box_r{
        width: 300px;
        height: 200px;
        background: red;
    }
    .box_p{
        background: pink;
    }
    </style>
</head>
<body>
    <div class="box_r"></div>
    <div class = " box_p " > This is a distraction text box </ div>
</body>
</html>

　　Adding a red box width and height, size appears, and pink are softened contents inside the box

　　2, box frame border

　　Box border is the border of the box, but also includes a border width (border-width), the type (boder-style), color (boder-color), for example, the definition of a box frame,

We want him to be 5 pixels wide, solid line, the red, we can write

div{
    width: 300px;
    height: 200px;
    background: red;
    border-width: 5px;
    border-style: solid;
    border-color:blue;
    }

　　Or simply abbreviated as border: 5px solid blue; the effect is the same.

　　A separate border cartridge is provided in a certain direction, on: border-top, Right: border-right, lower: brder-bottom, left: border-left; set attribute values of four directions can be abbreviated

For the border: 10px 5px 15px 10px; we are sequentially provided on the left and right lower different width values.

　　3, the inner box is filled padding

　　padding inside the box represents the contents of the box to the distance from the border, it also accounts for the size of the inside of the box, the contents of the box it will "squeeze" in the past, while, in the background of the box without padding

Affected.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div{
        width: 300px;
        height: 150px;
        background: red;
        border:5px solid blue;
        padding: 10px;
    }
    </style>
</head>
<body>
    <div>
        This is a filled inner box
        This is a filled inner box
        This is a filled inner box
    </div>
</body>
</html>

　　Effect is shown, seen from the figure, according to the text box at this time there are certain border controls, this space is padding, while still in the box on a red background fills the entire box. padding

Like border, may define the size of the four directions, (padding-boyyom) left (padding-left) that is under the (padding-top) and right (padding-right), or

Attribute value directly added in four directions.　

　　By this time, the size of a box of how much of it, first of all we have to define the width of the box 300px, and on each side of the box 5px border, and padding box distraction, it is based on the original distraction

Box, box corresponds to approximately broadens 10px, summary, width of the box is 5 + 10 + 300 + 10 + 5 = 330px size, similarly, the height of the box is 5 + 10 + 150 + 10 + 5 = 180px.

　　4, outside the box from the margin

　　It represents the margin distance and other elements external boxes, usually a distance between the box and the box may be provided separately margin in four directions. We define two boxes,

And set the margin value.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box_l{
            width: 200px;
            height: 100px;
            background: red;
            margin-right: 20px;
            float: left;
        }
        .box_r{
            width: 200px;
            height: 100px;
            background: blue;
            background-left:30px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box_l"></div>
    <div class="box_r"></div>
</body>
</html>

　　Red box and blue box in the right, left margin values were added up, the spacing between the two boxes appeared, the size of the pitch is 20 + 30 = 50px; whereas if the above two

Cancel floating vertically arranged boxes, such as boxes above the added margin-bottom = 20px; cassette below was added margin-top = 30px; vertical spacing of the two boxes 30px, whichever

Maximum, rather than the sum of 50px.

Third, the illustration box model

　　Have basic properties box border, padding and margin, define the width and height of the box its final size by the wide high content plus border (border) and an inner padding (padding)

Decisions, margin value will increase the spacing boxes and other elements.

https://i-beta.cnblogs.com/posts?cfg=512

Understand the box model

Guess you like