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

CSS学习笔记05

news 文章来源：https://blog.csdn.net/weixin_53983068/article/details/132644066 2024/11/28 22:55:57

CSS笔记05

定位

position

CSS 属性position - 用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。position 有以下常用的属性值：
- position: static; - 默认值。指定元素使用正常的布局行为，即元素在标准文档流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
- position: relative; - 相对定位，元素先放置在默认的static位置，再在不改变页面布局的前提下调整元素位置。相对定位的元素不会被移出标准文档流，且元素原先在标准文档流中所占的空间会被保留。
- position: absolute; - 绝对定位，通过指定元素相对于最近的非static定位祖先元素的偏移，来确定元素位置，如果元素没有非static定位的祖先元素，绝对定位元素会相对于初始块容器的位置进行偏移。（初始块容器是一个有着和浏览器视口一样的尺寸的矩形，它包含根元素<html>。）元素绝对定位后会重新生成一个块级框，而不论原来它在正常文档流中生成何种类型的框。绝对定位的元素会被移出标准文档流，且元素原先在标准文档流中所占的空间不会被保留。
- position: fixed; - 固定定位，通过指定元素相对于浏览器视口（viewport）本身的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。元素固定定位后也会重新生成一个块级框，而不论原来它在正常文档流中生成何种类型的框。固定定位的元素也会被移出标准文档流，且元素原先在标准文档流中所占的空间不会被保留。
补充 - 视口（viewport）：在电脑图形学里面，视口代表了一个可看见的多边形区域（通常来说是矩形）。在浏览器范畴里，它代表的是浏览器中网站可见内容的部分。视口外的内容在被滚动进来前都是不可见的。
下面我们就来详细演示一下这几种定位方式：

静态定位（默认定位） - static

position: static; - 默认值。指定元素使用正常的布局行为，即元素在标准文档流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
首先我们设计一个页面，它由一个父级div和三个子级div组成，我们不手动设置position属性（即此时的position属性为其默认值position: static;）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>默认位置</title><style>body {padding: 20px;}div {margin: 10px;padding: 5px;font-size: 12px;line-height: 25px;}#father {border: 2px solid black;}#first {background-color: yellow;border: 2px dashed orange;}#second {background-color: deepskyblue;border: 2px dashed blue;}#third {background-color: lawngreen;border: 2px dashed green;}</style></head>
<body><div id="father"><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三个盒子</div>
</div></body>
</html>

我们查看默认情况下的网页效果：

在这里插入图片描述

相对定位 - relative

position: relative; - 相对定位，元素先放置在默认的static位置，再在不改变页面布局的前提下调整元素位置。相对定位的元素不会脱离标准文档流，且元素原先在标准文档流中所占的空间会被保留。因此，left: 20px; 会向元素的左外边距边界与其包含块左边界之间添加 20 像素的偏移量，其显示效果便是元素相比于默认位置向右移了 20 像素（在左侧留下了 20 像素的空白）。
我们使用position: relative;将上面默认定位网页中的第一个和第三个div设置为相对定位，并使用top，right，bottom 和 left 属性来改变它们的位置：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>相对定位</title><style>body {padding: 20px;}div {margin: 10px;padding: 5px;font-size: 12px;line-height: 25px;}#father {border: 2px solid black;}#first {background-color: yellow;border: 2px dashed orange;position: relative; /* 设置定位方式为相对定位 */left: 20px;top: -20px;}#second {background-color: deepskyblue;border: 2px dashed blue;}#third {background-color: lawngreen;border: 2px dashed green;position: relative; /* 设置定位方式为相对定位 */right: 20px;bottom: -20px;}</style></head>
<body><div id="father"><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三个盒子</div>
</div></body>
</html>

查看使用相对定位改变元素位置后的网页效果：

在这里插入图片描述

练习：
- 使用div和超链接a布局页面
- 每个超链接宽度和高度都为100px，背景颜色为粉色，当鼠标指针移上去时变为蓝色
- 使用相对定位改变各个超链接的位置

在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box {width: 300px;height: 300px;border: 2px solid red;margin: 0 auto;padding: 10px;}a {width: 100px;height: 100px;display: block;background-color: pink;line-height: 100px;font-size: 15px;color: white;text-align: center;text-decoration: none;}a:hover {background-color: blue;}#second, #fourth {position: relative;left: 200px;top: -100px;}#fifth {position: relative;left: 100px;top: -300px;}</style></head>
<body><div id="box"><a id="first" href="#">链接1</a><a id="second" href="#">链接2</a><a id="third" href="#">链接3</a><a id="fourth" href="#">链接4</a><a id="fifth" href="#">链接5</a>
</div></body>
</html>

查看网页效果：

在这里插入图片描述

绝对定位 - absolute

position: absolute; - 绝对定位，通过指定元素相对于最近的非static定位祖先元素的偏移，来确定元素位置，如果元素没有非static定位的祖先元素，绝对定位元素会相对于初始块容器的位置进行偏移。（初始块容器是一个有着和浏览器视口一样的尺寸的矩形，它包含根元素<html>。）元素绝对定位后会重新生成一个块级框，而不论原来它在正常文档流中生成何种类型的框。绝对定位的元素会被移出标准文档流，且元素原先在标准文档流中所占的空间不会被保留。
首先我们来测试一下在没有设置非static定位的祖先元素时，使用绝对定位改变元素第二个子div的位置：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>绝对定位</title><style>body {padding: 20px;}div {margin: 10px;padding: 5px;font-size: 12px;line-height: 25px;}#father {border: 2px solid black;}#first {background-color: yellow;border: 2px dashed orange;}#second {background-color: deepskyblue;border: 2px dashed blue;position: absolute;left: 10px;top: 20px;}#third {background-color: lawngreen;border: 2px dashed green;}</style></head>
<body><div id="father"><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三个盒子</div>
</div></body>
</html>

查看使用相对定位改变元素位置后的网页效果：

在这里插入图片描述

分析：

在这里插入图片描述

接着我们再来测试一下在设置了非static定位的祖先元素后，使用绝对定位改变元素第二个子div的位置：
将第二个子div的父级元素father设置为相对定位 -relative（通常我们都习惯将使用绝对定位的元素的父级元素设置为相对定位 - “ 子绝父相 ” ）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>绝对定位</title><style>body {padding: 20px;}div {margin: 10px;padding: 5px;font-size: 12px;line-height: 25px;}/* 设置父级元素为非static定位 */#father {border: 2px solid black;position: relative;}#first {background-color: yellow;border: 2px dashed orange;}#second {background-color: deepskyblue;border: 2px dashed blue;position: absolute;left: 10px;top: 20px;}#third {background-color: lawngreen;border: 2px dashed green;}</style></head>
<body><div id="father"><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三个盒子</div>
</div></body>
</html>

查看使用绝对定位改变元素位置后的网页效果：

在这里插入图片描述

分析：

在这里插入图片描述

固定定位 - fixed

position: fixed; - 固定定位，通过指定元素相对于浏览器视口（viewport）本身的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。元素固定定位后也会重新生成一个块级框，而不论原来它在正常文档流中生成何种类型的框。固定定位的元素也会被移出标准文档流，且元素原先在标准文档流中所占的空间不会被保留。
下面我们重新写一个例子：在网页中定义两个div，第一个div使用绝对定位移动到初始块容器的右下角，第二个div使用固定定位移动到浏览器视口的右下角：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>固定定位</title><style>body {height: 1000px;}/* 绝对定位，相对于初始包含块(和浏览器视口大小相等的一个矩形) */div:nth-of-type(1) {width: 200px;height: 200px;background-color: red;position: absolute;right: 0;bottom: 0;}/* 固定定位，相对于浏览器视口本身 */div:nth-of-type(2) {width: 100px;height: 100px;background-color: blue;position: fixed;right: 0;bottom: 0;}</style></head>
<body><div>绝对定位div</div>
<div>固定定位div</div></body>
</html>

查看网页效果：

在这里插入图片描述

可以看到此时两个div都移动到了右下角。那么它们的区别在哪里呢？
下面我们滑动浏览器侧边的滚动条：

在这里插入图片描述

我们可以发现使用绝对定位的div的位置会随着屏幕滚动而变化；而使用固定定位的div的位置则不会随着屏幕滚动而变化，始终在当前浏览器视口的右下角。

z-index 与不透明度

首先我们来理解一下什么是图层：

在这里插入图片描述

CSS 属性z-index指定一个元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的上层。
演示：
首先我们写一个 HTML 页面：

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/style.css">
</head>
<body><div class="content"><ul><li><img src="images/bg.png" alt="bg.png"></li><li class="tipText">快来领养猫咪吧</li><li class="tipBg"></li><li>XX宠物救助中心</li></ul>
</div></body>
</html>

它的页面效果是这样的：

在这里插入图片描述

我们给它添加一些样式：

style.css

#content {width: 460px;margin: 0;padding: 0;overflow-block: hidden;font-size: 12px;line-height: 25px;border: 1px solid black;
}ul, li {margin: 0;padding: 0;list-style: none;
}/* 设置父级元素相对定位(子绝父相) */
#content {position: relative;
}/* 绝对定位 */
.tipText, .tipBg {width: 460px;height: 25px;position: absolute;top: 285px;
}.tipText {color: white;
}.tipBg {background-color: black;
}

此时的页面效果如下：

在这里插入图片描述

我们发现我们的提示背景tipBg覆盖住了我们的提示文字tipText，导致我们看不到我们的提示文字。
我们现在给提示文字tipText设置堆叠顺序，让它的堆叠顺序更高：

style.css

#content {width: 460px;margin: 0;padding: 0;overflow-block: hidden;font-size: 12px;line-height: 25px;border: 1px solid black;
}ul, li {margin: 0;padding: 0;list-style: none;
}#content {position: relative;
}.tipText, .tipBg {width: 460px;height: 25px;position: absolute;top: 285px;
}/* z-index - 设置元素的堆叠顺序 */
.tipText {color: white;z-index: 99;
}.tipBg {background-color: black;
}

此时的页面效果如下：

在这里插入图片描述

补充：为了让页面更美观，我们还可以使用opacity属性设置元素的不透明度：

#content {width: 460px;margin: 0;padding: 0;overflow-block: hidden;font-size: 12px;line-height: 25px;border: 1px solid black;
}ul, li {margin: 0;padding: 0;list-style: none;
}#content {position: relative;
}.tipText, .tipBg {width: 460px;height: 25px;position: absolute;top: 285px;
}.tipText {color: white;z-index: 99;
}/* opacity - 设置元素的不透明度(0.0 ~ 1.0) */
.tipBg {background-color: black;opacity: 0.5;/* filter: alpha(opacity=50); - IE8以及更早版本支持使用filter设置元素的不透明度 */
}

此时的页面效果如下：

在这里插入图片描述

CSS学习笔记05

CSS笔记05 定位 position CSS 属性position - 用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。position 有以下常用的属性值： position: static; - 默认值。指定元素使用正常的布局行为&am…...

编程日记 2023/9/10 16:27:18

Linux查看指定端口是否被占用

在Linux中，可以使用多种方法来检查一个特定端口（例如3306，通常由MySQL使用）是否被占用： 使用netstat命令: 如果系统中已安装了netstat，可以使用以下命令检查3306端口： netstat -tuln | grep 330…...

编程日记 2023/9/10 16:26:17

【Python 自动化】小说推文一键生成思路概述

最近看了一下小说推文成品软件的思路，发现可以完全迁移到我的 BookerAutoVideo 上面来。这篇短文里面，我试着分析一下整个推文视频生成的流程，以及简要阐述一下有什么工具。整体流程是这样： 分句原文是按照段落组织的&#xf…...

编程日记 2023/9/10 16:25:15

MySQL中的字符集与排序规则详解

在 MySQL 中，字符集（Character Set）用于确定可以在数据库中存储的字符集合，而排序规则（Collation）用于指定比较和排序字符串的规则。下面是关于 MySQL 中字符集和排序规则的一些详细信息： 字符集…...

编程日记 2023/9/10 16:24:14

Java中如何进行加锁？？

笔者在上篇文章介绍了线程安全的问题，接下来本篇文章就是来讲解如何避免线程安全问题~~ 前言：创建两个线程，每个线程都实现对同一个变量count各自自增5W次，我们来看一下代码： class Counter{private int count0;publi…...

编程日记 2023/9/10 16:23:13

Pytorch3D多角度渲染.obj模型

3D理解在从自动驾驶汽车和自主机器人到虚拟现实和增强现实的众多应用中发挥着至关重要的作用。在过去的一年里，PyTorch3D已经成为一个越来越流行的开源框架，用于使用Python进行3D深度学习。值得庆幸的是，PyTorch3D 库背后的人员已经完成了实现…...

编程日记 2023/9/10 16:22:11

MyBatisPlus 基础Mapper接口：增删改查插入一条数据代码 Testpublic void insert() {User user new User();user.setId(6L);user.setName("张三");user.setAge(25);user.setEmail("zhangsanexample.com");userMapper.insert(user);}日志数…...

编程日记 2023/9/10 16:21:09

计算机网络与技术——概述

😊计算机网络与技术——概述 👻前言🥏信息时代下计算机网络的发展🌏互联网概述📡计算机网络基本概念📡互联网发展三阶段📡互联网的标准化 🌏互联网的组成📡互联网的边缘部…...

编程日记 2023/9/10 16:20:09

详解TCP/IP协议第三篇：通信数据在OSI通信模型的上下传输

文章目录一：OSI通信模型间数据传输展示二：应用层到会话层解析 1：应用层 2：表现层 3：会话层...

编程日记 2023/9/10 16:19:07

《C++ primer plus》精炼（OOP部分）——对象和类（2）

“学习是人类成长的喷泉。” - 亚里士多德文章目录内联函数对象的方法和属性构造函数和析构函数构造函数的种类使用构造函数析构函数列表初始化 const成员函数this指针对象数组类作用域作用域为类的常量类作用域内的枚举内联函数定义位于类声明中的函数自动成为内联函数。…...

编程日记 2023/9/10 16:18:06

一点感受

做了两天企业数字化转型的评委，涉及全国最顶级的公司、最顶级的实际落地项目案例，由企业真实的落地团队亲自当面讲解。主要是为了了解了解真实的一线、真实的客户、真实的应用现状和应用水平。 （1）现状我评审的涉及底层技术平台&…...

编程日记 2023/9/10 16:17:05

VirtualBox RockyLinux9 网络连接

有几次都是隔一段时间之后启动虚拟机，用第三方ssh工具就连接不上了。简单记录一下。 1、VirtualBox设置 2、IP设置 cd /etc/NetworkManager/system-connections/ vim enp0s3.nmconnection[connection] idenp0s3 uuid9c404b41-4636-397c-8feb-5c2ed38ef404 typeet…...

编程日记 2023/9/10 16:16:04

java 实现适配器模式

适配器模式（Adapter Pattern）是一种结构型设计模式，用于将一个类的接口转换成另一个类的接口，使得原本不兼容的类可以协同工作。适配器模式包括两种类型：类适配器和对象适配器。下面分别介绍这两种类型的实现方式。类…...

编程日记 2023/9/10 16:15:03

后端常用的Linux命令大全

后端常用的Linux命令大全基础常用命令 Sudo Command 该命令是“superuser do”的缩写。sudo 是最常用的命令之一，可让你执行需要管理或 root 特权和权限的任务。使用sudo命令时系统会提示用户重新使用密码进行身份验证。接下来，Linux 系统将记录一…...

编程日记 2023/9/10 16:14:02

C++面向对象

C面向对象知识内存字节对齐 #pragma pack(n) 表示的是设置n字节对齐,windows默认是8字节，linux是4字节，鲲鹏是4字节 struct A{char a;int b;short c; };char占一个字节，起始偏移为零，int占四个字节，min(8,4)4&#x…...

编程日记 2023/9/10 16:13:01

什么是栈顶缓存技术

假设有一个基于流水线架构的处理器，它需要执行一系列指令。这些指令包括加载数据、执行计算和存储结果。在流水线中，不同阶段的指令可以并行执行。现在考虑一个简单的情况，其中需要执行以下两个指令： 加载数据指令：…...

编程日记 2023/9/10 16:12:00

TDesign的input标签

目录一、新建页面01-todolist 二、 t-input标签、t-button标签 2.1 t-input标签 2.1.1 01-todolist.wxml页面 2.2 01-todolist.json页面 2.3 01-todolist.js页面 2.4 01-todolist.wxss页面 2.2 t-button标签示例1：bind:change 示例2：bind:…...

编程日记 2023/9/10 16:10:59

从零开始学习 Java：简单易懂的入门指南之Map集合（二十三）

Map集合 1.Map集合1.1Map集合概述和特点1.2Map集合的基本功能1.3Map集合的获取功能1.4Map集合的遍历(方式1)1.5Map集合的遍历(方式2) 2.HashMap集合2.1HashMap集合概述和特点2.2HashMap集合应用案例 3.TreeMap集合3.1TreeMap集合概述和特点3.2TreeMap集合应用案例 1.Map集合 1…...

编程日记 2023/9/10 16:09:58

SpringBoot 拦截org.thymeleaf.exceptions.TemplateInputException异常

SpringBoot 拦截thymeleaf异常 org.thymeleaf.exceptions.TemplateInputException异常 org.thymeleaf.exceptions.TemplateProcessingE xception: Could not parse as each: "message : xxx " (template: “xxxx” - line xx, col xx) thymeleaf异常复现你是故意的…...

编程日记 2023/9/10 16:08:57

Qt之随机数

介绍使用qsrand和qrand生成随机数。生成随机数生成随机数主要用到了函数qsrand和qrand，qsrand用来设置种子点，该种子为qrand生成随机数的起始值。如果不调用qsrand,那么qrand()就会自动调用qsrand(1)，即系统默认将1作为随机数的起始值。使…...

编程日记 2023/9/10 16:07:55

UWB学习——day2

UWB应用基于上文UWB学习——day1中对UWB技术的相关优势介绍，UWB技术可广泛应用于以下场景。 WPAN（无线个域网） 基于其高精度（亚厘米级）、低功耗和高穿透性等特征，在以人为基础的个域网中应用广泛&#…...

编程日记 2023/9/10 16:06:55

使用 multiprocessing 多进程处理批量数据

示例代码 import multiprocessingdef process_data(data):# 这里是处理单个数据的过程return data * 2# 待处理的数据 data [1, 2, 3, 4, 5]def normal_func():# 普通处理方式result []for obj in data:result.append(process_data(obj)return resultdef parallel_func():# …...

编程日记 2023/9/10 16:05:53

React 与 TS 结合使用时组件传参总结

在学习 React 时，我们总会遇到在 TS 和 JS 之间切换来开发多个项目，而有时会忘记 TS 的语法，所以编写一下 React 结合 TS 开发时的一些总结知识点，以便后续回顾用。向组件传递基础参数（字符串、数字和布尔值&#xf…...

编程日记 2023/9/10 16:04:52

性能炸裂c++20协程+iocp/epoll，超轻量高性能异步库开发实战

前言： c20出来有一段时间了。其中一大功能就是终于支持协程了（c作为行业大哥大级别的语言，居然到C20才开始支持协程，我也是无力吐槽了，让多少人等了多少年，等了多少青春）但千呼万唤他终于还是来…...

编程日记 2023/9/10 16:03:50

自定义Dynamics 365实施和发布业务解决方案 - 4. 自动化业务流程

本章的主要重点是研究拟议应用程序的关键业务流程的自动化。每个组织每天都有自己独特的业务操作，这些操作是业务的关键部分。有些自动化的业务流程不需要用户交互，有些流程需要用户交互。此外，在某些业务流程中，某些用户操作完成，然后触发自动化流程来完成业务流程。 Dy…...

编程日记 2023/9/10 16:02:49

Lua03——开发环境搭建

1 安装开发插件在 idea 或 vscode 中安装 lua 的开发插件 EmmyLua 2 创建工程在 idea 中创建一个新的工程工程的类型选择 lua 输入工程名及目标目录在工程结构的SDK中设置lua在本地安装目录在工程结构的modules中选择 lua 3 编写第一个lua程序在工程下添加程序包&#…...

编程日记 2023/9/10 16:01:48

Redis 非关系型数据库配置与优化

关系数据库与非关系型数据库关系型数据库关系型数据库是一个结构化的数据库，创建在关系模型（二维表格模型）基础上，一般面向于记录。 SQL 语句（标准数据查询语言）就是一种基于关系型数据库的语言&#x…...

编程日记 2023/9/10 16:00:47

docker笔记8：Docker网络

1.是什么 1.1 docker不启动，默认网络情况 ens33 lo virbr0 在CentOS7的安装过程中如果有选择相关虚拟化的的服务安装系统后，启动网卡时会发现有一个以网桥连接的私网地址的virbr0网卡(virbr0网卡：它还有一个固定的默认IP地址192.168.122…...

编程日记 2023/9/10 15:59:46

C# 共享项目的应用

概述共享项目也可以称为共享资产项目，它允许在多个目标项目之间共享的代码。它支持编译器指令，可以有条件地包含特定于平台的代码，以便编译为引用共享项目的项目的子集。还有 IDE 支持，可帮助管理编译器指令并直观显示代码在每个应用程序中的外观。什么是共享项目？ …...

编程日记 2023/9/10 15:58:45

Linux之基于HTTPS的静态网站

目录 Linux之基于HTTPS的静态网站定义 SSL协议使用Apachemod_ssl组件的加密认证网站 mod_ssl模组安装配置文件 ssl配置文件的主要参数案例案例1 --- 搭建HTTPSSL的加密认证的web服务器案例2 --- 组建多个子目录的网站www.joker.com，该网站下有2个子…...

编程日记 2023/9/10 15:57:44

贝壳找房网站做销售/关键词推广工具

我已经把喝咖啡变成了一种习惯，在咖啡店喝一杯美式、手持一本书，很休闲这个老板的咖啡店也做定制旅游，挺好的，跟很多群游和团游区别很大，人数也有名额限制也包括时间。转载于:https://www.cnblogs.com/Soar-Pang/p/1…...

编程日记 2024/11/28 16:15:20

dynamo wordpress主题/南京广告宣传公司seo

传统解析html标签的方式是利用HttpWebRequest获取html字符串，然后通过正则表达式进行解析，但是这种方式比较麻烦。有没有更简单的方式呢？有，那就是Html Agility Pack，它可以做到像用XmlDocument类来解析xml一样轻松、方…...

编程日记 2024/11/28 15:30:54

如何做网站讯息/引流获客app下载

之前和最近一个项目用到了Doctrine，由于是别人搭建的，自己没有很了解，最近又开始做的时候发现拙荆见肘，于是看了一下doctrine教程，本文就是加上自己理解的doctrine教程文档笔记了。Doctrine2 配置需求需要php5.3.3及以…...

编程日记 2024/11/28 13:32:40

佛山建设外贸网站/云seo关键词排名优化软件

一、什么是队列队列：只允许在一端进行插入数据操作，在另一端进行删除数据操作的特殊线性表，队列具有先进先出FIFO(First In First Out)规则。入队列：进行插入操作的一端称为队尾。出队列：进行删除操作的一端称为…...

编程日记 2024/11/28 12:45:17

wordpress 会员注册/长春网站优化指导

自Apollo开发者社区小程序上线以来，我们每一天都会在「社区问答」板块收到许多开发者的技术提问。每周，可爱的Apollo小姐姐都会精选出被采纳的社区问答进行整理汇总，并统一对大家进行答复。开发者在使用Apollo平台过程中，如果遇到…...

编程日记 2024/11/28 11:51:40

哪几个网站做acm题目/营销比较成功的品牌

mysql配置文件详解 0x00 mysql配置文件路径 /etc/my.cnf 0x01 详解 #以下选项会被MySQL客户端应用读取。注意只有MySQL附带的客户端应用程序保证可以读取这段内容。如果你想你自己的MySQL应用程序获取这些值。需要在MySQL客户端库初始化的时候指定这些选项。 [client] port 3…...

编程日记 2024/11/28 10:03:16

CSS笔记05

定位

position

静态定位（默认定位） - static

相对定位 - relative

绝对定位 - absolute

固定定位 - fixed

z-index 与 不透明度

相关文章：

z-index 与不透明度