1. 什么是盒子模型?

   <div class="mydiv">
       就是一个盒子
   </div>

开启怪异盒子

.mydiv {
        width: 300px;
        height: 300px;
        background-color: #f01;
        border: 2px solid #00f;
        padding: 5px;
        /*转换为怪异盒子*/
        box-sizing: border-box;
}

2. 怪异盒子属性

2.1 相对定位:relative

position: relative;
2.1.1 左偏移量
left: 200px;
2.1.2 上偏移量
top: 50px;
2.1.3 案例
<!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>标签</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .mydiv {
            width: 300px;
            height: 300px;
            background-color: #f01;
            /**相对定位:relative*/
            position: relative;
            /**左偏移量*/
            left: 200px;
            /**上偏移量*/
            top: 50px;
        }
    </style>
</head>

<body>
    <div class="mydiv">
        就是一个盒子
    </div>

    <div>
        2
    </div>

    <div>
        3
    </div>


</body>

</html>

2.2 绝对定位:子绝父相

<div class="mydiv">
    <div class="son">
        123
    </div>
</div>
* {
    margin: 0;
    padding: 0;
}
.mydiv {
    width: 400px;
    height: 400px;
    background-color: #f01;
    margin: 200px;
    /**子绝父相*/
    position: relative;
}
.son{
    width: 200px;
    height: 200px;
    background-color: #00f;
    /**绝对定位*/
    position: absolute;
    /**偏移量*/
    left: 10px;
    top: 5px;
}

2.3 固定定位

* {
    margin: 0;
    padding: 0;
}
nav{
    height: 42px;
    width: 100%;
    line-height: 42px;
    background-color: #02d;
    /**固定定位*/
    position: fixed;
    top: 10px;
}
.big{
    height: 2000px;
}
.service{
    width: 50px;
    height: 50px;
    background-color: #f01;
    position: fixed;
    bottom: 30px;
    right: 20px;
}
<div class="service">
    在线客服
</div>
<div class="big"></div> 
<nav>
    导航条
</nav>
最后修改:2022 年 06 月 10 日
如果觉得我的文章对你有用,请随意赞赏