Extended application of box model

Posted by Stoker on Tue, 04 Jan 2022 23:08:30 +0100

Clear default style

1. Most labels will have default styles when the browser loads. These styles will have a certain impact on our layout, so we need to clear them first

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* Remove inner margin and outer margin */
        body,
        div,
        ol,
        ul,
        li,
        h1 {
            padding: 0;
            margin: 0;
        }
        /* Remove the dots in front of the list */
        li {
            list-style: none;
        }
        /* Set the link text color and remove the underline */
        a {
            color: #333;
            text-decoration: none;
        }
        /* Remove the default bold style */
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        b,
        strong {
            font-weight: normal;
        }
    </style>
</head>
<body>
    <div>This is a div Box</div>
    <p>This is a paragraph</p>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <a href="#"> link text</a>
</body>
</html>

2. Set public style

<style>
        body {
            color: #333;
            font-size: 16px;
            font-family: "Song typeface";
        }
    </style>

Application of high height

1. The height attribute can be set or not according to different requirements
2. If the height is set, the height position of the comrades in arms of the box will be determined. The following peer elements will be loaded next to each other, and too much content in their own box will overflow the box area
3. If the height is not set, the box will be automatically opened according to the height of the contents inside the label

overflow property

1. When the box has a height in the province and its content height exceeds the box height, the content will overflow the box display
2. The overflow attribute will be used at this time

Function: set the display effect of overflow part
Attribute value:
(1) visible default value, which can be seen in the overflow part of the setting

<!DOCTYPE html>
<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 #050502;
            overflow: visible;
        }
    </style>
</head>
<body>
    <div>
        This is a div This is a div This is a div This is a div This is a div This is a div
        This is a div This is a div This is a div This is a div This is a div This is a div
        This is a div This is a div This is a div This is a div This is a div This is a div
        This is a div This is a div This is a div This is a div This is a div This is a div
        This is a div This is a div This is a div This is a div This is a div This is a div
        This is a div This is a div This is a div This is a div This is a div This is a div
    </div>
    <span>This is span</span>
</body>
</html>

(2) Hidden set overflow part hidden

<!DOCTYPE html>
<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 #050502;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div>
        This is a div This is a div This is a div This is a div This is a div This is a div
        This is a div This is a div This is a div This is a div This is a div This is a div
        This is a div This is a div This is a div This is a div This is a div This is a div
        This is a div This is a div This is a div This is a div This is a div This is a div
        This is a div This is a div This is a div This is a div This is a div This is a div
        This is a div This is a div This is a div This is a div This is a div This is a div
    </div>
    <span>This is span</span>
</body>
</html>

(3) A scroll bar appears in the overflow part of the scroll. You can drag the scroll bar to view the hidden part. The part with more than the box height is not displayed. Whether there is overflow or not, the scroll bar will appear in the horizontal and vertical directions

<!DOCTYPE html>
<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 #050502;
            overflow: scroll;
        }
    </style>
</head>
<body>
    <div>
        This is a div This is a div This is a div This is a div This is a div This is a div
        This is a div This is a div This is a div This is a div This is a div This is a div
        This is a div This is a div This is a div This is a div This is a div This is a div
        This is a div This is a div This is a div This is a div This is a div This is a div
        This is a div This is a div This is a div This is a div This is a div This is a div
        This is a div This is a div This is a div This is a div This is a div This is a div
    </div>
    <span>This is span</span>
</body>
</html>

(4) auto automatic. If there is no overflow, it will be displayed normally. If there is overflow, the scroll bar will appear automatically in the opposite direction of overflow

<!DOCTYPE html>
<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 #050502;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div>
        This is a div This is a div This is a div This is a div This is a div This is a div
        This is a div This is a div This is a div This is a div This is a div This is a div
        This is a div This is a div This is a div This is a div This is a div This is a div
        This is a div This is a div This is a div This is a div This is a div This is a div
        This is a div This is a div This is a div This is a div This is a div This is a div
        This is a div This is a div This is a div This is a div This is a div This is a div
    </div>
    <span>This is span</span>
</body>
</html>

Center

1. Text centered horizontally
Set the text align property

2. Single line text centered vertically
Set line height = container height

3. Center multiline text vertically
Set the inner margin of the element. The upper and lower inner margins are the same
Or make elements highly adaptive
Or make the element height exactly equal to the height of the multiline text

4. The element is vertically centered
Set the inner margin of the element. The upper and lower inner margins are the same
Or make the parent element highly adaptive
Or make the height of the parent element exactly equal to the height of the child element

5. Horizontally centered elements (block level elements)
Set the left and right margin of the element margin: 0 auto

Parent-child box model

1. Regardless of overflow, multiple child element boxes are nested inside a parent element. If multiple child elements need to be displayed in a row, the width of the parent box must be greater than the sum of the widths of the child boxes
2. Width of parent element > width+padding+border+margin99 of all child elements

3. In the parent-child box model, there is only one child element, and the child element is a block level element, which monopolizes one line. If the width of the child element is not set, the width of the child element will automatically load the width of the parent element. If the padding and border margin in the horizontal direction of the child element are set at the same time, there is no need to reduce the width of the child element manually, and the width of the child element will shrink automatically

margin collapse phenomenon

1. In the vertical direction, if the outer margins of two boxes meet, the margin distance between the two boxes is not the sum of the two margins, but the largest one

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* Finally, the outer margin between the top of box1 and box3 is 30px, and the outer margin between the bottom of box1 and box2 is 100px */
        .box1{
            width: 400px;
            height: 400px;
            margin-top: 20px;
            margin-bottom: 50px;
            background-color: #eee;
        }
        .box3 {
            width: 200px;
            height: 200px;
            margin-top: 30px;
            background-color: pink;
        }
        .box2{
            width: 200px;
            height: 200px;
            margin-top: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box1">
        1
        <div class="box3">2</div>
    </div>
    <div class="box2">3</div>
</body>
</html>

Methods to solve collapse
1. If it is a box of the same level, avoid setting the upper and lower outer margins of the two boxes at the same time
2. If it is a parent-child box, you can use the border or padding of the parent box to separate the margins, or you can only set padding for the parent box

Topics: css

Programmer Think