邱越-2020-10-30

HTML：
<!-- 整个页面 -->
        <div class="page">
            <!-- 页眉 -->
            <div class="header">页眉</div>
            <!-- 导航栏 -->
            <div class="naver ">导航</div>
            <!-- 网业主内容区 -->
            <div class="main ">
                内容
                <!-- 广告 -->
                <div class="adv bg"></div>
            </div>
            <!-- 页脚 -->
            <div class="footer ">页脚</div>



CSS：
/* 整个页面 */
.page{
    width: 100%;
    height: auto;
}
    /* 页眉 */
.header{
    width: 100%;
    height: 120px;
}
/* 导航栏 */
.naver{
    width: 100%;
    height: 36px;
    border-bottom: 1px black solid;
    border-top: 1px black solid;
    position: sticky;/* 粘性定位 */
    top: 0px;
}
/* 测试样式 */
.bg{
    background: hotpink;
}
/* 主内容区 */
.main{
    width: 100%;
    height: 1000px;
    position: relative;/* 相对定位 */
}
.adv{
    width: 60px;
    height: 300px;
    position: absolute;/* 绝对定位
    /* position: fixed; *//* 固定位置 */
    top: 200px;
    right: 0px;
}
/* 页脚 */
.footer{
    width: 100%;
    height: 100px;
}

一、普通定位(Static)

　　在我们的开发过程中，除非专门指定，否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。这个就不过多描述了。



二 . 相对定位（relative）

　　在我们前端开发中，relative相对定位一直被看作普通文档流定位模型的一部分，定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动，元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。
三 . 绝对定位（absolute）



在前端开发中，相对于已定位的最近的父类元素，如果没有已定位的最近的父类元素，那么它的位置就相对于最初的包含块（如body）。绝对定位的框可以从它的包含块向上、右、下、左移动。
四 .固定定位（fixed）

　　相对于浏览器窗口，其余的特点类似于绝对定位。fixed元素就是固定在浏览器某个位置的元素，绝对定位是固定在页面的，如果滚动滚动条的话绝对定位的元素也会滚上去，fixed元素不会。

心得体会： 通过今天的实训，我收获了很多，一方面学习到了许多以前没学过的专业知识与知识的应用，另一方面还提高了自己动手做项目的能力。是对我能力的进一步锻炼，也是一种考验。从中获得的诸多收获，也是很可贵的，是非常有意义的。在实训中我学到了许多新的知识。是一个让我把书本上的理论知识运用于实践中的好机会，原来，学的时候感叹学的内容太难懂，现在想来，有些其实并不难，关键在于理解。