CSS box model

1.CSS box model

2. Box frame

Width is used to set the width of the content area of the box, and height is used to set the height of the content area of the box

Three styles must be specified to set the border for the box. Border width is the width of the border, border color is the color of the border, and border style is the style of the border

The visible box size of the box is determined by the content area, inner margin and border. If there are four values of border width, they are set to the top, right, bottom and left respectively, three values are set to the top, right, left and right respectively, and two values are set to the top, bottom, left and right respectively. One value is the value in all directions. The other two properties are similar and can be set in separate directions.

We can also use the border attribute to set the styles of the four borders. There is no order requirement, but in this way, we can only specify the styles of the four borders, but we can specify each border style through border XXX.

3. Inner margin

Set by the padding attribute, the inner margin will affect the visible box size of the box, and the background of the element will extend to the inner margin. The visible box width of the box = border left width + padding left width + width + padding left width + border left width. The visible height of the box is similar to the calculation. Can only be positive.

4. Outer margin

The outer margin refers to the distance between the current box and other boxes. It will not affect the size of the visible box of the box, but will affect the position of the box. Set through the margin property. The margin value can be set to a negative value, which will cause the margin of the specified position to move in the opposite direction. For example, a negative value on the left will cause the box to fall into the left. The value can also be set to auto. If only the left outer margin or the right outer margin is specified as auto, the additional margin will be set to the maximum value. If the vertical direction is set to auto, the vertical outer margin defaults to 0 If the left and right outer margins are set to auto at the same time, the outer margins on both sides will be set to the same value, which can make the element automatically center horizontally in the parent element. Therefore, you can use margin:0 auto to center the element horizontally in the parent element

5. Overlap of outer margin

Overlap of vertical outer margins. In the web page, the adjacent outer margins in the vertical direction will overlap. This situation means that the adjacent outer margins between brother elements will take the maximum value rather than the sum. Note that the adjacent outer margins. If there are other elements that separate the two elements, they will not overlap. If the outer margins of the parent and child elements are adjacent, the outer margins of the child elements will be set to the parent element.

6. Inline elements

width and height cannot be set, but the inner margin and border in the horizontal and vertical directions can be set. The inner margin and border in the horizontal direction will affect the layout, while those in the vertical direction will not, and will produce the effect of coverage. Inline elements support horizontal outer margins, but do not support vertical outer margins, and the horizontal outer margins do not overlap, but sum.

7. Child parent element

The child element exists in the content area of the parent element by default. Theoretically, the maximum size of the child element can be equal to the size of the content area of the parent element. However, if the size of the child element exceeds the content area of the parent element, the exceeded size will be displayed outside the parent element.

The overflow attribute can set how the parent element handles the overflow content. visible is the default value and will not handle the overflow content. Hidden can cut the hidden content and will not be displayed. Scroll will add a scroll bar for the parent element and view the complete content through the scroll bar. However, this value will add a horizontal and vertical scroll bar regardless of whether the element overflows, while auto will add a scroll bar according to whether it overflows.

8. Characteristics of elements in document flow

Block element:

(1) Block elements will occupy a single line in the document stream, and block elements will be arranged from top to bottom

(2) The default width of a block element in the document flow is 100% of the parent element

(3) When the value of the width of the element is auto, specifying the inner margin will not affect the size of the visible box, but will automatically modify the width to accommodate the inner margin

(4) At the height of the document flow, the block element is extended by the content by default

Inline element:

(1) Inline elements only occupy their own size in the document flow and will be arranged from left to right by default. If one line is not enough to accommodate all inline elements, change to the next line and continue from left to right

(2) In the document flow, the height and width of inline elements are expanded by content by default

9. Floating of box model

Since the block elements are arranged vertically in the document flow by default, the three div s are arranged from top to bottom. We can use float to make the box separate from the document flow. none is the default value, and the elements are arranged in the document flow by default. Left is to make the elements immediately separate from the document flow and float to the left of the page. Right makes the elements immediately separate from the document flow and float to the right of the page.  

When we set an element to leave the document stream, the element below it will immediately move upward, and the floating element will float to the top left or right of the page as much as possible until it meets the border of the parent element or other floating elements.

<!DOCTYPE html>

<html lang="en">
<head>
    <!--meta Tags can also set the metadata of web pages-->
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            float: right;
            background-color: blue;
        }
        .box2{
            width: 200px;
            height: 200px;
            float: right;
            background-color: blueviolet;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <script>
    </script>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

 

As shown in the figure below, the second box meets the first box and stops

If there is an element without floating above the floating element, the floating element will not exceed the block element.

<!DOCTYPE html>

<html lang="en">
<head>
    <!--meta Tags can also set the metadata of web pages-->
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            /*float: right;*/
            background-color: blue;
        }
        .box2{
            width: 200px;
            height: 200px;
            float: right;
            background-color: blueviolet;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <script>
    </script>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

The floating elements will not exceed the brother elements above him. At most, one side is flush

Moreover, the floating element will not cover the text, and the text will automatically surround the floating element, so we can set the effect of text surrounding the picture by floating

<!DOCTYPE html>

<html lang="en">
<head>
    <!--meta Tags can also set the metadata of web pages-->
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 100px;
            /*float: right;*/
            float: left;
            background-color: blue;
        }
        .box2{
            height: 200px;
            /*float: left;*/
            background-color: blueviolet;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <script>
    </script>
</head>
<body>
    <div class="box1"></div>
    <p class="box2">In my previous life, I always felt that I would become someone else. It seemed that I always wanted to go to a new place, start a new life and acquire a new personality there. I don't know how many times it has been repeated so far. This is, in a sense, growth and, in a sense, transformation. But anyway, I want to liberate myself from what I had in the past by becoming another self. I earnestly and wholeheartedly pursue this, and I believe that as long as I work hard, it will come true sooner or later. But in the end, I think I can't arrive anywhere. Anyway, I can only be me. My regrets remain the same anyway. No matter how the surrounding scenery changes, no matter how different people's voices are, I can only be an incomplete person. There is a permanent and fatal defect in me, which brings me strong hunger and thirst. This hunger and thirst has been worrying me before, and I'm afraid it will also upset me in the future. Because in a sense, the defect itself is myself, which I know in my heart. If possible, now I want to be a new self for you, which I should be able to do. It may not be easy, but if you work hard, you can always get a new self. But to be honest, once something happens, it may have to repeat the mistakes, and may also hurt you. I can't promise you anything.</p>
</body>
</html>

In the document flow, the width of the child element occupies all of the parent element by default, but when the element is set to float, it will be completely separated from the document flow, and the height and width are supported by the content. Moreover, after the inline element turns on floating, it will become a block element, and you can set the width and height at will.

Tags: Front-end

Posted by viveleroi0 on Sat, 14 May 2022 14:45:11 +0300