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

02-CSS

news 2025/12/28 1:10:56

一、emmet语法

1、简介

Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。

快速生成HTML结构语法

快速生成CSS样式语法

2、快速生成HTML结构语法

生成标签直接输入标签名按tab键即可比如 div 然后tab 键，就可以生成 <div></div>

如果想要生成多个相同标签加上 * 就可以了比如 div*3 就可以快速生成3个div

如果有父子级关系的标签，可以用 > 比如 ul > li就可以了

如果有兄弟关系的标签，用 + 就可以了比如 div+p

如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab 键就可以了

如果生成的div 类名是有顺序的，可以用自增符号 $

如果想要在生成的标签内部写内容可以用 { } 表示

3、快速生成CSS样式语法

CSS 基本采取简写形式即可

比如 w200 按tab 可以生成 width: 200px;

比如 lh26px 按tab 可以生成 line-height: 26px;

4、快速格式化代码

Vscode 快速格式化代码: shift+alt+f

也可以设置当我们保存页面的时候自动格式化代码:

1）文件 ------.>【首选项】---------->【设置】；

2）搜索emmet.include;

3）在settings.json下的【工作区设置】中添加以下语句：

"editor.formatOnType": true,

"editor.formatOnSave": true

二、css的复合选择器

1、什么是复合选择器？

在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

复合选择器可以更准确、更高效的选择目标元素（标签）

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

2、后代选择器 (重要）

定义：

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

语法：

元素1 元素2 { 样式声明 }

上述语法表示选择元素 1 里面的所有元素 2 (后代元素)。

例如：

ul li { 样式声明 } /* 选择 ul 里面所有的 li标签元素 */

元素1 和元素2 中间用空格隔开

元素1 是父级，元素2 是子级，最终选择的是元素2

元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可

元素1 和元素2 可以是任意基础选择器

3、子选择器 (重要）

定义：

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。（简单理解就是选亲儿子元素）

语法：

元素1 > 元素2 { 样式声明 }

上述语法表示选择元素1 里面的所有直接后代(子元素) 元素2。

例如：

div > p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */

元素1 和元素2 中间用大于号隔开

元素1 是父级，元素2 是子级，最终选择的是元素2

元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他亲儿子选择器

课堂提问

1. 请将下面的链接文字修改为红色。

<div class="nav"><ul><li><a href="#">百度</a></li><li><a href="#">百度</a></li></ul>
</div>

.nav ul li a {color: red;
}

2. 请将下面的大肘子文字修改为红色。

<div class="hot"><a href="#">大肘子</a><ul><li><a href="#">猪头</a></li><li><a href="#">猪尾巴</a></li></ul>
</div>

.hot>a {color: red;
}

4、并集选择器 (重要）

定义：

并集选择器可以选择多组标签, 同时为他们定义相同的样式，通常用于集体声明。并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

元素1,元素2 { 样式声明 }

上述语法表示选择元素1 和元素2。

例如：

ul,div { 样式声明 } /* 选择 ul 和 div标签元素 */

元素1 和元素2 中间用逗号隔开

逗号可以理解为和的意思

并集选择器通常用于集体声明

5、伪类选择器

定义：

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

语法：

伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。

伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。

a:link没有点击过的(访问过的)链接

a:visited点击过的(访问过的)链接

a:hover鼠标经过的那个链接

a:active鼠标正在按下还没有弹起鼠标的那个链接

6、链接伪类选择器

链接伪类选择器注意事项

为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。

记忆法：love hate 或者 lv 包包 hao 。

因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

链接伪类选择器实际工作开发中的写法：

 /* a 是标签选择器 所有的链接 */ a { color: gray;}/* :hover 是链接伪类选择器 鼠标经过 */a:hover { color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */}

7、:focus 伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况 <input> 类表单元素才能获取

例子：

input:focus { background-color:yellow;
}

8、复合选择器总结

三、css的显示模式

1、什么是元素的显示模式

网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。

元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。

HTML 元素一般分为块元素和行内元素两种类型。

2、元素显示模式的分类

2.1、块元素

常见的块元素：

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>>等，其中 <div> 标签是最典型的块元素。

块级元素的特点：

比较霸道，自己独占一行。

高度，宽度、外边距以及内边距都可以控制。

宽度默认是容器（父级宽度）的100%。

是一个容器及盒子，里面可以放行内或者块级元素。

注意：

文字类的元素内不能放块级元素

<p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div>
同理， <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

2.2、行内元素

常见的行内元素：

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

相邻行内元素在一行上，一行可以显示多个。

高、宽直接设置是无效的。

默认宽度就是它本身内容的宽度。

行内元素只能容纳文本或其他行内元素。

注意：

链接里面不能再放链接

特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全

2.3、行内块元素

常见的行内块标签：

<img />、<input />、<td>

它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点：

和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。

一行可以显示多个（行内元素特点）。

默认宽度就是它本身内容的宽度（行内元素特点）。

高度，行高、外边距以及内边距都可以控制（块级元素特点）。

2.4、元素显示模式总结

学习元素显示模式的主要目的就是分清它们各自的特点，当我们网页布局的时候，在合适的地方用合适的标签元素。

3、元素显示模式的转换

特殊情况下，我们需要元素模式的转换，简单理解: 一个模式的元素需要另外一种模式的特性

比如想要增加链接 <a> 的触发范围。

转换方式

转换为块元素：display:block;

转换为行内元素：display:inline;

转换为行内块：display: inline-block;

案例：简洁版小米侧边栏

案例的核心思路分为两步:

1. 把链接a 转换为块级元素, 这样链接就可以单独占一行,并且有宽度和高度.

2. 鼠标经过a 给链接设置背景颜色

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>简单版小米侧边栏</title><style>/* 1. 把a转换为块级元素 */a {display: block;width: 230px;height: 40px;background-color: #55585a;font-size: 14px;color: #fff;text-decoration: none;text-indent: 2em;line-height: 40px;}/* 2 鼠标经过链接变换背景颜色 */a:hover {background-color: #ff6700;}</style>
</head><body><a href="#">手机 电话卡</a><a href="#">电视 盒子</a><a href="#">笔记本 平板</a><a href="#">出行 穿戴</a><a href="#">智能 路由器</a><a href="#">健康 儿童</a><a href="#">耳机 音响</a>
</body></html>

4、单行文字垂直居中的代码

解决方案:

让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中

简单理解:

行高的上空隙和下空隙把文字挤到中间了，

如果行高小于盒子高度,文字会偏上，

如果行高大于盒子高度,则文字偏下。

四、css的背景

通过 CSS 背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

1、背景颜色

样式名称：

background-color 定义元素的背景颜色

使用方式：

background-color:颜色值;

其他说明：

元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。

background-color:transparent;

2、背景图片

background-image 属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)

background-image : none | url (url)background-image : none
background-image : url (./url/1.jpg)

注意：背景图片后面的地址，千万不要忘记加 URL，同时里面的路径不要加引号。

3、背景平铺

如果需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。

background-repeat: repeat | no-repeat | repeat-x | repeat-y

4、背景图片位置

利用 background-position 属性可以改变图片在背景中的位置。

background-position: x y;

参数代表的意思是：x 坐标和 y 坐标。可以使用方位名词或者精确单位

其他说明：

1、参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致

如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

2、参数是精确单位

如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标

如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

3、参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

5、背景图片固定

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment 后期可以制作视差滚动的效果。

background-attachment : scroll | fixed

6、背景样式合写

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性 background 中。从而节约代码量.

当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为：

background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;

background: transparent url(image.jpg) repeat-y fixed top ;

这是实际开发中，我们更提倡的写法。

7、背景色半透明

CSS3 提供了背景颜色半透明的效果。

background: rgba(0, 0, 0, 0.3);

最后一个参数是 alpha 透明度，取值范围在 0~1之间

我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);

注意：

背景半透明是指盒子背景半透明，盒子里面的内容不受影响

CSS3 新增属性，是 IE9+ 版本浏览器才支持的，但是现在实际开发,我们不太关注兼容性写法了,可以放心使用

8、背景总结

案例：五彩导航

1. 链接属于行内元素, 但是此时需要宽度高度,因此需要模式转换.

2. 里面文字需要水平居中和垂直居中. 因此需要单行文字垂直居中的代码.

3. 链接里面需要设置背景图片.因此需要用到背景的相关属性设置.

4. 鼠标经过变化背景图片,因此需要用到链接伪类选择器.

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>综合案例-五彩导航</title><style>.nav a {display: inline-block;width: 120px;height: 58px;background-color: pink;text-align: center;line-height: 48px;color: #fff;text-decoration: none;}.nav .bg1 {background: url(images/bg1.png) no-repeat;}.nav .bg1:hover {background-image: url(images/bg11.png);}.nav .bg2 {background: url(images/bg2.png) no-repeat;}.nav .bg2:hover {background-image: url(images/bg22.png);}</style>
</head><body><div class="nav"><a href="#" class="bg1">五彩导航</a><a href="#" class="bg2">五彩导航</a><a href="#">五彩导航</a><a href="#">五彩导航</a><a href="#">五彩导航</a></div>
</body></html>

02-CSS

一、emmet语法1、简介Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。快速生成HTML结构语法快速生成CSS样式语法2、快速生成HTML结构语法生成标签直接输入标签名按tab键即可比如 div 然后tab 键， 就可以生成 <…...

编程日记 2023/3/9 13:50:03

JavaScript 中的类型转换机制以及==和===的区别

目录一、概述二、显示转换Number()parseInt()String()Boolean()三、隐式转换自动转换成字符串自动转换成数值四、和区别1、等于操作符2、全等操作符3、区别小结一、概述我们知道，JS中有六种简单数据类型：undefined、null、boolean、string、number、…...

编程日记 2023/3/9 13:48:56

RocketMQ基础篇（一）

目录一、发送消息类型1、同步消息2、异步消息3、单向消息4、顺序消费5、延迟消费二、消费模式1、集群模式2、广播模式3、消费模式扩展4、如何配置三、其他用法1、事务消息2、过滤消息1）Tag过滤2）SQL方式过滤源码放到了GitHub仓库上，地址 http…...

编程日记 2023/3/9 13:47:54

Android前沿技术—gradle中的build script详解

build.gradle是gradle中非常重要的一个文件，因为它描述了gradle中可以运行的任务，今天本文将会带大家体验一下如何创建一个build.gradle文件和如何编写其中的内容。 project和task gradle是一个构建工具，所谓构建工具就是通过既定的各种规则…...

编程日记 2023/3/9 13:46:51

深入浅出PaddlePaddle函数——paddle.zeros_like

分类目录：《深入浅出PaddlePaddle函数》总目录相关文章： 深入浅出PaddlePaddle函数——paddle.Tensor 深入浅出PaddlePaddle函数——paddle.ones 深入浅出PaddlePaddle函数——paddle.zeros 深入浅出PaddlePaddle函数——paddle.full 深入浅出Padd…...

编程日记 2023/4/15 8:09:23

物料-零部件分类属性

离散制造业的研发、生产跟产品零部件紧密联系在一起，从企业业务流程来说零部件涉及研发、采购、仓储、生产、质量、售后和配件等多个部门，为了更好地管理零部件，下面我们一起来看看零部件概念及分类。 1、按行业属性分类 （1&…...

编程日记 2023/4/15 8:09:19

TypeError: cannot pickle ‘module‘ object

创建python对象时报错： TypeError: cannot pickle module object 原因： 很大可能是类成员错误的使用了第三方包（别名）等，具体排查方法可参考： import redisimport pickle from pprint import pformat as …...

编程日记 2023/4/15 8:09:16

[MySQL索引]3.索引的底层原理（二）

索引的底层原理（二）InnoDB的主键和二级/辅助索引树（涉及回表）MyISAM存储引擎的主键和二级索引树InnoDB的主键和二级/辅助索引树（涉及回表） 看下面这张student数据库表： 场景一：uid…...

编程日记 2023/4/15 8:09:13

JavaScript混淆——逆向思维的艺术

在本文中我们将介绍三种常见的JavaScript混淆技术。 1.混合名称通过将函数名称和变量名混合使用，我们可以使代码更难读。下面是一个使用名称混合的JavaScript函数。 function c(a){var b[2,4,8,a],db[0]b[1]b[2]b[3],ed""a;return e}混合名称技术通过…...

编程日记 2023/4/15 8:09:10

数据库管理-第六十期监听（20230309）

数据库管理 2023-03-09第六十期期监听1 无法访问2 监听配置3 问题复现与解决4 静态监听5 记不住配置咋整总结第六十期期监听不知不觉又来到了一个整10期数，我承认上一期有很大的划水的。。。嫌疑吧，本期内容是从帮群友解决ADG前置配置时候的一个问题…...

编程日记 2023/4/14 15:33:52

概率论与数理统计相关知识

本博客为《概率论与数理统计－－茆诗松（第二版）》阅读笔记，目的是查漏补缺前置知识数学符号连乘符号：；总和符号：；“任意”符号：∀；“存在”符号&…...

编程日记 2023/4/15 8:09:07

SOC计算方法：卡尔曼滤波算法

卡尔曼滤波算法是一种经典的状态估计算法，它广泛应用于控制领域和信号处理领域。在电动汽车领域中，卡尔曼滤波算法也被广泛应用于电池管理系统中的电池状态估计。其中，电池的状态包括电池的剩余容量（SOC）、内阻、温度等…...

编程日记 2023/4/15 8:09:04

【C语言】自定义类型、枚举类型与宏定义

目录一、自定义类型二、宏定义三、枚举类型一、自定义类型自定义类型关键字：typedef，用新的类型名称代替原有的类型名。例如： typedef char u8; u8 x;表示指定u8为新的类型名，代替char，作用与char相同，…...

编程日记 2023/4/15 8:09:00

Java进阶（下篇2）

Java进阶（下篇2）一、IO流01.File类的使用1.1、File类的实例化1.2、File类的常用方法11.3、File类的常用方法21.4、课后练习02、IO流原理及流的分类2.1、IO流原理2.2、流的分类2.3、IO 流体系03、节点流(或文件流)3.1、FileReader读入数据的基本操作3.2、…...

编程日记 2023/4/15 8:08:55

03单链表

、# 单链表单链表是一种链式存储的数据结构，用一组地址任意的存储单元存放线性表中的数据元素。单链表中的每个结点包含一个数据域和一个指针域，数据域存放数据元素，指针域存放下一个结点的地址。单链表的第一个结点称为头结点，…...

编程日记 2023/4/15 8:08:52

ESLint、Prettier插件的安装与使用

在统一代码风格这一块，通常大家都会用到ESLint。虽然 ESLint 本身具备自动格式化代码的功能，但ESLint 的主要优势在于代码的风格检查并给出提示，而在代码格式化这一块 Prettier 做的更加专业，因此在实际项目开发中我们经常将 ESLi…...

编程日记 2023/4/15 8:08:49

matlab在管理学中的应用简matlab基础【三】

规划论及MATLAB计算 1、线性规划问题的提出例1. 某工厂在计划期内要安排甲、乙两种产品的生产，已知生产单位产品所需的资源A、B、C的消耗以及资源的计划期供给量，如下表： 问题：工厂应分别生产多少单位甲、乙产品才能使工厂获…...

编程日记 2023/4/15 8:08:45

NDK JNI 变声器实现

Android NDK 导入 C库的开发流程学习；通过使用fmod的C库，实现变声器功能。导入库文件1）复制fmod的C库到cpp目录下2）复制fmod的so库到jniLibs目录下3）复制fmod的jar库到libs目录下4）将声音文件复制到assets目…...

编程日记 2023/4/15 8:08:42

VMLogin防关联指纹浏览器的主帐号和子账号区别介绍

VMLogin主账户管理子账户，主要用于团队协作，分账户登录使用，主账户相当于老板，子账户相当于员工。主账户创建并管理子账户； 主账户可以修改子账户的密码； 主账户可以设置子账户是否有创建配置文件权限&a…...

编程日记 2023/4/15 8:08:39

Apache DolphinScheduler GitHub Star 突破 10000！

点击蓝字关注我们今天，Apache DolphinScheduler GitHub Star 突破 10000，项目迎来一个重要里程碑。这表明 Apache DolphinScheduler 已经在全球的开发者和用户中获得了广泛的认可和使用。DolphinScheduler 旨在解决公司日常运营中的大数据处理工作流调度…...

编程日记 2023/4/15 8:08:35

Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢，博主的学习进度也是步入了Java Mybatis 框架，目前正在逐步杨帆旗航。那么接下来就给大家出一期有关 Mybatis 逆向工程的教学，希望能对大家有所帮助，也特别欢迎大家指点不足之处，小生很乐意接受正确的建议&…...

编程新知 2025/12/19 13:41:56

linux 错误码总结

1，错误码的概念与作用在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

编程新知 2025/12/21 4:29:36

sqlserver 根据指定字符解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/10/29 4:33:03

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接：3403. 从盒子中找出字典序最大的字符串 I 代码如下： class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/10/31 5:18:02

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体（对象或容器）QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质（定义颜色、反光等）QFirstPersonC…...

编程新知 2025/12/20 22:25:49

Git常用命令完全指南：从入门到精通

Git常用命令完全指南：从入门到精通一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

编程新知 2025/10/3 0:40:01

【Linux】Linux安装并配置RabbitMQ

目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的，需要先安…...

编程新知 2025/12/25 3:07:38

ubuntu中安装conda的后遗症

缘由: 在编译rk3588的sdk时，遇到编译buildroot失败，提示如下： 提示缺失expect，但是实测相关工具是在的，如下显示： 然后查找借助各个ai工具，重新安装相关的工具，依然无解。解决&am…...

编程新知 2025/12/24 22:27:19

Ray框架：分布式AI训练与调参实践

Ray框架：分布式AI训练与调参实践系统化学习人工智能网站（收藏）：https://www.captainbed.cn/flu 文章目录 Ray框架：分布式AI训练与调参实践摘要引言框架架构解析1. 核心组件设计2. 关键技术实现2.1 动态资源调度2.2 …...

编程新知 2025/12/27 10:19:42