CSS笔记

ROOTS-

于 2022-07-28 23:32:19 发布

阅读量99

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/roods/article/details/126046181

版权

1.CSS介绍

1.什么是 CSS

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

2.第一个CSS程序

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qChXeAqv-1659021784147)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211006195105103.png)]$

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css第一课</title>

<!--    连接css文件-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>css第一课</h1>
</body>
</html>

h1  {     /*    说明颜色样式 */
    color: yellowgreen;
}

2.导入CSS的3种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css第一课</title>

<!--     方法3： 外部样式 连接css文件-->
    <link rel="stylesheet" href="css/style.css">

<!--    方法2 内部样式-->
    <style>
        h1{
            color: yellowgreen;
        }
    </style>
<!--    优先级是看就近原则 那个离h1代码进 那就用哪个-->
</head>
<body>
<!--方法1 行内样式 在标签元素内编写-->
<h1 style="color: aqua">css第一课</h1>
</body>
</html>

h1  {     /*    说明颜色样式 */
    color: yellowgreen;
}

3.基本CSS选择器(重点)

1.标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
  <style>
    /* 标签选择器会把所有的标签都改变，比如把下变的h1全改了*/
    h1{
      color: burlywood;
    }
    h2{
      color: aqua;
      /* 字体大小*/
      font-size: 80px;
    }
  </style>

</head>
<body>
<h1>我喜欢小萝莉</h1>
<h1>我喜欢小萝莉</h1>
<h2>我喜欢小萝莉</h2>
</body>
</html

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TwcqsRvW-1659021784154)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211006202624409.png)]$

2.类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
  <!--        类选择器用 . +类名   类选择器的好处是可以归类-->
  <style>
      .abc{
    color: #4646ff;
}
.cba{
  color: yellow;
}
  </style>
</head>
<body>

<h1 class="abc">可爱小萝莉</h1>
<h1 class="abc">可爱小萝莉</h1>
<p class="cba">小萝莉可爱</p>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ikGYdfT0-1659021784156)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211006203510742.png)]$

3.id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>

<!-- id 选择器只能标记一个 用#+id名，多了出错，三个优先级为:id>class>标签 -->
  <style>
    #loli{
      color: #122ed2;
    }
    .loli1{
      color: aqua;
    }
    h1{
      color: yellow;
    }
  </style>
</head>
<body>
<h1 id="loli" class="loli1">可爱短腿小萝莉</h1>
<h1>可爱短腿小萝莉</h1>
<h1>可爱短腿小萝莉</h1>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v3xxTXg7-1659021784158)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211006204706005.png)]$

4.层次选择器

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uq7vv4UU-1659021784161)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211006205923074.png)]$

1.后代选择器

<style>
  /* 后代选择器所有的后代子类全选上 */
  body p{
    background: aqua;
  }
</style>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TBVYJWGz-1659021784162)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211006210806808.png)]$

2.子选择器

/*子选择器*/
body>p{
  background: #122ed2;
}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dnlx5QY7-1659021784163)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211006211057044.png)]$

3.相邻弟弟选择器

/*  相邻弟弟选择器  只会向下 而且只有一个*/
  .loli+p{
    background: #122ed2;
  }

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M81tUgC7-1659021784165)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211006211652144.png)]$

4.通用选择器

/*  通用选择器 选中当下元素向下所有的同辈*/
   .loli~p{
     background: chartreuse;
   }

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IdFMGrOz-1659021784168)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211006212008126.png)]$

5.所有代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选则器</title>

  <style>
    /* 后代选择器所有的后代子类全选上 */
    /*body p{*/
    /*  background: aqua;*/
    /*}*/
    /*!*子选择器*!*/
    /*body>p{*/
    /*  background: #122ed2;*/
    /*}*/
  /*  相邻弟弟选择器  只会向下 而且只有一个*/
  /*  .loli+p{*/
  /*    background: #122ed2;*/
  /*  }*/
  /*  通用选择器 选中当下元素向下所有的同辈*/
     .loli~p{
       background: chartreuse;
     }
  </style>

</head>
<body>
<p class="loli">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>

5.结构伪类选择器

  /* 选中第一元素*/
    ul li:first-child{
      background: #122ed2;
    }
/*  选中最后一个元素*/
  ul li:last-child{
    background: brown;
  }

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OEJJnKGT-1659021784184)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211006213119667.png)]$

/* nth-child(1):选中p的父级元素，从父级的子元素选第一个，而且类型必须是p,不然失效 */
p:nth-child(1){
    color: #4646ff;
}
/*  nth-of-type(2): 选中父级元素，从父级的子元素的p类型的第三个*/
p:nth-of-type(3){
    color: brown;
}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-izJIzCof-1659021784185)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211006224106630.png)]$

/* 伪类选择器 选中有背景色*/
a:hover{
    background: antiquewhite;
}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PdEep4fQ-1659021784186)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211006230229934.png)]$

6.属性选择器(重点)

<p class="123 abc">p1</p>
<p class="123">p1</p>
<p class="abc">p1</p>
<p class="123 bc">p1</p>
<p class="3abc">p1</p>
</body>

/* 这种是全部选择*/
[class]{
     background: #4646ff;
}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tmr6G6tG-1659021784188)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211006233759618.png)]$

/*这种只指定一个*/
[class="123"]{
  background: #4646ff;
}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qwTCCuKU-1659021784190)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211006233821075.png)]$

/*这种
只要包含123子字段就行，但是123后面必须有空格*/
[class~="123"]{
  background: blueviolet;
}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d9i8TeiJ-1659021784192)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211006233940231.png)]$

7.字体样式


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
    <style>

 .ab1{
     font-family: 楷体;
     font-size: 30px;
     font-weight: bolder;
 }
 /*  类名不能数字开头*/
/*    font-family:调节字体*/
/*    font-size:字体大小*/
/*     font-weight：字体粗细*/
    </style>
</head>
<body>

<h1>萝莉</h1>
<p class="ab1">萝莉（英文：loli，日文：ロリ/るおぃた），即洛丽塔的缩写，来源于俄裔美国作家弗拉基米尔·纳博科夫创作的长篇小说《洛丽塔》。指小说中的女主角14岁的洛丽塔，后在日本引申发展成一种次文化，用来表示娇小可爱的女孩。
</p>
<p class="abc">被世人公认最早的萝莉角色是1982年推出的《甜甜仙子》中的MOMO公主。萝莉语出纳博可夫的小说《洛丽塔》（曾被改编成电影，中文片名是《一树梨花压海棠》）中同名的女主角，其剧情描写中年男子爱上了年龄与自己有所差距的少女的故事。中文版于1964年台湾皇冠出版公司出版，赵尔心翻译 ，是“萝莉”一词的最初使用者。
</p>
    </body>
</html>

8.文本样式

1.文本颜色

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本颜色</title>
  <style>
    /*  十六进制*/
    h1{
      color: #4646ff;
    }
    /* rgb*/
    h2{
      color: rgb(0,0,25);
    }
  /*颜色名称 */
    h3{
      color: yellow;
    }
  </style>
</head>
<body>
<h1>文本颜色</h1>
<h2>文本颜色</h2>
<h3>文本颜色</h3>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YGL09hJf-1659021784193)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211007141057255.png)]$

2.对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对齐方式</title>
  <style>
    /*  居中*/
    .a1{
      text-align: center;
      font-size: 30px;
    }
    /*  两边对齐*/
    .a2{
      text-align: justify;
    }
  </style>
</head>
<body>
<p class="a1">萝莉</p>
<p class="a2">萝莉（英文：loli，日文：ロリ/るおぃた），即洛丽塔的缩写，来源于俄裔美国作家弗拉基米尔·纳博科夫创作的长篇小说《洛丽塔》。指小说中的女主角14岁的洛丽塔，后在日本引申发展成一种次文化，用来表示娇小可爱的女孩。
</p>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YqXKAiSK-1659021784195)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211007141823859.png)]$

3.文本装饰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本修饰</title>
  <style>
    /* 下划线*/
    h1{
      text-decoration: underline;
    }
  /* 中划线*/
    h2{
      text-decoration: line-through;
    }
  /*  上划线*/
    h3{
      text-decoration: overline;
    }
  </style>
</head>
<body>
<h1>123456</h1>
<h2>123456</h2>
<h3>123456</h3>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Igw0jFFp-1659021784196)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211007142750858.png)]$

4.首行缩进

/*  首行缩进*/
  .a2{
      text-indent: 50px;
  }

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NEoZCJES-1659021784197)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211007143323999.png)]$

9.伪类

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6f1qEIZ1-1659021784199)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211007144549836.png)]$

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类</title>
    <style>
/*            鼠标悬停时*/
        p:hover{
            color: yellow;
        }
    /* 鼠标点击时*/
     p:active{
         color: brown;
     }
    </style>
</head>
<body>

<p>可爱小萝莉</p>

</body>
</html>

10.阴影

/*阴影颜色 水平偏移，垂直偏移 阴影半径*/
.ab{
    text-shadow: yellowgreen 10px 10px 5px;
}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8u7o2mim-1659021784199)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211007145237548.png)]$

11.图像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width: 1000px;
      height: 700px;
      /* 边框的粗细，边框是实线 是红色*/
      border: 1px solid red;
      /*默认是全部平捕的 铺满*/
      background-image: url("../resourse/img/cover.png");
    }
    .div1{
      /* 水平铺*/
      background-repeat: repeat-x;
    }
    .div2{
      /* 竖直铺*/
      background-repeat: repeat-y;
    }
  </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

12.渐变

<style>
  body{
    /* 渐变色*/
    background-image:linear-gradient(19deg, #9aa321 0%, #4a2361 100%);
  }
</style>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-73yTc9p4-1659021784200)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211008123439471.png)]$

13.盒子模型

margin:外边距

padding:内边距

border：边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      /*默认的外边距不为0 */
      margin: 0;
    }
    #box{
      width: 300px;
      /*粗细 样式 颜色*/
      border:1px solid red;
    }
    form{
      background: blanchedalmond;
    }
    #abc{
      /* 给边框加颜色样式*/
      border: 3px solid red;
    }
    h2{
      /* 背景渐变色 居中*/
      background-image:linear-gradient(19deg, #9aa321 0%, #4a2361 100%);
      text-align: center;
    }
  </style>
</head>
<body>
<!--盒子模型标签-->
<div id="box">
<h2>会员登陆</h2>
  <form action="#">
    <div>
      <span> 用户：</span>
      <input type="text" id="abc">
    </div>
    <div>
      <span> 密码：</span>
      <input type="text">
    </div>
    <div>
      <span> 邮箱：</span>
      <input type="text">
    </div>
  </form>
</div>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a0XM2qcj-1659021784202)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211008131800889.png)]$

14.内外边距

外边框：

  margin: 1px  2px 3px 4px;

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2ThGkUph-1659021784203)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211008134051243.png)]$

margin: 1px  2px 3px;

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5CACz0t4-1659021784208)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211008134156721.png)]$

margin: 1px  2px ;

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ETM5NunL-1659021784208)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211008134230267.png)]$

margin: 1px   ;

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BPw7c7zj-1659021784210)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211008134259130.png)]$

内边框：

padding: 5px;

在这里插入图片描述

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KFIGl1MS-1659021784218)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211008135122255.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bXteWgRq-1659021784218)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211008135133784.png)]$

15.圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角边框</title>
  <style>
    div{
      width: 50px;
      height: 50px;
      /*  设置边框的边的粗细，颜色 还有实线*/
      border:  10px #2ecc71 solid;
      /*  圆角边框 一个值那么就是四个角一样*/
      /*  和外边框一样 都是顺时针 左上 右上 右下 左下*/
      border-radius: 10px 30px 60px 90px;
    }
  </style>
</head>
<body>
<div>
</div>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8Kr1hiBS-1659021784220)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211008140211549.png)]$

16.阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
   img{
      width: 200px;
      height: 200px;
      /*  设置边框的边的粗细，颜色 还有实线*/
        border:  50px #2ecc71 solid;
        background: red;
        box-shadow: 10px 10px 100px yellowgreen;
       border-radius: 30px 30px 30px 30px;
    }
  </style>
</head>
<body>
<img src="../resourse/img/bg.jpg" alt="">
<div>
</div>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uw1T2gpp-1659021784224)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211008185828373.png)]$

17.display

块元素是一个元素，占用了全部宽度，在前后都是换行符。

块元素的例子：
- <d
内联元素只需要必要的宽度，不强制换行。

内联元素的例子：

这是原本的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            border:  10px black solid;

        }
        span{
            width: 50px;
            height: 50px;
            border:10px black solid;
        }
    </style>
</head>
<body>
<div>dddddd</div>
<span>ssssssssssss</span>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LLfE1HRd-1659021784226)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211008191811599.png)]$

互换后：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            border:  10px black solid;
            /* 换成行元素*/
            display: inline;

        }
        span{
            width: 50px;
            height: 50px;
            border:10px black solid;
        /*    换成块元素*/
            display: block;
        }
    </style>
</head>
<body>
<div>dddddd</div>
<span>ssssssssssss</span>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-js1uMIL0-1659021784229)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211008192013185.png)]$

18.浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #ab{
            width: 100px;
            height: 100px;
            /*向左浮动*/
            float: left;
        }
        #ac{
            width: 100px;
            height: 100px;
        /*    向右浮动*/
            float: right;
            /*clear: both;  清除浮动*/
        }
    </style>
</head>
<body>
<img src="../resourse/img/bg.jpg" alt="" id="ab">
<img src="../resourse/img/cover.png" alt="" id="ac">
</body>
</html>

在这里插入图片描述

19.overflow

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      border:10px black solid;
          /*设置为滚动条*/
      overflow:auto;
    }
  </style>
</head>
<body>
<div>
  <p>wwwwwwwwww</p>
  <p>wwwwwwwwww</p>
  <p>wwwwwwwwww</p>
  <p>wwwwwwwwww</p>
  <p>wwwwwwwwww</p>
  <p>wwwwwwwwww</p>
  <p>wwwwwwwwww</p>


</div>

</body>
</html>

原来的：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1EQZ2uIk-1659021784233)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211008195028241.png)]$

现在的：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AZnaCtNu-1659021784236)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211008195048823.png)]$

20.相对位置和绝对位置

详解CSS的相对定位和绝对定位 - 知乎 (zhihu.com)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #a1{
            /* 无论页面怎么动 这个是固定的*/
            position: fixed;
            top:30px;
            right:2px;
        }
            /*相对定位 移动相对定位元素，但它原本所占的空间不会改变。*/
        #a2{
            /*位置偏左*/
            position: relative;
            /*距离左边-20 向左移 离左边更近*/
            left:-20px;

        }
        #a3{
            /*位置偏右*/
            position: relative;
            /*距离左边+20 向右移 离左边更远*/
            left:20px;
        }
        #a4{
            /*绝对位置*/
            position:absolute;
            left:500px;
            top:150px;
        }
    </style>
</head>
<body>
<p id="a1">浮动</p>
<p id="a2">向左移的位置</p>
<p id="a3">向右移的位置</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p id="a4">绝对位置</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>

<p>123</p>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mEh6dnCR-1659021784240)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211008201518756.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PGJpJkAp-1659021784242)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211008211521861.png)]$

21.z-index

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #a1 {
      width: 200px;
      height: 200px;
      position: absolute;
      border:2px black solid;
      z-index: -1;
    }
  </style>
</head>
<body>
<!--<div id="a1"></div>-->
<img src="../resourse/img/bg.jpg" alt="" id="a1">
<p>1235468</p>
</body>
</html>

这是没设置z-index的时候，图片把文字盖住了：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-me8NBDet-1659021784243)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211008211947862.png)]$

这是设置后：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SHaCQB6E-1659021784245)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211008212024217.png)]$

22.透明度

Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #a1 {
      width: 200px;
      height: 200px;
      position: absolute;
      border:2px black solid;
      z-index: -1;
        background: #2ecc71;
    }
    /*p{*/
    /*    opacity:0.4;*/
    /*    background-color: rgba(0,0,0,0.4);*/
    /*}*/
    #a2{
        left: 80px;
        width: 200px;
        height: 100px;
        /*rdbargba(red, green, blue, alpha)
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字：*/
        background-color: rgba(255,90,71,0.2);
    }
  </style>
</head>
<body>
<div id="a1"></div>
<!--<img src="../resourse/img/bg.jpg" alt="" id="a1">-->
<div id="a2">
    <p>1235468</p>
    <p>1235468</p>
    <p>1235468</p>
</div>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-16TsLLUW-1659021784246)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211008225151683.png)]$

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>透明度</title>
  <style>
    img{
        width: 200px;
        height: 200px;
    }
    img:hover{
        opacity:0.4;
    }

  </style>
</head>
<body>

<img src="../resourse/img/bg.jpg" alt="">
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pJVSF7hH-1659021784246)(C:\Users\AnGeng\AppData\Roaming\Typora\typora-user-images\image-20211008230709620.png)]$