Graphical CSS box model

The box model

In HTML documents, each element generates a box on the page. So HTML pages are really just a bunch of boxes. By default, the borders of each box are not visible and the background is transparent. Each box consists of four parts: margin, border, inner margin, and content.

Browsers vary, but the box model is made up of all four parts.

Standard box model

According to the W3C specification, the space occupied by the content of an element is set by the width property, while the padding and border values around the content are calculated separately. In the box model in standard mode, the width/height of the actual content of the box is equal to the width/height we set; Box total width/height =width/height+padding+border+margin

IE Box model

In this mode, the browser width property is not the width of the content, but the sum of the width of the content, the padding, and the border; In weird mode, the box’s content width + padding+ border width = the width we set, Box width/height =width/height + margin = Content area width/height + padding + border + margin

Summary: The difference between the standard box model and the IE box model is the range contained in the width and height.

CSS3 specifies box size (box-sizing)

Box-sizing: defines how the user Agent should calculate the total width and height of an element.

box-sizing: content-box;

The width and height are applied to the element’s content box, respectively. Draws the inside margins and borders of elements outside the width and height.

box-sizing: border-box;

The width and height you set for an element determines its border box. That is, any inner margins and borders specified for an element will be drawn within the specified width and height. The width and height of the content are obtained by subtracting the border and inner margin from the specified width and height, respectively.

box-sizing: inherit;

Specifies that the value of the box-sizing attribute should be inherited from the parent element.

That is, box-sizing can specify the type of box model, content-box specifies the box model to W3C (standard box model), and border-box specifies the IE box model (weird box model).

Box type

We use two types of “boxes” extensively in CSS — block boxes and inline boxes. The two boxes behave differently in terms of page flow and relationships between elements.

Block box

The box expands in an inline direction and takes up all the space available to the parent container in that direction, which in most cases means that the box is as wide as the parent container
Each box will wrap
The width and height attributes come into play
Padding, margin, and border “push” other elements away from the current box

Inline box

Boxes do not generate line breaks.
The width and height attributes will have no effect.
Vertical margins, margins, and borders are applied but do not push other boxes in the inline state away.
Horizontal inner margins, margins, and borders are applied and other boxes in the inline state are pushed away.

We control the external display type of the box by setting its display property, such as inline or block.

Example:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        div {
            height: 50px;
            width: 100px;
            border: 1px solid black;
            margin: 1px;
            padding: 1px;
        }

        span {
            height: 100px;  /* does not work */
            width: 100px;   /* does not work */
            margin-top: 20px; /* does not work */
            margin-bottom: 20px; /* does not work */
            margin-left: 10px; /* works */
            margin-right: 10px;/* works */
        }
    </style>
</head>
<body>
    <div>Block level box 1</div>
    <div>Block level box 2</div>

    <span>Inline box 1</span>
    <span>Inline box 2</span> <br>
    <span>Inline box 3</span>
    <span>Inline box 4</span>
</body>
</html>
Copy the code

Box properties

Border: You can set the width, style, and color of the border
Padding: You can set the spacing between the box content area and the border
Margin: You can set the distance between the box and adjacent elements

Box border

The border has four related attributes:

Border-width: You can use text values such as thin,medium, and thick, or any absolute value except percentages and negative values
Style (border – style) : there is none, hidden, dotted, dashed, solid, double, groove, ridge, such as an inset and outset text value.
Border-color: Can use any color value, including RGB, HSL, hexadecimal color value and color keyword.
Rounded (border-radius) : Set rounded corners, either absolute or relative (percentage)

The two properties work the same way, starting clockwise:

border-left: 1px; border-right: 2px; // Specify left and right widths of 1px and 2px respectively
border: 1px; // Set the four edges to 1px
border: 1px 2px; // Set top, bottom to 1px, left and right to 2px
border: 1px 2px 3px; // Set top 1px, right 2px, bottom 3px, left 2px
border: 1px 2px 3px 4px; // Set top 1px, right 2px, bottom 3px, left 4px

Example:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        div {
            width: 30px;
            height: 30px;
            display: inline-block;
            background-color: yellow;
        }
        div:nth-child(1) {
            /* Sets the width, style, and color of the border */
            border: 1px solid black; /*Syntax: <line-width> || <line-style> || <color>*/
        }

        div:nth-child(2) {
            /* Specify only one side of the border */
            border-left: 1px solid black; /*border: four width style color */
        }

        div:nth-child(3) {
            border-width: 1px 2px;
            border-style: dashed dotted double inset; / * Syntax: < line - style > {1, 4} * /
        }

        div:nth-child(4) {
            /* When three sides are set, the left side is red, the same color as the second */
            border: 1px solid;
            border-color: blue red green; / * Syntax: < line - style > {1, 4} * /
        }

        div:nth-child(5) {
            /* Set rounded corners */
            border: 1px solid red;
            border-radius: 1px 5px 10px 15px; /* Starting at the top left corner, clockwise */
        }

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

Padding inside

The inside margin is the distance between the box’s content area and the box’s border.

padding-left: 1px; padding-right: 2px; // Specify the left and right margins to be 1px and 2px respectively
padding: 1px; // Set the inner margin of the 4 edges to 1px
padding: 1px 2px; // Set the top and bottom margins to 1px and the left and right margins to 2px
padding: 1px 2px 3px; // Set the inner margins to 1px up, 2px right, 3px down, 2px left
padding: 1px 2px 3px 4px; // Set the inner margins to 1px up, 2px right, 3px down and 4px left

Example:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        div {
            display: inline-block;
            border: 1px solid black;
        }

        div:nth-child(2) {
            padding: 30px 20px;
        }

        div:nth-child(3) {
            padding-left: 30px;
        }
    </style>
</head>
<body>
    <div>There is no inside margin</div>
    <div>The top and bottom margins are 30px and the left and right margins are 20px</div>
    <div>Left inside margin 30px</div>
</body>
</html>
Copy the code

Margin

margin-left: 1px; margin-right: 2px; // Specify the left and right margins to be 1px and 2px respectively
margin: 1px; // Set the margin of the four edges to 1px
margin: 1px 2px; // Set the top and bottom margins to 1px and the left and right margins to 2px
margin: 1px 2px 3px; // Set the margins to 1px up, 2px right, 3px down, and 2px left
margin: 1px 2px 3px 4px; // Set the margins to 1px up, 2px right, 3px down, and 4px left

Example:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }

        div:nth-child(2) {
            margin: 30px 20px;
        }

        div:nth-child(3) {
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <div>No margins</div>
    <div>The upper and lower margins are 30px and the left and right margins are 20px</div>
    <div>The left margin is 30px</div>
</body>
</html>
Copy the code

If my blog is helpful to you, if you like my blog content, please “like” “comment” “favorites” one key three even oh! I heard that the people who like 👉 👈 will not be too bad, every day will be full of vitality oh hey hey!! ❤️ ❤️ ❤️ Everyone’s support is my motivation to keep going. Don’t forget to follow 👉 👈 after you like me!

Personal wechat: iotzzh Public account: front-end wechat personal website: www.iotzzh.com

The box model

Standard box model

IE Box model

Summary: The difference between the standard box model and the IE box model is the range contained in the width and height.

CSS3 specifies box size (box-sizing)

Box type

Block box

Inline box

Box properties

Box border

The two properties work the same way, starting clockwise:

Padding inside

Margin

Related Posts

Front end most practical bookmark 【 after reading can raise salary!

[Front-end development] Front-end automation build tool Webpack

Tao department front-end architecture – Weekly – 210719