当前位置：网站首页>43 box model

43 box model

2022-07-25 14:46:00 【hello_ sunny123】

Insert picture description here
Insert picture description here
Insert picture description here
Insert picture description here
Insert picture description here
Insert picture description here

One . Frame

Insert picture description here

Code 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08- The frame of the box model .html</title>
    <style> div {
       width: 300px; height: 200px; /* border-width:  The thickness of the border   Usually use px; */ border-width: 5px; /* border-style:  The style of the border  solid  Solid line frame  dashed  Dotted border  dotted  Dotted border */ /* border-style:  The style of the border  solid  Solid line frame  */ border-style: solid; /* border-style:  The style of the border  dashed  Dotted border  */ /* border-style: dashed; */ /* border-style:  The style of the border  dotted  Dotted border  */ /* border-style: dotted; */ /* border-color: Color of border  */ border-color: pink; } </style>
</head>

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

</html>

result

Insert picture description here

Two . Composite writing

Insert picture description here

Code 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08- Composite writing .html</title>
    <style> div {
       width: 300px; height: 200px; /* border-width: 5px; */ /* border-style:  The style of the border  solid  Solid line frame  dashed  Dotted border  dotted  Dotted border */ /* border-style: solid; */ /* border-color: pink; */ /*  The compound writing of border   Abbreviation  */ /* border: 5px solid pink; */ /*  On the border  */ border-top: 5px solid pink; /*  Under the frame  */ border-bottom: 10px dashed purple; /*  The left margin  */ border-left: 5px solid #000; /*  Right margin  */ border-right: 5px solid red; } </style>
</head>

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

</html>

result

Insert picture description here
Insert picture description here

Exercise code 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Border exercise  </title>
    <style> div {
       /*  Give me a 200*200 Box , Set the top border to red , Other borders are blue  */ width: 200px; height: 200px; /* border  Contains four sides  */ border: 10px solid blue; /*  Layering   Only the top border is stacked */ border-top: 10px solid red; } </style>
</head>

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

</html>

result

Insert picture description here

3、 ... and . Table thin line border

Insert picture description here

Code 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Novel ranking </title>
    <style> table {
       width: 500px; height: 249px; } th {
       height: 35px; } table, td, th {
       border: 1px solid pink; /*border-collapse  Merge adjacent borders  */ border-collapse: collapse; font-size: 14px; text-align: center; } </style>
</head>

<body>
    <table align="center" cellspacing="0">
        <thead>
            <tr>
                <th> ranking </th>
                <th> key word </th>
                <th> trend </th>
                <th> Search today </th>
                <th> The last seven days </th>
                <th> Related links </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td> Ghost blows </td>
                <td><img src="images/down.jpg" /></td>
                <td>345</td>
                <td>123</td>
                <td> <a href="#"> tieba </a> <a href="#"> picture </a> <a href="#"> Encyclopedias </a></td>
            </tr>
            <tr>
                <td>2</td>
                <td> The Lost Tomb </td>
                <td><img src="images/up.jpg" /></td>
                <td>124</td>
                <td>675432</td>
                <td> <a href="#"> tieba </a> <a href="#"> picture </a> <a href="#"> Encyclopedias </a></td>
            </tr>
            <tr>
                <td>3</td>
                <td> Journey to the west </td>
                <td><img src="images/down.jpg" /></td>
                <td>212</td>
                <td>7654</td>
                <td> <a href="#"> tieba </a> <a href="#"> picture </a> <a href="#"> Encyclopedias </a></td>
            </tr>
            <tr>
                <td>4</td>
                <td> Journey to the East </td>
                <td><img src="images/down.jpg" /></td>
                <td>23</td>
                <td>75645</td>
                <td> <a href="#"> tieba </a> <a href="#"> picture </a> <a href="#"> Encyclopedias </a></td>
            </tr>
            <tr>
                <td>5</td>
                <td> Zhen Huan preach </td>
                <td><img src="images/up.jpg" /></td>
                <td>121</td>
                <td>7676</td>
                <td> <a href="#"> tieba </a> <a href="#"> picture </a> <a href="#"> Encyclopedias </a></td>
            </tr>
            <tr>
                <td>6</td>
                <td> Water margin </td>
                <td><img src="images/down.jpg" /></td>
                <td>576576</td>
                <td>1231421</td>
                <td> <a href="#"> tieba </a> <a href="#"> picture </a> <a href="#"> Encyclopedias </a></td>
            </tr>
            <tr>
                <td>7</td>
                <td> The romance of The Three Kingdoms </td>
                <td><img src="images/down.jpg" />></td>
                <td>234</td>
                <td>7686</td>
                <td> <a href="#"> tieba </a> <a href="#"> picture </a> <a href="#"> Encyclopedias </a></td>
            </tr>
        </tbody>
    </table>
</body>

</html>

result

Insert picture description here

Four .（1） The border will affect the actual size of the box

Insert picture description here

Code 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12- The border will affect the actual size of the box </title>
    <style> div {
       width: 180px; height: 180px; background-color: pink; border: 10px solid red; } </style>
</head>

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

</html>

result

Insert picture description here

Four .(2) padding

Insert picture description here

Code 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>13- The inside margin of the box model </title>
    <style> div {
       width: 200px; height: 200px; background-color: pink; padding-left: 20px; padding-top: 30px; padding-right: 20px; } </style>
</head>

<body>
    <div>
         The contents of the box are content The contents of the box are content The contents of the box are content The contents of the box are content The contents of the box are content The contents of the box are content
    </div>
</body>

</html>

result

Insert picture description here

Four . padding padding attribute ： above 4 Kind of , In development, you will encounter

Insert picture description here

Code 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>14- Compound writing method of inner margin of box model </title>
    <style> div {
       width: 200px; height: 200px; background-color: pink; /* padding-left: 5px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; */ /*  Inside margin compound writing  */ /* Followed by a number ： It means up, down, left and right 5px*/ /* padding: 5px; */ /* Followed by two numbers ： Up and down are 5px  Right and left are 10px*/ /* padding: 5px 10px; */ /* Followed by three numbers ： On behalf of 5px  Right and left are 10px  Next is 20px*/ /* padding: 5px 10px 20px; */ /* Followed by three numbers ： On behalf of 5px  On the right is 10px*  Next is 20px  Left is 30px  Clockwise */ padding: 5px 10px 20px 30px; } </style>
</head>

<body>
    <div>
         The contents of the box are content The contents of the box are content The contents of the box are content The contents of the box are content The contents of the box are content The contents of the box are content
    </div>
</body>

</html>

result

Insert picture description here

5、 ... and . The inner margin affects the actual size of the box

Insert picture description here

Code ：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>15- The inner margin affects the actual size of the box </title>
    <style> div {
       /* width: 200px; height: 200px; */ /*  In order to avoid supporting a big box 200-20*2=160 */ width: 160px; height: 160px; background-color: pink; padding: 20px; } </style>
</head>

<body>
    <div>padding Will affect the actual size of the box padding Will affect the actual size of the box padding Will affect the actual size of the box padding Will affect the actual size of the box padding Will affect the actual size of the box </div>
</body>

</html>

result

Insert picture description here

原网站

版权声明
本文为[hello_ sunny123]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/206/202207251440408694.html

边栏推荐

猜你喜欢

随机推荐