CSS基础知识_基本结构中输入css文件标记是什么-CSDN博客

本文链接：https://blog.csdn.net/rqt1013_/article/details/124436929

本文详细介绍了CSS的基础结构、选择器优先级、不同样式如行内样式、层叠原则，以及标签选择器、类选择器和id选择器的应用。还涵盖了文本样式、列表、背景图像、浮动、定位、z-index、字体样式等高级特性，适合深入理解网页设计。

摘要由CSDN通过智能技术生成

一：CSS

CSS：全称是：Cascading Style Sheet（层叠级联样式表）。它的功能是美化网页，如字体，颜色，背景图片，边距，高度，宽度，网页浮动，网页定位等。

CSS基本结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习CSS</title>
    <style>
      h1{
          color: red;
      }
    </style>
</head>
<body>
<h1>这是一级标题</h1>
</body>
</html>

上面这种结构称为css的内部样式。

style标签里面可以编写css代码。css代码语法规则如下：

选择器{
	声明1；
	声明2；
	声明3；
	……
}

声明语句最好用分号来结尾。

我们通常让html和css分离，其基本结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习CSS</title>
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<h1>这是一级标题</h1>
</body>
</html>

css的语法则选择在另一个文件中编写，文件名后缀为.css。

h1{
    color: red;
}

link标签写在head标签下，意思是引入css文件。

上面这种结构称为css的外部样式。

css还有一种样式，称为行内样式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习CSS</title>
</head>
<body>
<h1 style="color: red">这是一级标题</h1>
</body>
</html>

css的三种样式优先级是怎样的呢？通过测试，我们会发现，css的样式遵循就近原则，即哪个样式离css要修饰的标签近，那么就用最近的样式来修饰该标签。也可以理解为程序从上到下扫描，后面出现的样式会覆盖前面的样式，类似于程序言语中变量被重新赋值一样。

二、三个基本选择器

选择器的作用：选择页面上的某一个或某一类元素。

css的三种基本选择器如下：
（1）标签选择器。
（2）类选择器（class）。
（3）id选择器。

（1）标签选择器

标签选择器基本结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习CSS</title>
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
<h1>这是一级标题</h1>
<h1>牛马人生</h1>
</body>
</html>

标签选择器会选择该页面上所有的这个标签的元素。这样子的弊端是页面中所有属于该标签的元素都会被渲染成同一个样式，这显然不是我们希望的。

（2）类选择器

类选择器基本结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习CSS</title>
    <style>
        .title{
            color: #5cb85c;
        }
        .life{
            color: #31b0d5;
        }
    </style>
</head>
<body>
<h1 class="title">这是一级标题</h1>
<h1 class="life">牛马人生</h1>
</body>
</html>

类选择器为每个标签提供一个class属性，类选择器的格式是：.class的名称{ }，在大括号里面填上样式。类选择器的好处是，可以多个标签归类，实现复用，可以跨标签。

（3）id选择器

id选择器的基本结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习CSS</title>
    <style>
        #title{
            color: #5bef05;
        }
        #life{
            color: #31b0d5;
        }
    </style>
</head>
<body>
<h1 id="title">这是一级标题</h1>
<h1 id="life">牛马人生</h1>
</body>
</html>

id选择器为每一个标签提供一个id属性，id选择器的格式是：#id的名称{ }，大括号里面填上样式。id选择器的特点是全局唯一，不支持复用。

三个选择器的优先级：

id选择器 > 类选择器 > 标签选择器。

三、层次选择器

（1）后代选择器

后代选择器基本结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习CSS</title>
    <style>
        body p{
            color: red;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
</body>
</html>

上面的代码中，它会选择body标签后面的所有p标签。效果如下：
在这里插入图片描述

将body看做祖先，则p为其后代——所有的p后代。祖先和后代中间以空格隔开。

（2）子选择器

子选择器的基本结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习CSS</title>
    <style>
       body>p{
           color: #a94442;
       }
    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
</body>
</html>

上面的代码中，它会选择它会选择body标签后面的子标签p标签，而不会选择列表中的p标签。效果如下：
在这里插入图片描述
把body标签看做父亲，后面紧跟的p标签就是儿子，儿子之后的后代就不管了。父亲和儿子中间用 > 隔开。

（3）兄弟选择器（弟弟选择器）

兄弟选择器基本结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习CSS</title>
    <style>
       .active + p{
           color: #d01818;
       }
    </style>
</head>
<body>
    <p>p1</p>
    <p class="active">p2</p>
    <p>p3</p>
</body>
</html>

上面的代码中，选中的标签是<p> p3 </p>，效果如下：
在这里插入图片描述

兄弟选择器会选择当前指定标签的下一个兄弟标签，即选择他的“弟弟”标签。“哥哥”与“弟弟”之间用+连接。

（4）通用选择器（所有同辈弟弟选择器）

通用选择器的基本结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习CSS</title>
    <style>
       .active ~ p{
           color: #d01818;
       }
    </style>
</head>
<body>
    <p>p1</p>
    <p class="active">p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
    <p>p7</p>
    <p>p8</p>
    <p>p9</p>
</body>
</html>

上面的代码中，选中的是：

<p>p3</p>
<p>p7</p>
<p>p8</p>
<p>p9</p>

效果如下：
在这里插入图片描述

通用选择器会选择当前指定标签的所有同辈的“弟弟”标签。“哥哥”与所有“弟弟”之间用~来连接。

四、结构伪类选择器

结构伪类选择器基本结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习CSS</title>
    <style>
        ul li:first-child{
            background: red;
        }
        ul li:last-child{
            background: #92de00;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

效果如下图所示：
在这里插入图片描述
ul li:first-child会选择ul标签的第一个li标签，ul li:last-child会选择ul标签的最后一个li标签。伪类通常是带:的css样式。

五、属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习CSS</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            background: #5bc0de;
            border-radius: 10px;
            text-decoration: none;
            text-align: center;
            margin: 10px;
            line-height: 50px;
        }
    /*  选中有id的元素*/
        a[id]{
            background: #e01414;
        }
    /*  选中id为first的元素*/
        a[id="first"]{
            background: #92de00;
        }
        /*选中class中有links的元素*/
        a[class*="links"]{
            background: #ea0f69;
        }
        /*选中href以http开头的*/
        a[href^=http]{
            background: black;
        }
        /*选中href中以pdf结尾的元素*/
        a[href$=pdf]{
            background: #d6e9c6;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="https://www.baidu.com" class="links item first" id="first">1</a>
    <a href="https://blog.kuangstudy.com" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc" class="links item" id="second">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>

属性选择器是更高级的一种选择器。其格式为：
属性名=属性则（正则）。
一些正则符号如下：
（1）=：表示绝对等于。如a[id="first"]意思为选择属性id属性值绝对等于first的元素。
（2）*=：表示字符串包含于或者存在于其中。如a[class*="links"]意思为选择属性class属性值中存在字符串为links的元素。
（3）^=：表示以某个字符串开头的。如a[href^=http]意思为选择属性href属性值中以http开头的元素。
（4）$=：表示以某个字符串结尾的。如a[href$=pdf]意思为选择属性href属性值中以pdf结尾的元素。

六、字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习CSS</title>
    <style>
        body{
            font-family: 楷体,serif;
        }
        .p1{
            font-size: 50px;
            font-weight: normal;
            color: red;
            font-style: italic;
        }
    </style>
</head>
<body>
<h1>我的失恋</h1>
<h2>——拟古的新打油诗</h2>
<p class="p1">我的所爱在山腰；
    想去寻她山太高，
    低头无法泪沾袍。
    爱人赠我百蝶巾；
    回她什么：猫头鹰。
    从此翻脸不理我，
    不知何故兮使我心惊。
    我的所爱在闹市；
    想去寻她人拥挤，
    仰头无法泪沾耳。
    爱人赠我双燕图；
    回她什么：冰糖壶卢。
    从此翻脸不理我，
    不知何故兮使我糊涂。
    我的所爱在河滨；
    想去寻她河水深，
    歪头无法泪沾襟。
    爱人赠我金表索；
    回她什么：发汗药。
    从此翻脸不理我，
    不知何故兮使我神经衰弱。
    我的所爱在豪家；
    想去寻她兮没有汽车，
    摇头无法泪如麻。
    爱人赠我玫瑰花；
    回她什么：赤练蛇。
    从此翻脸不理我。
    不知何故兮——由她去罢。
</p>
</body>
</html>

一些有关字体的样式如下：
（1）font-family：字体，比如说有楷体，微软雅黑，宋体等字体。
（2）font-size：字体的大小。
（3）font-weight：字体的粗细。
（4）color：字体的颜色。
（5）font-style：字体风格。

另外还有一个比较重要的标签：span标签。它的作用是用来突出重点要显示的字体。通常用span标签将要显示的字体套起来。

七、文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习CSS</title>
    <style>
        body{
            font-family: 楷体,serif;
        }
        h1{
            text-align: center;
        }
        h2{
            text-align: center;
        }
        .p1{
            text-indent: 2em;
            line-height: 100px;
        }
        #l1{
            text-decoration:overline;
        }
        img,span{
            vertical-align: middle;
        }
    </style>
</head>
<body>
<h1>我的失恋</h1>
<h2>——拟古的新打油诗</h2>
<p class="p1">我的所爱在山腰；
    想去寻她山太高，
    低头无法泪沾袍。
    爱人赠我百蝶巾；
    回她什么：猫头鹰。
    从此翻脸不理我，
    不知何故兮使我心惊。
    我的所爱在闹市；
    想去寻她人拥挤，
    仰头无法泪沾耳。
    爱人赠我双燕图；
    回她什么：冰糖壶卢。
    从此翻脸不理我，
    不知何故兮使我糊涂。
    我的所爱在河滨；
    想去寻她河水深，
    歪头无法泪沾襟。
    爱人赠我金表索；
    回她什么：发汗药。
    从此翻脸不理我，
    不知何故兮使我神经衰弱。
    我的所爱在豪家；
    想去寻她兮没有汽车，
    摇头无法泪如麻。
    爱人赠我玫瑰花；
    回她什么：赤练蛇。
    从此翻脸不理我。
    不知何故兮——由她去罢。
</p>
<p id="l1">111</p>
<img src="../image/u=3007709509,2093393272&fm=26&gp=0.jpg" alt="加载出错">
<span>小狐狸</span>
</body>
</html>

一些有关文本的样式如下：
（1）text-align：文本的对齐方式，可选项有center，right，left等。如text-align: center;就意味着让该文本居中。
（2）text-indent：首行缩进。如text-indent: 2em;就是首行缩进2个。
（3）line-height：行高，一行文本的高度。注意：行高并不是文本的高度。若要让单行文字上下居中，只需要让line-height等于height即可。
（4）text-decoration：文本修饰。可以定义一些修饰文本的样式。如underline代表下划线，line-through代表中划线，overline代表上划线。
（5）vertical-align: middle：文本与图片水平对齐。

八、超链接伪类和文本阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习CSS</title>
    <style>
        a{
            text-decoration: none;
            color: blue;
        }
        a:hover{
            color: orange;
            font-size: 30px;
        }
        a:active{
            color: red;
        }
        #author{
            text-shadow: 2px 2px 4px #00ffff;
        }

    </style>
</head>
<body>
<a href="#">
    <img src="../image/u=3007709509,2093393272&fm=26&gp=0.jpg" alt="加载出错">
</a>
<p>
    <a href="#">小狐狸</a>
</p>
<p>
    <a href="#" id="author">作者：牛马</a>
</p>
</body>
</html>

一些有关的样式讲解如下：
（1）text-decoration: none：可以让超链接标签文字自带的下划线消失。
（2）a:hover：这种类型的称为超链接伪类。hover代表鼠标悬停时的状态，当鼠标悬浮在该链接上时，可以呈现出指定的样式，如颜色，字体等。
（3）a:active：active表示鼠标按住但是未被释放时的状态。
（4）text-shadow：该样式可以让文字有阴影效果。

九、列表样式

列表格式如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习CSS</title>
    <link rel="stylesheet" href="../css/style.css" type="text/css">
</head>
<body>
    <div id="nav">
        <h2 class="title">全部商品分类</h2>
        <ul>
            <li>
                <a href="#">图书</a>
                <a href="#">音像</a>
                <a href="#">数字商品</a>
            </li>
            <li>
                <a href="#">家用电器</a>
                <a href="#">手机</a>
                <a href="#">数码</a>
            </li>
            <li>
                <a href="#">电脑</a>
                <a href="#">办公</a>
            </li>
            <li>
                <a href="#">家居</a>
                <a href="#">家装</a>
                <a href="#">厨具</a>
            </li>
            <li>
                <a href="#">服饰鞋帽</a>
                <a href="#">个性化妆</a>
            </li>
            <li>
                <a href="#">礼品箱包</a>
                <a href="#">钟表</a>
                <a href="#">珠宝</a>
            </li>
            <li>
                <a href="#">食品饮料</a>
                <a href="#">保健食品</a>
            </li>
            <li>
                <a href="#">彩票</a>
                <a href="#">旅行</a>
                <a href="#">充值</a>
                <a href="#">票务</a>
            </li>
        </ul>
    </div>

</body>
</html>

css样式文件如下：

#nav{
    background: #95eaea;
    width: 300px;
}
.title{
    font-size: 30px;
    font-weight: bolder;
    text-indent: 1em;
    line-height: 40px;
    background: #8493c7;
}

ul li{
    height: 40px;
    list-style: circle;
    text-indent: 1em;
}
a{
    color: black;
    text-decoration: none;
}
a:hover{
    color: red;
    text-decoration: underline;
}

整体效果如下：
在这里插入图片描述

跟列表有关的样式如下：
list-style：列表的风格。可以填none，或者circle等。前者去除掉列表前的符号，后者让列表前的符号为空心圆。

十、背景图像应用及渐变

背景图像应用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习CSS</title>
    <style>
        div{
            width: 1000px;
            height: 1000px;
            border: 2px solid red;
            background-image: url("../image/u=3007709509,2093393272&fm=26&gp=0.jpg");
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <br>
    <div class="div2"></div>
    <br>
    <div class="div3"></div>
</body>
</html>

有关样式如下：
（1）background-image：背景图片。默认方式为repeat，意思为平铺满整个框框。
（2）background-repeat：背景图片的平铺方式。可选项为：repeat-x为水平平铺，repeat-y为垂直平铺，no-repeat为不平铺，即保持原来的方式。

渐变应用：
可以借助在线网站Grabient来完成各种渐变效果，都是人家写好的。将其css样式过来用即可。

十一、盒子模型

盒子模型如下：
在这里插入图片描述

从以上的图中，我们可以知道除了内容元素之外，还有三个具体的样式：
（1）margin：外边距。即围绕在边框的空白区域。
（2）border：边框。
（3）padding：内边距。即边框与元素内容之间的空白区域。

盒子的计算方式：你这个元素到底有多大？
盒子的宽：内容的宽：width+padding2+border2+margin*2
盒子的高：内容的高：height+padding2+border2+margin*2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习CSS</title>
    <style>
        #box{
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;   /* 实现盒子模型居中   */
        }
        form{
            background: #f3e336;
            padding-top: 10px;
        }
        #form div input{
            border: 1px solid black;
        }

        h2{
            margin: 0;
            background: #5bc0de;
            font-size: 20px;
            text-align: center;
            color: white;
        }
    </style>
</head>
<body>
    <div id="box">
        <div>
            <h2>会员登录</h2>
        </div>
        <form action="#" id="form">
            <div>
                <label>
                    <span>用户名：</span>
                    <input type="text">
                </label>
            </div>
            <div>
                <label>
                    <span>密  码：</span>
                    <input type="text">
                </label>
            </div>
        </form>
    </div>
</body>
</html>

如何让整个盒子模型居中呢？答案是：margin: 0 auto ，这个样式会让整个盒子模型的上下外边距为0，左右外边距会相等。

还可以通过border-radius设置圆角边框。

十二、float、display和overflow属性

先明白俩个概念：块级元素和行内元素。
块级元素有以下标签：
<div>、<table>、<form>、<p>、<ul>、<h1>......<h6>、<hr>等。
行内元素有以下标签：
<span>、<a>、 <img>、 <input>、<textarea>、<select>、<label>等。

那它们之间的区别是什么呢？
块级元素：
（1）总是从新的一行开始，即各个块级元素独占一行，默认垂直向下排列。
（2）高度、宽度、margin及padding都是可控的，设置有效，有边距效果。
（3）宽度没有设置时，默认为100%。
（4）块级元素中可以包含块级元素和行内元素。

行内元素：
（1）和其他元素都在一行，即行内元素和其他行内元素都会在一条水平线上排列。
（2）高度、宽度是不可控的，设置无效，由内容决定。

行内元素和块级元素是可以相互转换的，HTML可以将元素分为行内元素、块状元素和行内块状元素三种。利用display属性可以将三者任意转换：
（1）display:inline：转换为行内元素。
（2）display:block：转换为块级元素。
（3）display:inline-block：转换为行内块级元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习CSS</title>
    <style>
        .player1{
            display: inline-block;
            float: right;
        }
        .player2{
            display: inline-block;
            float: right;
        }
        .player3{
            display: inline-block;
            float: right;
        }
    </style>
</head>
<body>
    <div class="player1">
        <img src="../image/u=3007709509,2093393272&fm=26&gp=0.jpg" alt="出错">
    </div>
    <div class="player2">
        <img src="../image/向下箭头.png" alt="出错">
    </div>
    <div class="player3">
        <img src="../image/u=4000016505,4011231727&fm=26&gp=0.jpg" alt="出错">
    </div>

</body>
</html>

float属性定义的功能为浮动。即可以让该元素浮动在某个方位，类似于图层的概念。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习CSS</title>
    <style>
        #content{
            width: 300px;
            height: 250px;
            overflow: scroll;
        }
    </style>
</head>
<body >
    <div id="content">
        <img src="../image/u=4000016505,4011231727&fm=26&gp=0.jpg" alt="">
        <p>“牛马，网络流行词，本意是指牛和马，两种牲畜，现用来比喻为生活所迫供人驱使从事艰苦劳动的人。”</p>
    </div>
</body>
</html>

overflow这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。取值说明：
（1）hidden：不显示超过对象尺寸的内容。
（2）scroll：总是显示滚动条。
（3）auto：在必需时对象内容才会被裁切或显示滚动条。
（4）visible：默认值。不剪切内容也不添加滚动条。假如显式声明此默认值，对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效。

十三、定位

position属性有以下取值：
（1）relative：意思是相对定位，即相对于自己原来的位置偏移了多少。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习CSS</title>
    <style>
       div{
           margin: 10px;
           line-height: 35px;
       }
       #father{
           border: 1px solid red;
           padding: 5px;
       }
       #first{
           border: 1px dashed green;
           position: relative;
           bottom: 10px;
           left: 10px;
       }
       #second{
           border: 1px dashed green;
           position: relative;
           bottom: 10px;
           left: 10px;
       }
       #third{
           border: 1px dashed green;
           position: relative;
           bottom: 10px;
           left: 10px;
       }
    </style>
</head>
<body>
    <div id="father">
        <div id="first">第二个盒子</div>
        <div id="second">第三个盒子</div>
        <div id="third">第四个盒子</div>
    </div>
</body>
</html>

如left:10px此时会相对于原来位置的左边偏移，就是往右移动了10个像素的距离。bottom:10px就是往上移动了10个像素的距离。

（2）absolute：意思是绝对定位。绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习CSS</title>
    <style>
       div{
           margin: 10px;
           line-height: 35px;
       }
       #father{
           border: 1px solid red;
           padding: 5px;
           position: relative;   /*父级元素已经定位了*/
       }
       #first{
           border: 1px dashed green;
           position: absolute;
           right: 30px;    /*此时会相对父级元素*/
       }
       #second{
           border: 1px dashed green;
       }
       #third{
           border: 1px dashed green;

       }
    </style>
</head>
<body>
    <div id="father">
        <div id="first">第二个盒子</div>
        <div id="second">第三个盒子</div>
        <div id="third">第四个盒子</div>
    </div>
</body>
</html>

（3）fixed：意思是固定定位。元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习CSS</title>
    <style>
        body{
            height: 1000px;
        }
        body div:nth-of-type(1){
            background: red;
            width: 100px;
            height: 100px;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        body div:nth-of-type(2){
            background: black;
            width: 100px;
            height: 100px;
            position: fixed;
            left: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
</body>
</html>

十四、z-index属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习CSS</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #content{
            font-size: 12px;
            line-height: 25px;
            overflow: hidden;
            width: 700px;
            border: 1px solid black;
        }
        #content ul{
            position: relative;
        }
        .niu{
            position: absolute;
            bottom: 15px;
            left: 0;
            font-size: 20px;
            list-style: none;
            z-index: 999;
            color: white;
        }
        .ma{
            position: absolute;
            bottom: 15px;
            right: 110px;
            font-size: 20px;
            list-style: none;
            z-index: 999;
            color: white;
        }

    </style>
</head>
<body>
    <div id="content">
        <ul>
            <li><img src="../image/bg.webp" alt=""></li>
            <li class="niu">牛马</li>
            <li class="ma">作者：狂神</li>
        </ul>
    </div>
</body>
</html>