CSS box model (3)

Time:2021-7-25

CSS box model

Key point of web page layout: box

Box model components

Composition of the box

  • Margin (outer margin)
  • Border
  • Padding (inner margin)
  • Content

CSS box model (3)

border

  • Border width: the width of the box
  • Border style: the style of the borderDefault: none solid dashed dotted
  • Border color: the color of the border

Abbreviation

    border:border-width  border-style  border-color
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: #0000FF;
                border: 10px solid #008000;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

CSS box model (3)

Border border writing

CSS box model (3)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            input {
                border: none;
                border-bottom:1px solid red;
            }


        </style>
    </head>
    <body>
        Account: < input type = "text" name = "username" > < br / >
        Password: < input type = "password" name = "password" > < br / >
    </body>
</html>

CSS box model (3)

border-collapse

Border collapse: table merge

Because both row labels and cell labels in the table have their own borders, you need to merge borders

<!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 type="text/css">
            table,
            tr,
            td,
            th {
                border-collapse: collapse;
            }

            .t-red {
                background-color: hotpink;
            }
        </style>
    </head>
    <body>
        <table border="1" cellspacing="0" cellpadding="0" align="center" height="300" width="500">
            <caption>
                <h2>Novel ranking</h2>
            </caption>
            <tr class="t-red">
                < th > ranking < / th >
                < th > keyword < / th >

                < th > search today < / th >
                < th > last seven days < / th >
                < th > related links < / th >
            </tr>
            <tr>
                <td>1</td>
                <td>Ghost blow lamp</td>

                <td>345</td>
                <td>123</td>
                <td>
                    < a href = "#" > post it</a>
                    < a href = "#" > Baidu</a>
                    < a href = "#" > pictures</a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>Tomb robbing notes</td>

                <td>34555</td>
                <td>123444</td>
                <td>
                    < a href = "#" > post it</a>
                    < a href = "#" > Baidu</a>
                    < a href = "#" > pictures</a>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>Journey to the West</td>

                <td>24555</td>
                <td>13444</td>
                <td>
                    < a href = "#" > post it</a>
                    < a href = "#" > Baidu</a>
                    < a href = "#" > pictures</a>
                </td>
            </tr>
            <tr class="t-red">
                <td>4</td>
                <td>Journey to the East</td>

                <td>3455</td>
                <td>3444</td>
                <td>
                    < a href = "#" > post it</a>
                    < a href = "#" > Baidu</a>
                    < a href = "#" > pictures</a>
                </td>
            </tr>
            <tr>
                <td>5</td>
                <td>Legend of Zhen Huan</td>

                <td>3555</td>
                <td>1444</td>
                <td>
                    < a href = "#" > post it</a>
                    < a href = "#" > Baidu</a>
                    < a href = "#" > pictures</a>
                </td>
            </tr>
            <tr>
                <td>6</td>
                <td>Outlaws of the marsh</td>

                <td>355</td>
                <td>12344</td>
                <td>
                    < a href = "#" > post it</a>
                    < a href = "#" > Baidu</a>
                    < a href = "#" > pictures</a>
                </td>
            </tr>
            <tr class="t-red">
                <td>7</td>
                <td>Romance of the Three Kingdoms</td>

                <td>3555</td>
                <td>13444</td>
                <td>
                    < a href = "#" > post it</a>
                    < a href = "#" > Baidu</a>
                    < a href = "#" > pictures</a>
                </td>
            </tr>


        </table>
    </body>
</html>

CSS box model (3)

padding

Padding: the distance between the box and the content. After using the inner margin, the box will become larger

Padding settings

CSS box model (3)

Padding abbreviation

CSS box model (3)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                width: 200px;
                height: 200px;
                color: red;
                border: 1px solid blue;
                padding: 20px 50px 20px 60px;
            }
        </style>
    </head>
    <body>
        < div > Yao Zimo < / div >
    </body>
</html>

CSS box model (3)

Sina navigation bar

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .nav {
                height: 41px;
                border-top: 3px solid #ff8500;
                border-bottom: 1px solid gray;
            }

            .nav>a {
                display: inline-block;
                line-height: 41px;
                text-decoration: none;
                color: #000000;
                padding: 0px 20px;
            }

            .nav>a:hover {
                background-color: #eee;
                color: red
            }
        </style>
    </head>
    
    <body>
        <div class="nav">
            < a href = "#" > set as home page</a>
            < a href = "#" > mobile sina.com</a>
            < a href = "#" > mobile client</a>
            < a href = "#" > sign in</a>
            < a href = "#" > Weibo</a>
            < a href = "#" > blog</a>
        </div>
    </body>
</html>

design sketch

CSS box model (3)

Actual size of box

Box width: elements width = content width + padding width + border
    Height of box: elements height = content height + padding height + border

In real development, the inner margin must be real, so we can only subtract the width and height of the box to keep the width and height of the box unchanged

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .nav {
                width: 200px;
                height: 200px;
                background-color: #0000FF;
                padding: 20px;
                border: 1px solid red;
            }
            /*Actual width of box = 200px + 20px + 20px + 1px + 1px = 242px*/
            /*Actual height of box = 200px + 20px + 20px + 1px + 1px = 242px*/
        </style>
    </head>
    <body>
        <div class="nav"></div>
    </body>
</html>

CSS box model (3)

Classroom case

Case 1

CSS box model (3)

The width of the box is 130

Case 2

CSS box model (3)

The box width is 200px + 100px + 50px + 2px = 352px

The box height is 200px + 50px + 50px + 1px + 5px = 306px

Padding does not affect the size of the box

In special cases, if the specified box is not given a width, the box will not be opened by the padding value.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .nav {
                height: 200px;
                width: 200px;
                background-color: #0000FF;
            }

            .nav p {
                height: 200px;
                padding-left: 20px;
                /*At this time, the width of P and the parent element are the same as 200px*/
            }
        </style>
    </head>
    <body>
        <div class="nav">
            <p></p>
        </div>
    </body>
</html>

CSS box model (3)

margin

Margin is the outer margin, which is the distance between boxes
CSS box model (3)

Abbreviation for margin

Similarly, it is consistent with the abbreviation of padding value

Block level box horizontal center alignment

Two conditions are met to center and align the box

1. The width of the box must be specified
2. Set auto for the left and right outer margin margin

Three ways to set auto

  • margin-left:auto margin-right:auto;
  • margin:auto
  • margin:0 auto;
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .nav {
                width: 200px;
                height: 200px;
                background-color: #0000FF;
                margin: 20px auto;
            }
        </style>
    </head>
    <body>
        <div class="nav"></div>
    </body>
</html>

CSS box model (3)

Horizontally center the box and horizontally center the text

Text align: you can not only center the text horizontally, but also center the inline block elements and inline elements horizontally

Margin: Auto: you can center block level boxes horizontally

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body {
                background-color: rgba(0, 0, 0, 0.6);
            }

            .nav {
                width: 200px;
                height: 200px;
                background-color: #0000FF;
                color: wheat;
                margin: 20px auto;
                text-align: center;
                line-height: 200px;
            }
        </style>
    </head>
    <body>
        < div class = "NAV" > Yao Zimo < / div >
    </body>
</html>

CSS box model (3)

Difference between insert picture and background picture

Insert picture

Insert pictures are generally used to show classes. Move the position through the padding and margin of the box model

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .nav {
                width: 800px;
                height: 800px;
                      border:1px solid red;

            }

            .nav img {
                margin: 20px;
                margin-top: 50px;
            }
        </style>
    </head>
    
    <body>
        <div class="nav">
            <img>
        </div>
    </body>
</html>

CSS box model (3)

Background map

Background pictures are generally used to make sprites, etc. to move the position through background position

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .nav {
                width: 800px;
                height: 800px;
                border: 1px solid red;
                Background image: URL (.. / Web Photo / material. JPG);
                background-position: 20px 50px;
                background-repeat: no-repeat;
            }
        </style>
    </head>
    <body>
        <div class="nav"></div>
    </body>
</html>

CSS box model (3)

Clears the default internal and external spacing of elements

* {

    margin:0;
    padding:0;
}

matters needing attention

  • In order to take into account the compatibility of in-line elements, only the left and right inner and outer margins are set, and the upper and lower inner and outer margins are not set;

Outer margin merging problem

The problem of merging the outer margins of adjacent block elements

Merging adjacent block elements: take the larger value of merging the outer margins of two block elements, so it is the best solution to only give the outer margins of one box

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .head,
            .foot {
                width: 200px;
                height: 200px;
                background-color: #0000FF;

            }

            .head {
                margin-bottom: 50px;
            }

            .foot {
                margin-top: 60px;
            }
        </style>
    </head>
    <body>
        <div class="head"></div>
        <div class="foot"></div>
    </body>
</html>

CSS box model (3)

Three methods for merging outer margins of nested block elements

Three methods for merging outer margins of nested block elements

  • Give the parent element the border value
  • Give parent element padding value
  • Give the parent element overfiow: hidden;
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

        <style>
        
            .father {
                width: 600px;
                height: 600px;
                background-color: pink;
                /* border-top: 1px solid transparent; */
                /* padding-top:1px ; */
                overflow: hidden;
            }

            .son {
                width: 200px;
                height: 200px;
                background-color: #0000FF;

                margin-top: 50px;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="son"></div>
        </div>

    </body>
</html>

CSS box model (3)

Box layout stability

CSS box model (3)

PS usage

  • CTRL + O: open file
  • CTRL + R: open ruler
  • CTRL +: zoom in
  • CTRL + -: zoom out
  • Press and hold a space to move the view
  • Straw tool: absorb color
  • Marquee Tool: measure width and height

Remove the default style of the list

    li {
        list-style:none;
    }

News case

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        .nav {
            width: 300px;
            height: 230px;
            border: 1px solid #ccc;
            margin: 100px auto;
            padding: 0px 15px;
            background: url(images/line.jpg);
        }
        
        .nav h2 {
            font-size: 16px;
            padding-top: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #CCCCCC;
        }
        
        .nav ul li {
            height: 32px;
            line-height: 32px;
            list-style: none;
            padding-left: 15px;
            background: url(images/arr.jpg) no-repeat 0px center;
            border-bottom: 1px dashed #ccc;
        }
        
        .nav li a {
            color: #333;
            font-size: 12px;
            text-decoration: none;
        }
        
        .nav li a:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div class="nav">
        <h2>Latest articles / new articles</h2>
        <ul>
            <li>< a href = "#" > Beijing Recruitment graphic design, web design, PHP</a></li>
            <li>< a href = "#" > experience the charm of JavaScript</a></li>
            <li>The coming world of query href = "# ></a></li>
            <li>< a href = "#" > the dream of web designers</a></li>
            <li>< a href = "#" > what is chain programming in jQuery</a></li>
        </ul>
    </div>
</body>

</html>

design sketch

CSS box model (3)

Rounded border

Set circle

    border-radius:50%;

Set rectangle

Border radius: half the height

Abbreviation for border radius

Border radius: upper left corner, upper right corner, lower right corner, lower left corner

code

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /*Set fillet*/
        div {
            width: 200px;
            height: 200px;
            background-color: blue;
            border-radius: 50%;
        }

        /*Set rectangle*/
        div:nth-child(2) {
            width: 200px;
            height: 50px;
            background-color: red;
            border-radius: 25px;
        }

      
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>

CSS box model (3)

Shadow of box

Box show: box shadow
<!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: 200px;
            height: 200px;
            background-color: blue;
            box-shadow: 20px 20px 2px 20px red inset;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

CSS box model (3)
CSS box model (3)

CSS writing specification

  • Space between selector and {} space between attribute and attribute value
  • Nested elements should not exceed three levels
  • Property value should end with a semicolon

Recommended Today

A thorough understanding of the hystrix go source code

Series articles: Usage and principle of hystrix go A thorough understanding of the hystrix go source code Opening The last article mainly introducedhystrix-goIn this article, let’s comprehensively analyze the source code. This article is very long. Please read it patiently. In addition, because the direct release of the source code affects the mobile phone reading […]