08-HTML盒子模型与定位标签-3

HTML盒子模型与定位标签

盒子模型

margin属性—外边距

padding属性—内边距

   

  • 实例演示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <img src="./01b.jpg"
        style="width: 200px;
               border: 3px solid #5F9BE3;
               margin: 10px;">
        <img src="./01b.jpg"
        style="width: 200px;
               border: 3px solid #5F9BE3;
               padding: 10px;
               margin: 10px;">
    </body>
</html>

边距合并

 

  • 代码演示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <img src="./01b.jpg"
        style="width: 200px;
               border: 3px solid #5FA3C0;
               padding: 50px 10px 30px 15px;
               margin: 15px 30px 20px 50px;">
    </body>
</html>
  
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <img src="./01b.jpg"
        style="width: 150px;
               border: 3px solid #5FA3C0;
               padding: 20px 15px;
               margin: 15px 10px;">
    </body>
</html>
<!--margin和padding只有两个值的时候，表示上下值、左右值-->

pasition定位元素

pasition属性

absolute绝对定位

 

 

  • 代码演示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <!--以body为父级元素定位-->
    <body style="position: ;left: ;border: ;">
        <!--absolute绝对定位-->
        <img src="./01a.jpg" width="100" style="
             position: ;
        ">
        <img src="./01a.jpg" width="100" style="">
        <img src="./01a.jpg" width="100" style="
             position: absolute;
             top: 100px;
             left: 50px;
        ">
        <img src="./01a.jpg" width="100" style="
             position: absolute;
             top: 150px;
             left: 100px;
        ">
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <!--以body为父级元素定位-->
    <body style="position: ;left: ;border: ;">
        <!--absolute绝对定位-->
        <img src="./01a.jpg" width="100" start="
                position: "
        >
        <p style="position: ;left: 100px;border: 1px solid red;
                  width: 300px;height: 200px;"
        >
        <img src="./01a.jpg" width="100" style="
             position: ;
             top: 100px;
             left: 200px;
        ">
        </p>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <!--以body为父级元素定位-->
    <body style="position: ;left: ;border: ;">
        <!--absolute绝对定位-->
        <img src="./01a.jpg" width="100" start="
                position: "
        >
        <p style="position: ;left: 100px;border: 1px solid red;
                  width: 300px;height: 200px;"
        >
        <img src="./01a.jpg" width="100" style="
             position: absolute;
             top: 100px;
             left: 200px;
        ">
        </p>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <!--以body为父级元素定位-->
    <body style="position: ;left: ;border: ;">
        <!--absolute绝对定位-->
        <p style="position: ;left: 100px;border: 1px solid red;
                  width: 300px;height: 200px;"
        >
        <img src="./01a.jpg" width="100" style="
             position: absolute;
             top: 100px;
             left: 200px;
        ">
        </p>
        <p style="position: absolute;left: 100px;border: 1px solid red;
                  width: 300px;height: 200px;"
        >
        <img src="./01a.jpg" width="100" style="
             position: absolute;
             top: 100px;
             left: 200px;
        ">
        </p>
    </body>
</html>

 

  • 如果p标签不设置position定位元素值，则向上一级body级查找，以body级的定位元素作为基准

relative相对定位

  • 代码演示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <!--以body为父级元素定位-->
    <body style="margin: 0;">
        <!--relative绝对定位-->
        <p style="border: 1px dotted #f00;
                width: 100px;height: 100px;
                margin: 0;"
        >
        <p style="border: 1px solid #f00;
                  width: 100px;height: 100px;
                  position: absolute;
                  top: 0px;
                  left: 0px;"
        >
        </p>
        <p style="border: 1px solid blue;
                  width: 100px;height: 100px;
                  position: relative;
                  top: 0px;
                  left: 0px;"
        >
        </p>
        <p style="border: 1px solid green;
                  width: 100px;height: 100px;
                  position: relative;
                  top: 100px;
                  left: 100px;"
        >
        </p>
    </body>
</html>

fixed窗口固定定位

  • 代码演示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body style="margin: 0;">
        <p style="position: fixed;
            top: 0;
            left: 0;
            background-color: #5F98E0;
            width: 100%;
            margin: 0;
        ">
            <a href="...">首页</a>
            <a href="">产品介绍</a>
        </p>
        <p style="height: 100px;border: 2px solid salmon;">
        <!--position: fixed可以让网页元素固定在网页固定位置，提升用户体验，例如滚动条-->
    </body>
</html>

sticky—滚动条固定

  • 代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
    <style>
    div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 5px;
    background-color: #cae8ca;
    border: 2px solid #4CAF50;
    }
    </style>
</head>
    <body>
    <p>尝试滚动页面。</p>
    <p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
        <div class="sticky">我是粘性定位!
        </div>
        <div style="padding-bottom:2000px">
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        </div>
    </body>
</html>

z-index属性—解决元素重叠问题

 

  • 代码演示

 

  • 作业习题

  • 代码演示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style> 
        .box1{width: 51px;
            height: 51px;
            background: red;
            border: 2px solid red;
            text-align:center;
            }
        .box2{width: 51px;
            height: 51px;
            background: red;
            border: 2px solid red;
            text-align:center;
            }
        .box3{width: 51px;
            height: 51px;
            background: blue;
            border: 2px solid blue;
            text-align:center;
            }
        .box4{width: 51px;
            height: 51px;
            background: red;
            border: 2px solid red;
            text-align:center;
            }
        .box5{width: 51px;
            height: 51px;
            background: red;
            border: 2px solid red;
            text-align:center;
            }
    </style>
    <body>
        <p style="width: 200px;height: 200px;
                  border: 2px solid #ff0000;
                  background-size: 50px 50px;
        ">
            <div class="box1" style="
                    position: absolute;
                    top: 40px;
                    left: 25px;
                    line-height: 50px;
            ">box1
            </div>
            <div class="box2" style="
                    position: absolute;
                    top: 40px;
                    left: 135px;
                    line-height: 50px;
            ">box2
            </div>
            <div class="box3" style="
                    position: absolute;
                    top: 95px;
                    left: 80px;
                    line-height: 50px;
            ">box3
            </div>
            <div class="box4" style="
                    position: absolute;
                    top: 150px;
                    left: 25px;
                    line-height: 50px;
            ">box4
            </div>
            <div class="box5" style="
                    position: absolute;
                    top: 150px;
                    left: 135px;
                    line-height: 50px;
            ">box5
            </div>
        </p>
    </body>
</html>

 

posted @ 2021-02-25 21:34  西瓜的春天  阅读(120)  评论(0)    收藏  举报