[成都|内门弟子]JS-韦骁|2022年08月08日的日报-技能树.IT修真院

发表于： 2022-08-08 19:45:59

1 506

今天将任务三的完成重新上传到github上。

开始任务四：

relative、absolute、fixed这三个属性值有一个共同点，都是相对于某个基点的定位，不同之处仅仅在于基点不同。

所以，只要理解了它们的基点是什么，就很容易掌握这三个属性值。

relative 属性值

relative表示，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置。

它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。

absolute 属性值

absolute表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。

它有一个重要的限制条件：定位基点（一般是父元素）不能是static定位，否则定位基点就会变成整个网页的根元素html。

另外，absolute定位也必须搭配top、bottom、left、right这四个属性一起使用。

fixed 属性值

fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。

这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。

它如果搭配top、bottom、left、right这四个属性一起使用，表示元素的初始位置是基于视口计算的，否则初始位置就是元素的默认位置。

sticky 属性值

sticky跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），

另一些时候自动变成fixed定位（定位基点是视口）。

因此，它能够形成"动态固定"的效果。比如，网页的搜索工具栏，初始加载时在自己的默认位置（relative定位）。

页面向下滚动时，工具栏变成固定位置，始终停留在页面头部（fixed定位）。

等到页面重新向上滚动回到原位，工具栏也会回到默认位置。

按照示图创建好了一个模板：

css代码：

* {
    margin: 0;
    padding: 0;
}

.box {
    width: 720px;
    height: 1280px;
    background-color: #eff0f4;
    margin: 0 auto;
}

.top {
    height: 39px;
    background-color: #5fc0cd;
}

.head {
    padding: 14px 14px 0 14px;
}

.title {
    height: 104px;
    background-color: #5fc0cd;
    margin-bottom: 18px;
}

.close {
    font-size: 32px;
    color: white;
    float: left;
    padding: 24px 30px 27px;
}

.sign-in {
    font-size: 36px;
    color: white;
    float: left;
    margin: 26px 200px;
}

.register {
    font-size: 32px;
    color: white;
    float: right;
    padding: 30px 30px 23px;
}


.user {
    height: 285px;
}

.account {
    height: 100px;
    background-color: white;

}

.password {
    height: 100px;
    background-color: white;
    margin-top: 14px;

}

.mobile-phone {
    margin: 30px;
}

.lock {
    margin: 30px;

}

.confirm {
    height: 321px;

}

.rectangle {
    height: 96px;
    background-color: #5fc0cd;
}
.rectangle p{
    font-size: 36px;
    color: white;
    padding: 25px 300px;
}

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=100%, initial-scale=1.0 ">
    <link rel="stylesheet" href="Landing-page.css">
    <title>Title</title>
</head>
<body>

<div class="box">
    <div class="top">
        <img class="head" src="tupian/Status%20Bar.png" alt="顶部">
    </div>
    <div class="title">
        <p class="close">关闭</p>
        <p class="sign-in">登录</p>
        <p class="register">注册</p>
    </div>
    <div class="user">
        <div class="account">
            <img class="mobile-phone" src="tupian/iphone.png" alt="手机号">
            请输入手机号
        </div>
        <div class="password">
            <img class="lock" src="tupian/locked%202.png" alt="密码">
            请输入密码
        </div>
    </div>
    <div class="confirm">
        <div class="rectangle">
            <p>登录</p>
        </div>
    </div>
</div>
</body>
</html>