当前位置：首页 > article >正文

前端学习笔记--CSS

article 2026/2/21 19:09:17

HTML+CSS+JavaScript ==》结构+ 表现 + 交互

如何学习

1.CSS是什么

2.CSS怎么用？

3.CSS选择器（重点，难点）

4.美化网页（文字，阴影，超链接，列表，渐变。。。）

5.盒子模型

6.浮动，定位

7.网页动画（特效效果）

什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS:表现（美化网页）

字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动

CSS发展史

CSS1.0

CSS2.0 DIV(块) +CSS HTML与CSS结构分离的思想，网页变得简单，SEO（搜索引擎优化）

CSS2.1 浮动，定位

CSS3.0 圆角边框阴影，动画，问题：浏览器兼容性

CSS快速入门

规范：<style> 可以编写CSS的代码，每一个声明，最好使用分号结尾，

语法

 选择器{声明1;声明2;声明3;}

CSS优势：

1.内容与表现分离

2.网页结构表现统一，可以实现复用

3.样式十分丰富

4，建立使用独立于HTML的CSS

5.利用SEO,容易被搜索引擎收录

CSS的三种导入方式

1.行内样式:行内样式，在标签元素中，编写一个style属性，编写样式即可

 <h1 style="color: red;font-size: 50px;">首页</h1>

2.内部样式

 <style>h1{color: #00ff51;font-size: 50px;}</style>

3.外部样式

     <link rel="stylesheet" href="demo.css">/*外部样式*/h1{color: aquamarine;}

优先级比较: 就近原则，离元素最近的优先级最高，行内一定是最高，可以调动外部和内部的位置来选择哪个

拓展：外部样式两种写法

链接式：CSS3.0 属于HTML标签

  <link rel="stylesheet" href="demo.css">

导入式：CSS2.1特有不怎么使用，有弊端，网页内容过多的话，会先加载骨架，在渲染

 <style>@import "demo.css";</style>

选择器（重点）

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

基本选择器

标签选择器：会选择页面上的所有的这个标签的元素无法做到两个标签相同的元素渲染不一样的效果
```
 h1{color: #8dca84;border-radius: 40px;background: aqua;}
```
类选择器 class：选择所有class属性一致的标签好处：可以多个标签归类，是同一个class，可以复用
```
 .hello{color: #8dca84;border-radius: 40px;background: #403da8}<h3 class="hello">你好</h3>
```
id选择器：不可以重复，全局唯一

 #id{color: #8dca84;}<h1 id="id">biaoqing</h1>

优先级比较：不遵循就近原则，id选择器的优先级最高，其次是类选择器，再其次是标签选择器

层次选择器

1.后代选择器：在某个元素的后面，全部

 body  p{color: red;}

2.子选择器只有一代

 /*子元素选择器：父元素>子元素*/body>p{color: blue;}

3.相邻兄弟选择器同辈相邻只有一个，且只对下一个相同标签

 .active+p{color: green;}<p>p1</p><p class="active">p2</p><p>p3</p>/* 只对p3起作用

4.通用选择器

 /*所有兄弟选择器：当前选中元素的向下的所有兄弟元素*/.active~p{color: yellow;}

结构伪类选择器

伪类：CSS伪类是用来添加一些选择器的特殊效果。

拓展：

a:link {color:#FF0000;} /* 未访问的链接 */

a:visited {color:#00FF00;} / 已访问的链接 */

a:hover {color:#FF00FF;} /* 鼠标划过链接 */

a:active {color:#0000FF;} /* 已选中的链接 */

结构伪类选择器是为了定位元素

 /* 选中 ul的第一个子元素 */ul li:first-child{color: red;}/* 选中 ul的最后一个子元素 */ul li:last-child{color: #00ff51;}

 /* 只选中p1* ：定位到父元素，选择当前的第一个元素选择当前p元素的父级元素，选中父级元素中的第一个元素并且是当前元素才生效,否则不生效按顺序排序，不分类型*/p:nth-child(1){color: #cceeff;}/*选中父元素下的p元素的第二个，按类型排序*/p:nth-of-type(2){color: #00a6ff;}</style>

属性选择器（重点常用）

  /* 属性名，属性名 =属性值（正则）= 绝对等于*= 包含这个元素^= 以这个元素开头$= 以这个元素结尾*//* 存在id属性的元素：a[]{}*/a[id]{background: #ff0000;}/* a标签中class属性中包含links的元素：*/a[class*= "links"]{background: #ffa500;}/* a标签中id为 first的元素：*/a[id = "first"]{background: #00a6ff;}/* a标签中href属性中包含HTTP开头的元素：*/a[href^="http"] {background: #ff00ff;}</style></head><body><p class="demo"><a href="http://www.baidu.com" class="links-item-first" id="first">1</a><a href=""class="footer" target="_blank" title="test">2</a><a href="123.html" class="link-item">3</a><a href="123.png" class="link-item">4</a><a href="123.jpg" class="link-item">5</a><a href="abc">6</a><a href="/a.pdf">7</a><a href="/abc.pdf">8</a><a href="abc.doc">9</a><a href="abcd.doc" class="links-item-last">10</a>

美化网页元素

为什么美化网页

有效的传递页面信息
美化网页，吸引客户
凸显页面的主题
提高用户的体验

span：重点要突出的字，使用span标签套起来

字体样式

 font-family :字体样式font-size:字体大小font-weight:字体粗细color:颜色

可以都使用 font 按照字体风格，字体粗细，字体大小字体样式

 .p2{font : oblique bold 20px/30px 楷体;}

代码展示

 <!-- font-family :字体样式font-size:字体大小font-weight:字体粗细color:颜色--><style>#title{color: red;}body{font-family: 楷体;}h1{font-size: 50px;}.p1{font-weight: 800;color: blue;}.p2{font : oblique bold 20px/30px 楷体;}</style></head><body>欢迎学习<span id="title">Java</span><h1>唐诗</h1><p class="p1">花间一壶酒，独酌无相亲。</p><p class="p2">举杯邀明月，对影成三人。</p><p>月既不解饮，影徒随我身。</p><p>暂伴月将影，行乐须及春。</p><p>我歌月徘徊，我舞影零乱。</p><p>醒时相交欢，醉后各分散</p></body>

文本样式

1.颜色 color rgb rgba

2.文本对齐的方式 text-align = center

3.首行缩进 text-indent:2em

4.行高 line-height:

5.装饰 text-decoration: none，可以将超链接的下划线去掉

6.文本图片水平对齐：vertical-align：middle

代码展示：

 <!--    颜色：单词  RBG：如何调色，按照十六进制，红色：#FF0000 绿色 ：#00FF00 蓝色：#0000FFRGBA：A是透明度 0~1文本对齐的方式：text-alignleft center right首行缩进：text-indent：2emem:字体，px：像素行高：line-height行高和块的高度一致时，就可以达到上下居中的效果中划线：  text-decoration: line-through;下划线：           text-decoration: underline;上划线：           text-decoration: overline;--><style>#title{color: red;text-indent: 10em;}body{font-family: 楷体;}h1{font-size: 50px;color: rgba(0,255,255,0.5);text-align: center;}.p1{font-weight: 800;color: blue;}.p2{font : oblique bold 20px/30px 楷体;}.p3{line-height: 100px;}.p4{text-decoration: line-through;}</style>

文本阴影与超链接伪类

text-shadow:阴影颜色

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。参阅 CSS 颜色值。

   /*文本阴影 阴影颜色， 水平偏移 垂直偏移，模糊半径*/#price{text-shadow:#403da8 2px 2px 2px  ;}

超链接伪类：常用：a:hover 悬浮状态

 a{text-decoration: none;color: #010d13;}/*鼠标悬浮的颜色*/a:hover{color: #ff0000;font-size: 30px;}/*鼠标按住未释放的颜色*/a:active{color: #00ff51;}/*鼠标选中的颜色*/a:focus{color: #00a6ff;}/*鼠标移出颜色*/a:link{color: #ffa500;}/*鼠标移入颜色*/a:visited{color: #ff00ff;}

列表(ul ol)

 /*list-style:列表样式none:去掉圆点circle：空心圆decimal：数字square：正放纵*/ul{

代码展示

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

 .title{font-size: 18px;font-weight: bolder;line-height: 50px;background: #a4f1bd;text-align: center;}#nav{width: 300px;}/*list-style:列表样式none:去掉圆点circle：空心圆decimal：数字square：正放纵*/ul{background: #cceeff;}ul li{line-height: 30px;list-style: none;text-indent: 1em;}a{text-decoration: none;font-size: 14px;color: #000;}a:hover{color: red;text-decoration: underline;}

背景(background)

背景颜色 background :

背景图片

 /*background-repeat:平铺方式，repeat-x：水平平铺repeat-y:竖直平铺no-repeat:不平铺默认为 repeat*/.div1{background-repeat: repeat-x;}.div2{background-repeat: repeat-y;}.div3{background-repeat: no-repeat;}

主要应用：调整图片的大小与位置

 background:red url("001.jpg") 100px 10px no-repeat;

相当于

     background-image: url("001.jpg");background-repeat: no-repeat;background-position: 100px 2px;

渐变（linear-gradient）

 background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);

可以去网上查询直接拿来用

盒子模型

什么是盒子？

margin：外边距

padding：内边距

border：边框

外边距和内边距的区别建议自己在浏览器上通过改变值来区分

边框（border）

边框的粗细 border：1px
边框的样式 border-style: none(无) solid（实线） dashed（虚线）dotted（圆点）
边框的颜色：border-color:

代码示例

 <style>/*默认初始化，因为div盒子默认的margin是8*/h1,ul,li,a,body{margin: 0;padding: 0;text-decoration: none;}/*默认顺序：边框粗细，边框样式 边框颜色，*/.box{width: 300px;border: 1px solid #000;}h2{background: #cceeff;text-align: center;margin: 0;line-height: 30px;font-size: 20px;}form{background: #cceeff;}div:nth-of-type(1) >input{border: 4px solid #00ff51;}div:nth-of-type(2) >input{border: 4px dashed #ff0000;}div:nth-of-type(3) >input{border: 4px dotted #ffa500;}

内外边距（padding margin ）

margin(外边距)属性定义元素周围的空间。

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

padding（内边距）定义元素到边框之间的空间，用法与margin大致相同

值	说明
auto	设置浏览器边距。这样做的结果会依赖于浏览器
length	定义一个固定的margin（使用像素，pt，em等）
%	定义一个使用百分比的边距

Margin的妙用：居中元素

margin:25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
margin:25px 50px 75px;
- 上边距为25px
- 左右边距为50px
- 下边距为75px
margin:25px 50px;
- 上下边距为25px
- 左右边距为50px
margin:25px;
- 所有的4个边距都是25px

padding同上

圆角边框（border-radius）

 <!--  圆角属性顺序为 左上 右上 右下 左下 顺时针方向--><!--  可以用来画图圆形：高度，宽度，各个圆角都相等即可半圆：高度为宽度的一半 左上右上俩个圆角等于宽度，剩下俩圆角为零即可扇形：高度宽度相等，右上角也相等，其余为零--><style>div{width: 40px;height: 40px;border:3px solid #000;border-radius: 0 40px 0 0;}</style>

盒子阴影

 <style>div{width: 200px;margin: 0 auto;}img{border-radius: 50%;/*阴影颜色， 水平偏移 垂直偏移，模糊半径*/box-shadow: #ff9a9e 10px 20px 90px;}</style></head><body><div><img src="001.jpg"></div>

浮动（float）

什么是浮动？

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

浮动是增加了层级，是浮在父级元素上的。所以可能会导致父级元素边框塌陷

元素怎样浮动？

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

注：行内元素可以被包含在块级元素中，反之，则不可以

属性	描述	值	CSS
clear	指定不允许元素周围有浮动元素。	left right both none inherit	1
float	指定一个盒子（元素）是否可以浮动。	left right none inherit

如果我们想让元素有块元素的性质，还可以浮动，我们可以先添加浮动，在添加clear：both，清除浮动效果就可以实现

案例：

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>浮动</title><link rel="stylesheet" href="float.css"></head><body><div class="father"><div class="layer01"><img src="image/001.jpg" alt=""></div><div class="layer02"><img src="image/002.jpg" alt=""></div><div class="layer03"><img src="image/003.jpg" alt=""></div><div class="layer04"><img src="image/004.jpg"alt=""></div><div class="layer05">浮动的盒子可以向左浮动，也可以向右浮动，直到他的外边缘碰到包含框或另一个浮动盒子为止</div></div></body></html>

 body{margin: 0;padding: 0;}div{margin: 10px;padding: 5px;}.father{border: 1px solid #e82525;}.layer01{border: 1px solid #00a6ff;display: inline-block;float: left;}.layer02{border: 1px solid #7b239e;display: inline-block;float: left;}.layer03{border: 1px solid #f3c96e;display: inline-block;float: left;}.layer04{border: 1px solid #a4f1bd;display: inline-block;float: left;}.layer05 {border: 1px solid #730505;display: inline-block;float: left;}

display

属性值

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）

案例：仿QQ会员页面导航

HTML：

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>QQ会员</title><link rel="stylesheet" href="qq.css"></head><body><div class="wrap"><header class="nav-header"><div class="head-contain"><a href="" class="top-logo"><img src="img.png"width="145px" height="90px"></a><nav class="top-nav"><ul><li><a href="">游戏特权</a></li><li><a href="">功能特权</a></li><li><a href="">生活特权</a></li><li><a href="">会员活动</a></li><li><a href="">成长体系</a></li><li><a href="">年费专区</a></li><li><a href="">超级会员</a></li></ul></nav><div class="top-right"><a href="">登录</a><a href="">开通超级会员</a></div></div></header></div></body></html>

CSS：

 *{margin: 0;padding: 0;}a{text-decoration: none;color: #000;}ul li{list-style: none;}.nav-header{background: rgba(0,0,0,0.4);height: 90px;width: 100%;}.head-contain{width: 1180px;height: 90px;margin: 0 auto;text-align: center;}.top-logo,.top-nav, .top-nav li, .top-right{height: 90px;display: inline-block;vertical-align: top;}.top-nav{margin: 0 48px;}.top-nav li{line-height: 90px;width: 90px;}.top-nav li a{display: block;width: 90px;height: 90px;text-align: center;}.top-nav li a:hover{color: #7b239e;}.top-right a{display: inline-block;text-align: center;margin-top: 25px;border-radius: 35px;}.top-right a:hover{background: #f6de8e;}.top-right a:first-child{width: 90px;height: 40px;line-height: 40px;color: #efa72c;border: 1px solid #efa72c;}.top-right a:last-child{width: 120px;height: 40px;font-weight: bolder;line-height: 40px;background: rgb(243, 201, 110);color: #6a4604;}.top-right a:last-child:hover{background: #bd7e07;}

效果演示：

父级边框塌陷的问题

当父级边框里的所有子集元素都带有浮动属性时，就会导致父级边框塌陷，如图：

clear：clear属性是CSS中用于控制元素如何与之前的浮动元素相互作用的属性。当元素设置了clear属性后，它可以被强制移动到前面的浮动元素下方，从而避免浮动元素对其布局的影响。

clear属性主要有以下几个值：

值	概述
right	元素会被移动到右侧浮动元素的下方。
left	元素会被移动到左侧浮动元素的下方。
both	元素会被移动到左侧和右侧浮动元素的下方。
none	默认值，元素不会被移动来清除浮动

避免方法一：增加父级元素高度，超过子级元素的最高值。（不建议使用）

 .father{border: 1px solid #e82525;height: 800px;}

方法二：在所有子级元素后再加一个空盒子，让盒子的左右两侧不允许浮动，让前面的浮动元素，还在父级边框里。（标准方法）

 </div><div class="clear"></div></div>.clear{clear: both;margin: 0;padding: 0;}

方法三：overflow：在父级元素中增加一个overflow：hidden，就可以了

 .father{border: 1px solid #e82525;overflow: hidden;}

overflow 是 CSS的简写属性，其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的区块格式化时。

overflow属性有以下值：

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

注意:overflow 属性只工作于指定高度的块元素上。

注意: 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 "overflow:scroll" 也是一样的)。

方法四：在父类中添加一个伪类类似于第二种方案（伪类可以增加过滤条件），可以避免增加多余div的风险

 .father:after{content: "";display: block;clear: both;}

小结：1.设置父元素的高度，简单易懂，但元素假设有了固定的高度，就会被限制

2.浮动元素后面加空div，简单明了缺点：代码中尽量避免空div

3.overflow 简单缺点：一些下拉的场景中或一些不能切除的场景中避免使用

4.父类添加伪类 after（推荐）写法稍微复杂，但没有副作用，推荐使用

对比

display

方向不可以控制
float

浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题

定位

相对定位

 #first{background-color: #cceeff;border: 1px dashed #7b239e;position: relative;/* 相对定位：上下左右*/top:-20px;/* 向下移动-20px->即向上移动20px*/left: 20px/*向右移动20px*/}#second{background-color: #d6aa1a;border: 1px dashed #f6de8e;}#third{background-color: #720fb2;border: 1px dashed #cceeff;position: relative;bottom: -20px;/*向下移动20px*/right: 20px;/*向左移动20px*/}

相对定位：相对于自己原来的位置进行偏移 position：relative

相对于原来的位置，进行指定的偏移，相对定位，他仍然在标准文档流中，原来的位置会被保留

练习：

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>a{text-decoration: none;color: #f6f0f0;background: #ff9a9e;width: 100px;height: 100px;display: block;line-height: 100px;text-align: center;}a:hover{background: #4ca2cd;}#father{border: 1px solid #e82525;width: 300px;height: 300px;padding: 10px;}#second,#fourtrh{position: relative;left: 200px;top: -100px;}#fifth{position: relative;left: 100px;top: -300px;}</style></head><body><div id="father"><a id="first" href="#">链接一</a><a id="second" href="#">链接二</a><a id="third" href="#">链接三</a><a id="fourtrh" href="#">链接四</a><a id="fifth" href="#">链接五</a></div></body></html>

效果展示：

绝对定位

定位：基于XXX的定位上下左右

1.在没有父级元素定位的前提下，相对于浏览器定位

2.假设父级元素存在定位，我们通常相对于父级元素进行偏移

3.在父级元素范围内有移动，绝对定位的起始位置由他的父级元素决定

相对于父级或浏览器的位置，进行指定的偏移，绝对定位，他不在在标准文档流中，原来的位置不会被保留

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>相对定位</title><style>div{margin: 10px;padding: 5px;font-size: 12px;line-height: 25px;}#father{border: 1px solid #e82525;padding: 0;position: relative;}#first{background-color: #cceeff;border: 1px dashed #7b239e;}#second{background-color: #d6aa1a;border: 1px dashed #f6de8e;}#third{background-color: #720fb2;border: 1px dashed #cceeff;position: absolute;top:30px;}</style></head><body><div id="father"><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三个盒子</div></div></body></html>

固定定位 fixed

固定定位和绝对定位相同点：都可以拿父级元素或浏览器的位置进行定位

不同点：绝对定位会随着父级元素的移动而移动，但固定定位始终不动

案例：

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>body{height: 1000px;}div:nth-of-type(1){/*绝对定位：相对于浏览器*/width: 100px;height: 100px;background: red;position: absolute;right: 0;bottom: 0;}div:nth-of-type(2){/*固定定位：相对于自身*/width: 50px;height: 50px;background: blue;position: fixed;right: 0;bottom: 0;}</style></head><body><div>div1</div><div>div2</div></body></html>

效果：

z-index

属性定义及使用说明

z-index 属性指定一个元素的堆叠顺序。

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注意： z-index 进行定位元素(position:absolute, position:relative, or position:fixed)。

默认值：	auto
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.zIndex="1"

opacity：0.5 /背景透明度

深度解析：

层叠上下文（stacking context）看到上下文这个关键词，我想大家应该会有一点概念，没错就是context。和你们认识的那个BFC、IFC里面的上下文是一个意思，其实我想说css世界里面看到context或者XXX上下文其实都是同一个意思，完全可以理解为自成一派，在自己的小世界里面随便折腾，不受其他的context影响。当然，这个context是可以被其他context包含同时也可以包含其他context
层叠水平（stacking level）层叠水平决定了在同一个层叠上下文中元素在Z轴上的显示顺序。页面中的所有元素（普通元素和层叠上下文元素）都有层叠水平。然而对普通元素的层叠水平探讨只局限在层叠上下文元素中。注：大家千万不要把层叠水平和z-index混为一谈，尽管某些情况下z-index确实可以影响层叠水平，但是也只局限于具有层叠上下文的元素，而层叠水平是所有元素都存在的
层叠顺序（stacking order）层叠顺序表示发生层叠时有着特定的垂直显示顺序（规则）。即：网上这张很流行的规则

关于这张图有一些补充：位于最下面的background/border特指层叠上下文元素的边框和背景色。每一个层叠顺序规则仅适用当前层叠上下文元素的小世界 inline水平盒子指的是包括inline/inline-block/inline-table元素的层叠顺序，他们都是同级别的 单纯从层叠水平上看，实际上z-index：0和auto是可以看成一样的，但是在层叠上下文领域有着根本性的差异

深入了解层叠上下文

特性

层叠上下文的层叠水平要比普通元素高层叠上下文可以阻断元素的混合模式层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文每个层叠上下文和兄弟元素独立，也就是说，当进行层叠变化或者渲染的时候，只需要考虑后代元素每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中
如何创建

根元素 (HTML) z-index 值不为 "auto"的绝对/相对定位（在firefox/ie浏览器下position: fixed也是可以的）一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex opacity 属性值小于 1 的元素（参考 the specification for opacity） transform 属性值不为 "none"的元素 mix-blend-mode 属性值不为 "normal"的元素 filter值不为“none”的元素 perspective值不为“none”的元素 isolation 属性被设置为 "isolate"的元素 position: fixed 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值 -webkit-overflow-scrolling 属性被设置 "touch"的元素
层叠上下文与层叠顺序

文章中多次提到普通元素具备层叠上下文后层叠水平就会变高，那么他究竟在层叠顺序那个规则图的哪个位置呢把目光向上锁定，第二条列举了12个可以创建层叠上下文的方法，我们把他分为两类：第二三条和其他。依赖z-index取值的：位置取决于z-index的值不依赖z-index取值的：在图中第二高的位置，即：z-index = auto 或者 0

用一个例子来说明：
```
 <div class="container"><div class="div1">111</div><div class="div2">222</div></div>
```
```
 .container {width: 500px;height: 500px;background-color: #000;color: #fff;transform: scale(1); /* 给container创建层叠上下文 */}.div1 {padding: 50px;background-color: aqua;z-index: 0;position: relative;/* 给div1创建层叠上下文，层叠水平依赖z-index的取值 */}.div2 {padding: 50px;background-color: red;opacity: 0.8;/* 给div2创建层叠上下文，层叠水平依赖z-index的取值 *//* margin-top: -40px; */}
```
这个例子中一目了然，div1和div2的层叠水平一样，都是在规则那张图的第二高的位置，不过div2在div1的dom节点后面，所以div2要比div1的层叠水平高，我们把margin-top的注释去掉看下：

要想使得div1在上面只需要把div1的z-index改成大于0的值就好了。

还是上面的htl结构，接下来我们再来看一个有意思的例子：
```
 .container {width: 500px;height: 500px;background-color: #000;color: #fff;transform: scale(1);/* 给container创建层叠上下文 */}.div1 {padding: 50px;background-color: aqua;opacity: 0.8;/* 给div1创建层叠上下文，层叠水平在z-index：0 */}.div2 {padding: 50px;background-color: red;position: relative;margin-top: -40px;}
```
大家肯定会说，div1明显盖过div2啊，可是我们来看下实际情况：

实际情况下面的div2盖过了div1，原因是当html元素设置定位属性的时候（absolute/relative），其z-index属性自动生效变成 z-index： auto，所以这时候div1和div2的层叠水平是一致的，而div2在div1的dom节点后面，所以盖过了div1（注意这里div2并没有变成层叠上下文元素，这是有本质区别的）

常见错误认知解析

现在我们在一起看下文章开头提到的几个常见的错误认知：

z-index值越大越“靠近我们” -- 并不一定，首先要成为层叠上下文。或者如果比较的元素的父元素也是层叠上下文，那就完全取决于父元素了
要搭配position: absolute | relative | fixed 使用才有用呢 -- 对了一部分，还有其他的条件也可以使元素称为层叠上下文元素
比较两个兄弟节点谁更“靠近我们”，要看他们的同级父元素的比较呢。-- 如果同级父元素不是层叠上下文元素就不需要看“父元素的眼色”了

小结

结构图

前端学习笔记--CSS

HTMLCSSJavaScript 》结构表现交互如何学习 1.CSS是什么 2.CSS怎么用？ 3.CSS选择器（重点，难点） 4.美化网页（文字，阴影，超链接，列表，渐变。。。） 5…...

编程日记 2026/2/13 8:36:24

阶段一：Java基础语法

目标：掌握Java的基本语法，理解变量、数据类型、运算符、控制结构等。 1. Java开发环境搭建安装JDK配置环境变量编写第一个Java程序代码示例： // HelloWorld.java public class HelloWorld { // 定义类名为 HelloWorldpublic static vo…...

编程日记 2026/2/14 2:21:46

31天Python入门——第15天:日志记录

你好，我是安然无虞。文章目录日志记录python的日志记录模块创建日志处理程序并配置输出格式将日志内容输出到控制台将日志写入到文件 logging更简单的一种使用方式日志记录日志记录是一种重要的应用程序开发和维护技术, 它用于记录应用程序运行时的关键信息和…...

编程日记 2026/2/19 4:41:39

深度学习框架PyTorch——从入门到精通（10）PyTorch张量简介

这部分是 PyTorch介绍——YouTube系列的内容，每一节都对应一个youtube视频。（可能跟之前的有一定的重复） 创建张量随机张量和种子张量形状张量数据类型使用PyTorch张量进行数学与逻辑运算简单介绍——张量广播关于张量更多的数学操作原地修改…...

编程日记 2026/2/19 2:08:12

webpack批量导入 webpack中使用 require.context 实现自动导入 const files require.context(./modules, false, /\.ts$/); const modules {}; files.keys().forEach((key) > {if (key ./index.ts) { return; }modules[key.replace(/(\.\/|\.ts)/g, )] files(key).def…...

编程日记 2026/2/14 11:08:59

使用ucharts写的小程序，然后让圆环中间的空白位置变大

将ringWidth属性调小 extra: { ring: { ringWidth: 20, activeOpacity: 1.5, activeRadius: 10, offsetAngle: 0, labelWidth: 15, border: true, borderWidth: 0, borderColor: #F…...

编程日记 2026/2/17 16:58:56

GPT-4o Image

每周跟踪AI热点新闻动向和震撼发展想要探索生成式人工智能的前沿进展吗？订阅我们的简报，深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同，从行业内部的深度分析和实用指南中受益。不要错过这个机会，成为AI领…...

编程日记 2026/2/19 20:39:11

SpringMVC请求与响应深度解析：从核心原理到高级实践

一、SpringMVC架构与核心组件剖析 SpringMVC是基于Java的MVC设计模型实现的轻量级Web框架，其核心架构围绕前端控制器模式构建。以下是核心组件及其作用： DispatcherServlet 作为前端控制器，所有请求首先到达此处。它负责请求分发、协调组件协…...

编程日记 2026/2/18 23:18:51

大模型量化框架GPTQModel的基本使用方法

接上一篇博客：AutoGPTQ报torch._C._LinAlgError: linalg.cholesky: The factorization could not be completed的解决办法-CSDN博客如果Llama factory量化一直报错，可以改用其他的量化框架，例如GPTQ：https://github.com/ModelCl…...

编程日记 2026/2/14 13:19:00

C++：函数（通识版）

一、函数的基础 1.什么是函数？（独立的功能单位） 函数是C中封装代码逻辑的基本单元，用于执行特定任务。作用：代码复用、模块化、提高可读性。 2、函数的基本结构返回类型函数名(参数列表) {// 函数体return 返回值…...

编程日记 2026/2/16 8:05:56

Spring AI相关的面试题

以下是150道Spring AI相关的面试题目及答案： ### Spring AI基础概念类 **1. 什么是Spring AI？** Spring AI是Spring框架的扩展，旨在简化人工智能模型在Java应用中的集成与使用，提供与Spring生态无缝衔接的工具和抽象&#xff0c…...

编程日记 2026/2/12 13:34:29

无线安灯按钮盒汽车零部件工厂的故障告警与人员调度专家

在汽车零部件制造领域，生产线故障与物料短缺等问题往往引发连锁反应，导致停机损失与成本激增。传统人工巡检与纸质工单模式已难以满足高效生产需求，而无线安灯按钮盒的智能化应用，正成为破解这一难题的关键利器。一、精准告警&am…...

编程日记 2026/2/15 5:19:10

登录接口带验证码自动化（tesseract-OCR）

登录接口是很多网站和应用程序中必不可少的一部分。为了增加安全性，很多登录接口还会加入验证码的验证步骤，以防止恶意登录行为。通常，遇到这样情况时有以下解决办法 1、使用万能验证码：如果遇到前台输入的是万能验证码&#xf…...

编程日记 2026/2/15 4:10:51

【Python】pillow库学习笔记2-ImageFilter类和ImageEnhance类

PIL库的ImageFilter类和ImageEnhance类提供了过滤图像和增强图像的方法。 3.ImageFilter类 ImageFilter类共提供10种预定义图像过滤方法： 方法表示描述ImageFilter.BLUR图像的模糊效果ImageFilter.CONTOUR图像的轮廓效果ImageFilter.DETAIL图像的细节效果ImageFi…...

编程日记 2026/2/15 10:11:36

3.Matplotlib：绘图参数文件和绘图的主要函数

一绘图参数文件 1.绘图参数文件是什么可以通过在程序中添加代码对参数进行配置，但是如果一个项日对于 Matplotlib 的特性参数总会设置相同的值，就没有必要在每次编写代码的时候都进行相同的配置。在代码之外使用一个永久的文件设定 Matplotlib 参数默认…...

编程日记 2026/2/14 22:00:50

飞书只有阅读权限的文档下载，飞书文档下载没有权限的文件

wx搜索公zhong号："狮心王"回复"飞书文档保存"下载chrome扩展文件拿到扩展文件之后给chrome添加扩展...

编程日记 2026/2/16 14:53:20

蓝桥杯C++基础算法-0-1背包（优化为一维）

这段代码实现了0-1 背包问题的动态规划解法，并且使用了滚动数组来优化空间复杂度。以下是代码的详细思路解析： 1. 问题背景给定 n 个物品，每个物品有其体积 v[i] 和价值 w[i]，以及一个容量为 m 的背包。目标是选择物品使得总价值…...

编程日记 2026/2/18 1:08:01

【开题报告+论文+源码】基于SpringBoot的智能安全与急救知识科普系统设计与实现

项目背景与意义在全球范围内，安全与急救知识的普及已成为提升公众安全素养、减少意外伤害发生率、提高突发事件应对能力的重要举措。尤其是在当今社会，人们面临的生活、工作环境日益复杂，交通事故、火灾、溺水、突发疾病等各种意外事件的发生…...

编程日记 2026/2/12 13:55:04

Django之旅：第五节--Mysql数据库操作（一）

Django开发操作数据库更简单，内部提供了ORM框架一、安装第三方模块 pip install mysqlclient注：最新的django框架需要使用mysqlclient模块，之前pymysql模块与django框架有编码兼容问题。二、ORM 1、ORM可以帮助我们做两件事：…...

编程日记 2026/2/16 13:09:05

蓝桥杯 - 简单 - 布局切换

介绍为了提高用户体验，网站有时需要多种浏览模式。现在特邀请你为蓝桥官网设计具有经典、浏览和工具三种布局模式。使用户可以根据具体情况选择合适的模式，以便更好地浏览网页内容。本题需要在已提供的基础项目中使用 JS 完善代码实现布局的切换。 …...

编程日记 2026/2/13 19:38:38

测试用例生成平台通过大模型升级查询功能，生成智能测试用例

在测试工作中，查询功能是各类系统的核心模块，传统的测试用例编写往往耗时且重复。如何让老旧平台焕发新活力？本文将结合大模型技术，通过用户输入的字段信息，自动化生成高效、精准的测试用例。同时，我们还将…...

编程日记 2026/2/6 7:46:14

python每日十题(9)

外存储器的容量一般都比较大，而且大部分可以移动，便于在不同计算机之间进行信息交流。外存储器中数据被读入内存储器后，才能被CPU读取，CPU不能直接访问外存储器。本题答案为A选项。进程是指一个具有一定独立功能的程序关于某个数…...

编程日记 2026/2/16 8:08:12

macOS 制作dmg磁盘映像安装包

制作dmg磁盘影像安装包需要准备一下材料： 1. 导出的APP 2. 背景图片 3. 应用程序替身前两种材料很容易得到。下面介绍一下应用程序替身制作过程： Finder —> 选中应用程序 --> 找到顶部菜单栏中的前往 ----> 选择上层文件夹选中应用程…...

编程日记 2026/2/13 0:18:53

LeetCode热题100JS（79/100）第十五天|347|295|121|55|45

347. 前 K 个高频元素题目链接：347. 前 K 个高频元素难度：中等刷题状态：1刷新知识： 解题过程思考示例 1: 输入: nums [1,1,1,2,2,3], k 2 输出: [1,2] 没思路，看答案题解分析参考题解链接&#xff1a…...

编程日记 2025/4/5 15:55:24

Rust从入门到精通之精通篇：22.Unsafe Rust 详解

Unsafe Rust 详解在 Rust 的设计哲学中，安全性是核心原则之一。Rust 的所有权系统、借用检查器和类型系统共同保证了内存安全和线程安全。然而，有些底层操作无法通过 Rust 的安全检查机制进行验证，这就是 unsafe Rust 存在的原因。在本章中…...

编程日记 2025/4/1 3:58:48

Three.js 快速入门教程【十八】射线拾取模型——鼠标点击屏幕选中模型或物体

系列文章目录 Three.js 快速入门教程【一】开启你的 3D Web 开发之旅 Three.js 快速入门教程【二】透视投影相机 Three.js 快速入门教程【三】渲染器 Three.js 快速入门教程【四】三维坐标系 Three.js 快速入门教程【五】动画渲染循环 Three.js 快速入门教程【六】相机控件 Or…...

编程日记 2026/2/13 22:58:44

如何下载 Postman？快速指南！

Postman 是一款非常受欢迎的 API 测试工具。它最初是作为一个 Chrome 插件发布，后来发展成为一款独立的跨平台软件，支持 Windows、Mac、Linux 等操作系统。 Postman 怎么下载教程（2025最新版）？...

编程日记 2026/2/15 19:56:49

Shiro学习（一）：Shiro介绍和基本使用

一、Shiro介绍 1、百科对shiro的定义如下： Apache Shiro 一个强大且易于使用的 Java 安全框架，它提供了身份验证、授权、加密和会话管理等功能。Shiro 的设计目标是简化企业级应用程序的安全性开发过程，同时保持代码的简洁和易于维护。 2、…...

编程日记 2026/2/13 14:51:18

【git】基本操作

添加文件进本地仓库 git add 文件名删除文件 git rm 文件名版本回退 git reset [--sort| -- mixed | -- hard] sort选项: 只回退版本库，不回退暂存区和工作区 mixed（reset的默认选项）: 回退版本库和暂存区，不回退工作区 hard :…...

编程日记 2025/4/5 12:36:37

7.1 分治-快排专题：LeetCode 75. 颜色分类

1. 题目链接 LeetCode 75. 颜色分类 2. 题目描述给定一个包含红色（0）、白色（1）和蓝色（2）的数组 nums，要求原地对数组进行排序，使得相同颜色的元素相邻，且按红、白、蓝…...

编程日记 2026/2/14 12:34:18