原生Html，Css的重要知识点

最新推荐文章于 2024-09-02 12:41:22 发布

爱吃西瓜的小颜

最新推荐文章于 2024-09-02 12:41:22 发布

阅读量539

点赞数 1

分类专栏：前端文章标签： css html 前端

本文链接：https://blog.csdn.net/acxgd_ycx/article/details/127678409

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

学了快一年事件的前端了，目前在主攻vue，很长一段时间构建前端页面都是依靠elenet-ui，bootstarp之类的，最近想来用纯HTML，css(静态网站)来写页面布局（今后肯定会有高度定值化的网站布局了），发现之前学过的东西有很多知识都变得非常的不熟练，还有很多的细节之前的学习过程被忽视了，这一篇博客主要是来记录复习的知识点

首先来讲一下行内元素和块级元素

行内元素

与兄弟元素都是在一行里边
不占有独立的区域，仅仅依靠自己的字体大小或者图像大小来支撑结构
一般是不可以设置宽度，高度以及对其等属性。（这一点是非常值得注意的）
水平方向的margin和padding是可以设置的

块级元素’
5. 每个块级元素都会自己独自占据一行
6. 高度，行高，内外边距都是可以单独设置的
7. 默认的宽度为容器的100%

行内块元素
简单来说就是讲行内元素和块级元素两者的特点进行了结合

display: block;   将元素定义为块级元素
display: inline;  将元素定义为行内元素
display: inline-block； 将元素定义为行内块元素

来讲讲css定位position

对于position有五种应用与元素定位的方法类型，分别是：

static
relative
absolute
fixed
sticky
元素位置的操作其实都是通过top，bottom，left，right属性进行定位的，但是必须得设置position属性，才可以使用之前的top等属性，不同的position属性的值对应不同的定位方式

static

HTML 元素默认情况下的定位方式为 static（静态）。
静态定位的元素不受 top、bottom、left 和 right 属性的影响。
position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位：
简而言之就是该怎样就是怎么样的，因为默认形式就是这个

relative（重点）

position: relative; 的元素相对于其正常位置进行定位。
设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。
这个地方是相对自己本身的位置进行偏移，而且原先位置同样没有消失

在这里插入图片描述

<style>
        div {
            height: 100px;
        }
        .name1{
            background: red;
        }
        .name2{
            position: relative;
            top: 10px;
            left: 20px;
            background: blue;
        }
        .name3{
            background: #e4b653;
        }
    </style>
</head>
<body>
<div class="name1"></div>
<div class="name2"></div>
<div class="name3"></div>
</body>

absolute（重点）

position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。
然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
注释: "被定位的"元素是其位置除 static 以外的任何元素。
还有一点值得注意（与relative不同的地方），元素移动之后之前的位置不会空在那。

在这里插入图片描述
这个是未改变之前的样式

<style>
        .header{
            display: inline-block;
            /*position: relative;*/
        }
        .name1,.name2,.name3 {
            display: inline-block;
            width: 100px;
            height: 100px;
        }
        .name1{
            background: red;
        }
        .name2{
            /*position: absolute;*/
            /*top: 10px;*/
            /*left: 20px;*/
            background: blue;
        }
        .name3{
            background: #e4b653;
        }
    </style>
</head>
<body>
<div class="header">
    <p>acxgdxy</p>
    <div class="name1"></div>
    <div class="name2"></div>
    <div class="name3"></div>
</div>
</body>

在这里插入图片描述
这个是改变之后的样式

<style>
        .header{
            display: inline-block;
            position: relative;
        }
        .name1,.name2,.name3 {
            display: inline-block;
            width: 100px;
            height: 100px;
        }
        .name1{
            background: red;
        }
        .name2{
            position: absolute;
            top: 10px;
            left: 20px;
            background: blue;
        }
        .name3{
            background: #e4b653;
        }
    </style>
</head>
<body>
<div class="header">
    <p>acxgdxy</p>
    <div class="name1"></div>
    <div class="name2"></div>
    <div class="name3"></div>
</div>
</body>
//把注释去掉了而已

fixed

position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。
固定定位的元素不会在页面中通常应放置的位置上留出空隙。

总结来说就是这个定位属性是相对与视图窗口定位的，并且会随着页面的滚动而滚动，大家不妨看一下王者荣耀官网，右侧那个飘动的小妲己就是这个功能实现的（本来想插个图片的，结果说妲己图片违规）

sticky

position: sticky; 的元素根据用户的滚动位置进行定位。
粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其"粘贴"在适当的位置（比如 position:fixed）。

简单的来说就是，在页面滚动的时候，只要接触到页面的边界，定位属性就会从relative变成fixed

举例：
在这里插入图片描述
开始的时候没有接触到顶部（即距顶部的距离>20px），所以表现的为relative，当我们进行页面滚动的时候（到顶部的距离为20px）

可见不管你后边怎么移动都不相对视图窗口的位置都不会变了

这里的距离边框的位置是可以自己定义的，我在这里是距离top 20px

<style>
        .header{
            display: inline-block;
            margin-top: 20px;
        }
        p{
            position: sticky;
            top: 20px;
            background: aqua;
        }
        .name1,.name2,.name3 {
            display: inline-block;
            width: 100px;
            height: 2000px;
        }
        .name1{
            background: red;
        }
        .name2{
            background: blue;
        }
        .name3{
            background: #e4b653;
        }
    </style>
</head>
<body>
<div class="header">
    <p>acxgdxy</p>
    <div class="name1"></div>
    <div class="name2"></div>
    <div class="name3"></div>
</div>
</body>