CSS3的学习笔记

什么是css:

CSS是层叠样式表（Cascading Style Sheets）的缩写，是一种用来描述网页样式和布局的标记语言。它可以控制网页中的文字大小、颜色、间距、背景、边框、布局等方面，使网页更加美观和易于阅读。通过CSS，网页设计师可以将样式和布局与网页内容分离，使得修改和管理样式变得更加简单和高效。CSS可以通过内联样式、嵌入样式和外部样式表的方式来应用到网页中。

一：css的几种使用方式

1.行内样式：即直接在标签元素中，编写style属性：

<h1 style="color: red">标题</h1>

2.在CSS2中，我们经常使用`<style>`标签将CSS代码直接嵌入HTML文件中，而不需要将CSS代码单独放在外部文件中。这种方式被称为内部样式。当然，css3也可以用这种方法。注意，别忘了写在head内部：

<head><meta charset="UTF-8"><title>Title</title><style>h1{color:red;}</style>
</head>
<!--h1是选择器，意为对标题进行改写-->

3.在css3中，我们可以在其他的文件中单独写入css文件，然后把html文件绑定在一起。即外部样式。

<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="my_css.css"> <!--记得链接-->
</head>
<body>

  h1{color:red;}

4.不常用的导入式，是css2.1特有的，也属于外部样式，不过第三种是链接式：

<style>@import url("my_css.css");
</style>

效果均如下：

在这里插入图片描述

我们一般建议使用html，css分离的方法，即第三种方法。

彼此的优先级是：就近原则。

注意，在本文的学习资料中，为了方便，我们使用第二种方法。

二：选择器

CSS选择器是一种用于选择HTML元素并为其应用样式的模式。选择器可以根据元素的标签名、类名、ID、属性等进行选择。通过使用选择器，可以精确地指定需要应用样式的元素，从而实现对网页布局和外观的控制。CSS选择器的灵活性和强大功能使得开发者能够以各种方式选择和定位元素，从而实现对网页样式的精确控制。

2.1.基本选择器：

1.标签选择器

<style>h1{color:#123456;/*颜色*/background:#3cbda6;/*背景色*/border-radius: 24px;/*圆角程度*/font-size: 30px/*字体大小*/}</style>

它会选中所有的h1并进行操作。

效果预览：

2.类选择器

我们在实际运用中，肯定有多个h1，那我们怎么才能保证只改变其中的一些呢，那就要运用到类选择器。

我们先将h1标签命名为一个类：

<h1 class="Lingxiao">注册</h1>

然后在head中进行编辑：

<style>.Lingxiao{color:red;}</style>

效果预览：

在这里插入图片描述

我们可以通过类选择器，进行部分标签集体编辑，更加方便。

3.id选择器

<head><meta charset="UTF-8"><title>Title</title><style>#Lingxiao{color:red;}</style>
</head>
<body>
<h1 id="Lingxiao">注册</h1>
<h1>注册</h1>

效果同上图，注意，在实际中，id要确保具有唯一性。

优先级：id选择器>class选择器>标签选择器。

2.2：层次选择器：

1.后代选择器，即一代后面所有的全部选中：

<style>body p{background:red;}
</style>
<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>

在这里插入图片描述

2.子选择器，即选择它的下一代

<style>body>p{background:red;}
</style>
<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>

在这里插入图片描述

即body下的一代才有。

3.相邻兄弟选择器，即同辈且相邻，注意，相邻选择器选择它的下一个同辈，他是向下查找的，且只会找最近的那个

<head><meta charset="UTF-8"><title>Title</title><style>.active+p{color:red;}</style>
</head>
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul><li><p>p4</p></li><li><p class="active">p5</p></li><li><p>p6</p></li>
</ul>
<p class="active">p7</p>
<p>p8</p>
</body>

效果预览：

在这里插入图片描述

如图，变红的是2，3的下一个，即5，6。注意：在这个HTML中，`p6`元素是`li`元素内部的`p`元素，而不是直接跟在`p5`元素后面的兄弟元素。因此，根据HTML结构，`p6`元素不符合`.active+p`选择器的条件，所以它不会被选择并且颜色不会变成红色。

4.通用兄弟选择器

选择它下面的全部兄弟

<head><meta charset="UTF-8"><title>Title</title><style>.active~p{color:red;}</style>
</head>
<body>
<p class="active">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>
<p>p7</p>
</body>

注意：p4,p5,p6是属于ul标签的，因此并不是p1的兄弟，所以不会变化，而p7是p1的兄弟，所以变红。

2.3：结构伪类选择器(一般带有’😂

  <style>ul li:first-child{color:red;}ul li:last-child{color:yellow;}/*这种方法直接找到它的第一个，最后一个元素*/p:nth-child(1){color:pink;}/*这种方法是找到当前p元素的父级元素，并且选择父级元素后的第1个元素，并且是p元素才会生效*/</style>
</head>
<body>
<h1>标题</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul><li>li1</li><li>li2</li><li>li3</li>
</ul>
<p>p7</p>
</body>

效果预览：

在这里插入图片描述

因为p的父级元素是body，但是body的第一个元素是h，所以不生效。我们可以改成：

p:nth-child(2){color:pink;}

在这里插入图片描述

这样就可以正确的显示了。

我们上面是按照顺序选，所以p:nth-child(n)是选择p的父级元素下面按照顺序选的第二个元素，那我们也可以按照类型来选：

 <style>ul li:first-child{color:red;}ul li:last-child{color:yellow;}p:nth-of-type(2){color:pink;}</style>

效果如下：

在这里插入图片描述

这种选择方法是选择p元素的父级元素下p类型的第二个，即不会存在匹不匹配的问题，它直接定位在p这种类型里面。

当然，还有一些特效也可以通过伪类来实现：

a:hover{
background:red;
}/*光标移动到上面变色*/

2.4：属性选择器(常用)

假如你已经有了以下代码：

<style>.demo a{float:left;display:block;height:50px;width:50px;border-radius:10px;background:red;text-align:center;color:gainsboro;text-decoration:none;margin-right:5px;font:bold 20px/50px Arial;}</style>
</head>
<body>
<p class="demo"><a href="http://www.baidu.com" class="links item first" id="first">1</a><a href="http://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">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>

效果如下：

在这里插入图片描述

其中， .demo a是用了类选择器+后代选择器，"float: left"属性使元素在其容器内向左浮动。"display: block"属性将元素设置为块级元素。"height"和"width"属性设置元素的尺寸。"border-radius"属性为元素创建了圆角。"background"属性设置了元素的背景颜色。"text-align"属性设置了元素内文本的对齐方式。"color"属性设置了文本的颜色。"text-decoration"属性设置了文本的装饰效果。"margin-right"属性设置了元素右侧的外边距。"font"属性设置了元素内文本的字体样式、大小、行高和字体族。那么现在就可以用属性选择器进行编辑。

当然，在此之前，有一些常用的正则表达式需要记忆：

1.=：绝对等于

2.*=：包含该元素

3.^=：以…开头

4.$=：以…结尾

例子一：

 /*选择存在id属性的元素*/a[id]{background:yellow;}

因为只有1存在id元素，所以只有它变化，效果如下：

在这里插入图片描述

当然，还可以具体选择id，效果同上：

a[id=first]{background:yellow;
}

例子二.

a[class*="link"]{
background:blue;
}

因为全部包含link，所以效果为：

在这里插入图片描述

例子三：

a[href^=http]{
background:yellow;
}

效果如下：

在这里插入图片描述

例子四：

a[href$=pdf]{
background:black;
}

效果如下：

在这里插入图片描述

三：网页美化的元素

1.span标签：

<span id="title1">双十二</span>要来了

在body内部，我们可以将重点想要突出的字，用span标签囊括起来，再在css中编辑，当然，你可以使用任意的标签囊括，只不过用span更像一件约定俗成的行为。

2.字体样式：

<style>body{font-family:楷体;<!--字体样式-->}h1{font-size:40px; <!--字体大小-->}.p1{font-weight:lighter;<!--字体粗细-->}.p2{color:red;<!--颜色-->}</style>

当然，在定义字体样式时，可以加上一种英文样式，这样，中文样式针对中文，英文样式针对英文和数字。

预览如下：

在这里插入图片描述

我们也可以简写：

p{font:oblique bolder 16px "楷体";
}

注意，简写要有一定的顺序，即字体风格，字体粗细，字体大小，字体样式，效果如下：

在这里插入图片描述

3.文本样式：

3.1：颜色：

h1{color:#000000;
}

对颜色的编辑，除了用描述，还可以用16进制的RGB来描述，即R(RED),G(GREEN),B(BLUE)，每两位表示对一种颜色程度的描述，00表示最浅，FF表示最深，000000表示黑色，FFFFFF表示白色，00FF00表示绿色。

当然，除了RGB,还有RGBA，A表示透明度，除了上面的写法，它们还可以用类似于函数传参的方式：

color:rgba(0,255,255,0.5);
color:rgb(0,0,0);

注意：透明度范围是0-1。

3.2：文本位置：

text:align:left;

即文本居右，当然，还可以设置为，right，center。

3.3：首行缩进：

text:indent:2em;

一般用em为单位，2px两个像素点太小。

3.4：行高：

line-height:300px;

注意，当行高与height相同时，就可以单行文字上下居中。

3.5：划线：

text-decoration:line-through;
text-decoration:underline;
text-decoration:overline;

分别为中划线和下划线，上划线。

当然，a标签默认具有下划线，我们也可以去掉下划线：

text-decoration:none;

3.6: 垂直居中对齐：

<style>img,span{vertical-align:middle;}
</style>

将图片和span标签中的内容垂直居中对齐。

3.7：阴影：

text-shadow:#3cc7f5 10px 10px 10px;

参数：颜色，偏移，垂直偏移，阴影半径(可以为负值或者0)。

4.超链接伪类：

<head><meta charset="UTF-8"><title>Title</title><style>/*默认颜色*/a{color:#000000;text-decoration:none;}/*鼠标悬浮*/a:hover{color:orange;font-size:50px;//悬浮变大}/*鼠标按住未释放*/a:active{color:green;}</style>
</head>
<body>
<p><a href="#">hello,world</a>
</p>
</body>

注意：`<a href="#">hello,world</a>`中的#表示尚未设置跳转，悬浮预览如下：

在这里插入图片描述

当然，还有如下两个操作：

	     a:link{color:blue;}a:visited{color:pink;}

a:link表示未访问的超链接样式，设置为蓝色；a:visited表示已访问的超链接样式，设置为粉色。这样可以让用户在浏览网页时更容易地区分已访问和未访问的链接。

5.列表：

假如你有以下代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>媒体元素学习</title>
</head>
<body>
<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>
</body>
</html>

该代码的效果如下：

在这里插入图片描述

现在对它进行修改：

<style>.title{font-size:18px;font-weight:bold;text-indent:1em;line-height:35px;background:red;}ul{background:grey;}ul li{height:30px;list-style:none;text-indent:1em;}a{text-decoration:none;color:#000;font-size:14px;}a:hover{color:orange;text-decoration:underline;}</style>

.title 类定义了标题的样式。它设置了字体大小为18像素，加粗，缩进1em，行高为35像素，并且背景颜色为红色。
ul 元素样式定义了无序列表（ul）的样式。它设置了背景颜色为灰色。
ul li 元素样式定义了无序列表项（li）的样式。它设置了每个列表项的高度为30像素，去掉了默认的列表标记，以及设置了文本缩进为1em。
a 元素样式定义了超链接（a）的样式。它设置了文本装饰为无，颜色为黑色，字体大小为14像素。
a:hover 伪类定义了超链接在鼠标悬停时的样式。它设置了颜色为橙色，并且添加了下划线。

注意，列表可以用下面的操作改变前面的符号：

list-style:none:去掉圆点circle:空心圆decimsl:数字square:正方形

预览如下：

在这里插入图片描述

颜色区域太大了怎么办？可以把html代码封装在一个1标签内，对标签的长短进行限定：

<div id="nav">
........
</div>

#nav{
width:300px;
background:grey;
}

注意，这里的div和上面的nav一样，约定俗成。我们在nav中统一改变了颜色，这样就可以去掉之间的白色空地。

预览：

在这里插入图片描述

6.背景：

6.1：图片

 <style>div{width:1000px;height:700px;border:1px solid red;background-image:url("1.jpg");background-size: 50px 50px;}</style>
</head>
<body>
<div class="div1">

其中，background-image插入背景图片，size设置图片大小，并且它们是作为div的背景。

在这里插入图片描述

默认是全部平铺的，我们可以进行操作改变平铺方式：

.div1{background-repeat:no-repeat;/*不平铺*/background-repeat:repeat-x;/*只在x方向上平铺一排*/background-repeat:repeat-y;/*只在y方向上平铺一列*/}

我们可以利用背景加一些箭头：

.title{font-size:18px;font-weight:bold;text-indent:1em;line-height:35px;background:red url("3.png")197px -10px no-repeat;}ul{background:grey;}ul li{height:30px;list-style:none;text-indent:1em;background-image:url("3.png");background-repeat:no-repeat;background-position:236px -5px;}

预览如下：

在这里插入图片描述

6.2：渐变：

渐变有径向渐变，圆形渐变…

<head><meta charset="UTF-8"><style>div{background: linear-gradient(to right, #ff9966, #ff5e62);width:300px;height:500px;}</style>
</head>
<body>
<div>
</div>
</body>

具体渐变的实现可以复制专业网站的代码。

四：盒子模型：

在这里插入图片描述

4.1：什么是盒子：

在CSS中，盒子是指元素的基本结构，它包括内容区域、内边距、边框和外边距。在网页布局中，盒子用来定义元素的尺寸、位置和外观。盒子模型是CSS布局的基本概念，它决定了元素在页面上的排列方式和外观样式。通过设置盒子的属性，可以控制元素的大小、边框样式、内外边距等，从而实现不同的布局效果。

margin：外边距

指定元素的外边距，用于控制元素与其他元素之间的间距。可以设置上、下、左、右四个方向的外边距，也可以设置统一的外边距值。例如，margin: 10px; 表示设置元素的上下左右外边距都为10像素。

padding：内边距

指定元素的内边距，用于控制元素内容区域与边框之间的间距。可以设置上、下、左、右四个方向的内边距，也可以设置统一的内边距值。例如，padding: 20px 10px; 表示设置元素的上下内边距为20像素，左右内边距为10像素。

border：边框

指定元素的边框样式，用于围绕元素的内容和内边距绘制边框。可以设置边框的宽度、样式和颜色。例如，border: 1px solid #000; 表示设置元素的边框宽度为1像素，样式为实线，颜色为黑色。

4.2：边框：

4.2.1：边框的粗细；

4.2.2：边框的样式；

4.2.3：边框的颜色；

现有以下代码：

 <style>/*border:粗细 样式 颜色*/#app{border:1px solid red;width:300px;}</style>
</head>
<body>
<div id="app">
<h2>会员登录</h2><form action="#"><div><span>用户名：</span><input type="text"></div><div><span>密码：</span><input type="text"></div><div><span>邮箱：</span><input type="text"></div></form>
</div>

border属性来设置样式，粗细，颜色，预览如下：

在这里插入图片描述

我们可以发现，红色边框和顶部有一定的距离，因为body的margin属性默认有值，我们可以手动设置为0：

body{margin:0;}

在编程时，我们可以有意识的进行初始化：

h1,ul,li,a,body{margin:0;paddding:0;text-decoration:none;
}

4.3：内外边距：

无论是外边距还是内边距，既可以分开来设置：

margin-left:0;
margin-right:0;

也可以合在一起设置，但是4个合在一起设置时，要按照上右下左的顺序：

margin:0 0 0 0;

R如果只写两个，那么第一个是上下，第二个是左右。这样，我们就可以把左上角的边框移到正中央：

margin:0 auto;

具体含义是将上下外边距设置为0，左右外边距设置为auto。这意味着元素的上下外边距为0，而左右外边距会自动调整以实现水平居中的效果。

在这里插入图片描述

但是，`margin:0 auto`居中不能直接让body居中，因为body实际上是一个全部，必须要有块元素，并且块元素有一定的宽度。

盒子的计算方式：

margin+border+padding+内容宽度

4.4：圆角：

<style>div{width:100px;height:100px;border:10px solid red;border-radius:50px 20px;}</style>
</head>
<body>
<div id="nav">
</div>
</body>`

`border-radius:50px 20px;`，同理，两个参数表示正对角线，负对角线。

在这里插入图片描述

`border-radius:50px 20px 10px 5px;`4个参数表示左上，右上，右下，左下顺时针方向。

在这里插入图片描述

当然，如果宽度高度，圆角程度相同，就会变成一个⚪。

border-radius:100px 100px;

在这里插入图片描述

还可以变成半圆:

div{width:100px;height:50px;border:10px solid red;border-radius:100px 100px 0px 0px;}

在这里插入图片描述

我们可以把它运用到图片上去，就可以改变图片的形状。

4.5：盒子阴影：

<style>div{width:100px;height:50px;border:10px solid red;box-shadow:10px 10px 10px yellow; }</style>

本例子中阴影的参数分别水平偏移量（10px），垂直偏移量（10px），模糊半径（10px），以及阴影颜色（yellow）。

在这里插入图片描述

当然，我们还可以让它居中，但是，`margin:0 auto`居中不能直接让body居中，因为body实际上是一个全部，必须要有块元素，并且块元素有一定的宽度。因为它设置的是模块在页面中的显示位置，而div中如果没有设置宽度所以和浏览器一样宽，就无法居中，代码如下：

<style>div{width:10px;height:10px;box-shadow:10px 10px 10px yellow;border-radius:50px;margin:0 auto;}img{width:10px;height:10px;}</style>
</head>
<body>
<div id="nav"><img src="1.jpg">
</div>
</body>

看，对img设置了高度，宽度，预览如下：

在这里插入图片描述

五：布局：

5.1.标准文档流

1.块级元素：

h1~h6  p   div   列表......

2.行内元素：

span   a   img   strong

行内元素可以包含在块级元素内，反正不行。

5.2.display

现在有如下代码：

<style>div{width:100px;height:100px;border:1px solid red;}span{width:100px;height:100px;border:1px solid red;}</style>
</head>
<body>
<div id="nav">块级元素</div>
<span>行内元素</span>
</body>

预览如下：

在这里插入图片描述

我们可以把span的行内元素性质该为块级元素：

display:block;

在这里插入图片描述

即成为块级元素，除了block，还有inline(行内属性)，以及line-block(两种属性混合，是块元素，但是可以内联)和none(消失)等操作，比如：

<style>div{width:100px;height:100px;border:1px solid red;display:inline-block;}span{width:100px;height:100px;border:1px solid red;display:inline-block;}</style>

在这里插入图片描述

5.3.浮动：

现有如下代码：

<head><meta charset="UTF-8"><style>div{margin:10px;padding:5px;}#nav{border:1px #000 solid;.p1{border:1px #F00 dashed;display:inline-block;}.p2{border:1px #00F dashed;display:inline-block;}.p3{border:1px #060 dashed;display:inline-block;}.p4{border:1px #666 dashed;display:inline-block;font-size:12px;line-height:23px;}}</style>
</head>
<body>
<div id="nav"><div class="p1"><img src="1.jpg" height="400px" width="280px" alt=""></div><div class="p2"><img src="2.png" height="50px" width="60px" alt=""></div><div class="p3"><img src="3.png" alt=""></div><div class="p4">浮动的盒子可以向右浮动，也可以向左浮动，直到它的边缘碰到包含框或者另外的浮动盒子为止。</div>
</div>
</body>

效果如下：

在这里插入图片描述

我们可以通过`float:关键字`进行操作：

<style>div{margin:10px;padding:5px;}#nav{border:1px #000 solid;.p1{border:1px #F00 dashed;display:inline-block;float:left;}.p2{border:1px #00F dashed;display:inline-block;float:right;}.p3{border:1px #060 dashed;display:inline-block;}.p4{border:1px #666 dashed;display:inline-block;font-size:12px;line-height:23px;}</style>

效果如下：

在这里插入图片描述

就像画画的图层，现在图片的图层是浮动在黑色边框的上面的。

5.4：父级边框塌陷的问题

浮动操作常常会遇到问题：当打开的网页大小不一样时，浮动的效果也会不一样：

在这里插入图片描述

代码事实上没有改变，但是缩小了网页框，就改变了布局，在很多时候，这不是我们想要的结果。

我们可以用`clear:关键字`来改变这种情况：

clear:right;/*清除右侧浮动*/
clear:left;/*清除左侧浮动*/
clear:both;/*清除两侧浮动*/
clear:none;/*不浮动*/

不浮动会恢复最初状态，清除浮动，例如，清除右侧浮动会让原来的右侧浮动取消，并出现在下面，成为新的块级元素：

在这里插入图片描述

当然，还有其他的解决方案：

1.增加父级元素的高度：当父级元素的高度足够高，那么怎么浮动都在里面。

2.增加一个新的div，并且清除两侧的浮动。

html-body部分：

<div class="clear"></div>

.clear{clear:both;margin:0;padding:0;}

css部分。

3.在父级元素中添加一个overflow:hidden;

overflow:hidden是一种CSS属性，用于隐藏容器中溢出的内容。当内容超出容器的尺寸时，设置overflow:hidden会将超出部分裁剪掉，而不会显示在容器外部。这种属性通常用于创建可滚动的容器，隐藏溢出的内容以保持页面的整洁和美观。

overflow还有以下操作：

overflow: visible;：默认值，内容会在容器外部可见，可能会溢出容器。
overflow: scroll;：如果内容溢出容器，会显示滚动条以便查看超出的内容。
overflow: auto;：如果内容溢出容器，会显示滚动条以便查看超出的内容，如果内容没有溢出则不显示滚动条。
overflow: hidden;：超出容器的内容会被隐藏，不会显示在容器外部。

4.父类添加伪类：

#nav:after{content:'';display:block;clear:both;}

在css中加入这段话，这段CSS代码是用来清除浮动的效果。它使用了:after伪元素来在#nav元素后面创建一个空的块级元素，然后设置其display属性为block，并且清除了它前面的浮动元素，以确保#nav元素能够正确地包裹其内部的浮动元素。这样可以避免出现布局错乱的情况。content属性用于在伪元素中插入一些内容。在这个例子中，content:‘’;表示在#nav元素后面插入一个空内容的块级元素。这个属性通常用于伪元素，例如:before和:after，用来插入一些额外的内容，比如图标、文字等。

下面是四种办法的结果：

在这里插入图片描述

5.5：对比：

display：方向不可以控制。

float：会发生塌陷问题。

六：定位：

6.1.相对定位：

现有如下代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>body{padding :20px;}div{margin:10px;padding:5px;font-size:12px;line-height:25px;}#father{border:1px solid #666;padding:0;}#first{background-color:red;border:1px dashed red;}#second{background-color:green;border:1px dashed green;}#third{background-color:blue;border:1px dashed blue;}</style>
</head>
<body>
<div id="father">
<div id="first">盒子1</div>
<div id="second">盒子2</div>
<div id="third">盒子3</div>
</div>
</body>
</html>

预览如下：

在这里插入图片描述

可以加上以下代码：

      	position:relative;top:-20px;left:20px;

这是CSS（层叠样式表）中的一个属性，用来指定元素的定位方式。相对定位（relative）意味着元素会相对于其原本的位置进行移动，但不会影响其他元素的布局。如果设置了top、right、bottom、left属性，元素会根据这些值进行移动。

在这里插入图片描述

-20表示与该边的距离小了20，反之大了20，相对移动时，原来的位置会保留。

6.2.绝对定位：

绝对定位是CSS中的一种定位方式，它使元素脱离正常的文档流，相对于其最近的已定位的且是该元素的父元素的元素进行定位。如果没有已定位的父元素，那么它会相对于浏览器进行定位（通常是< body >元素）。绝对定位的元素不会影响其他元素的布局，它可以使用top、right、bottom、left属性来精确地指定其位置。

代码如下：

position:absolute;

1.相对于其最近的已定位的父元素进行定位：

		 #father{border:1px solid #666;padding:0;position:relative;}#first{background-color:red;border:1px dashed red;}#second{background-color:green;border:1px dashed green;position:absolute;left:-20px;}#third{background-color:blue;border:1px dashed blue;}

`#father`元素被设置为了相对定位（`position: relative`）。这意味着它成为了其子元素的定位上下文或包含块。因此，`#second`元素现在会相对于`#father`元素进行定位，而不再是相对于`<html>`元素。这是因为`#father`元素现在是`#second`元素最近的非静态定位的祖先元素。

效果：

在这里插入图片描述

2.没有已定位的父级元素，则相对浏览器定位：

		#first{background-color:red;border:1px dashed red;}#second{background-color:green;border:1px dashed green;position:absolute;left:-20px;}#third{background-color:blue;border:1px dashed blue;}

效果：

在这里插入图片描述

总之，绝对定位是相较于最近已经定位的且是父级元素的元素或者浏览器的偏移，且不在标准文档流中，且原来的位置不会被保留。

6.3.固定定位：

固定定位是指在网页布局中，将某个元素固定在页面的某个位置不动，不随页面滚动而改变位置的一种定位方式。通常用于创建导航栏、侧边栏或固定在页面顶部或底部的元素。在CSS中，可以通过设置元素的position属性为fixed来实现固定定位。固定定位的元素会相对于浏览器窗口进行定位，而不是相对于其父元素。

position:fixed;

这样，滑动页面，它会跟着滑动而动。

6.4.z-index：

z-index是CSS中用来控制元素在层叠顺序（z轴方向）上的属性。它决定了元素在页面上的显示顺序，具有更高z-index值的元素会覆盖具有较低z-index值的元素。

在HTML文档中，元素的层叠顺序通常是由它们在DOM中的顺序决定的。但是通过设置z-index属性，可以改变元素的层叠顺序，使得一些元素可以覆盖其他元素。

z-index的值可以是任意整数，也可以是auto（默认值）。较大的z-index值会使元素处于较高的层叠顺序，从而覆盖处于较低层叠顺序的元素。通常情况下，z-index只对设置了position属性的元素起作用，如position: relative, absolute, 或 fixed。

假如有以下代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>img{height:100px;width:100px;}#father{padding:0px;margin:0px;overflow:hidden;font-size:12px;line-height:25px;border:1px #000 solid;width:380px;}ul,li{padding:0px;margin:0px;}#father ul{position:relative;}.tiptext,.tipbg{position:absolute;width:30px;height:25px;top:70px;}.tipbg{background:#000;}.tipbg{color:white; z-index:-1;}</style>
</head>
<body>
<div id="father">
<ul><li><img src="1.jpg" alt=""></li><li class="tiptext"></li><li class="tipbg">风景照片</li><li>时间：2023-08-01</li><li>地点：布达拉宫</li>
</ul>
</div>
</body>
</html>