02-CSS
一、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 键， 就可以生成 <…...
JavaScript 中的类型转换机制以及==和===的区别
目录一、概述二、显示转换Number()parseInt()String()Boolean()三、隐式转换自动转换成字符串自动转换成数值四、 和 区别1、等于操作符2、全等操作符3、区别小结一、概述 我们知道，JS中有六种简单数据类型：undefined、null、boolean、string、number、…...
RocketMQ基础篇（一）
目录一、发送消息类型1、同步消息2、异步消息3、单向消息4、顺序消费5、延迟消费二、消费模式1、集群模式2、广播模式3、消费模式扩展4、如何配置三、其他用法1、事务消息2、过滤消息1）Tag过滤2）SQL方式过滤源码放到了GitHub仓库上，地址 http…...
Android前沿技术—gradle中的build script详解
build.gradle是gradle中非常重要的一个文件，因为它描述了gradle中可以运行的任务，今天本文将会带大家体验一下如何创建一个build.gradle文件和如何编写其中的内容。 project和task gradle是一个构建工具，所谓构建工具就是通过既定的各种规则…...
深入浅出PaddlePaddle函数——paddle.zeros_like
分类目录：《深入浅出PaddlePaddle函数》总目录 相关文章： 深入浅出PaddlePaddle函数——paddle.Tensor 深入浅出PaddlePaddle函数——paddle.ones 深入浅出PaddlePaddle函数——paddle.zeros 深入浅出PaddlePaddle函数——paddle.full 深入浅出Padd…...
物料-零部件分类属性
离散制造业的研发、生产跟产品零部件紧密联系在一起，从企业业务流程来说零部件涉及研发、采购、仓储、生产、质量、售后和配件等多个部门，为了更好地管理零部件，下面我们一起来看看零部件概念及分类。 1、按行业属性分类 （1&…...
TypeError: cannot pickle ‘module‘ object
创建python对象时报错： TypeError: cannot pickle module object 原因： 很大可能是类成员错误的使用了第三方包（别名）等，具体排查方法可参考： import redisimport pickle from pprint import pformat as …...
[MySQL索引]3.索引的底层原理（二）
索引的底层原理（二）InnoDB的主键和二级/辅助索引树（涉及回表）MyISAM存储引擎的主键和二级索引树InnoDB的主键和二级/辅助索引树（涉及回表） 看下面这张student数据库表： 场景一：uid…...
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}混合名称技术通过…...
数据库管理-第六十期 监听（20230309）
数据库管理 2023-03-09第六十期期 监听1 无法访问2 监听配置3 问题复现与解决4 静态监听5 记不住配置咋整总结第六十期期 监听 不知不觉又来到了一个整10期数，我承认上一期有很大的划水的。。。嫌疑吧，本期内容是从帮群友解决ADG前置配置时候的一个问题…...
概率论与数理统计相关知识
本博客为《概率论与数理统计－－茆诗松（第二版）》阅读笔记，目的是查漏补缺前置知识数学符号连乘符号：；总和符号：；“任意”符号：∀；“存在”符号&…...
SOC计算方法：卡尔曼滤波算法
卡尔曼滤波算法是一种经典的状态估计算法，它广泛应用于控制领域和信号处理领域。在电动汽车领域中，卡尔曼滤波算法也被广泛应用于电池管理系统中的电池状态估计。其中，电池的状态包括电池的剩余容量（SOC）、内阻、温度等…...
【C语言】自定义类型、枚举类型与宏定义
目录一、自定义类型二、宏定义三、枚举类型一、自定义类型 自定义类型关键字：typedef，用新的类型名称代替原有的类型名。 例如： typedef char u8; u8 x;表示指定u8为新的类型名，代替char，作用与char相同，…...
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、…...
03单链表
、# 单链表 单链表是一种链式存储的数据结构，用一组地址任意的存储单元存放线性表中的数据元素。单链表中的每个结点包含一个数据域和一个指针域，数据域存放数据元素，指针域存放下一个结点的地址。单链表的第一个结点称为头结点，…...
ESLint、Prettier插件的安装与使用
在统一代码风格这一块，通常大家都会用到ESLint。虽然 ESLint 本身具备自动格式化代码的功能，但ESLint 的主要优势在于代码的风格检查并给出提示，而在代码格式化这一块 Prettier 做的更加专业，因此在实际项目开发中我们经常将 ESLi…...
matlab在管理学中的应用简matlab基础【三】
规划论及MATLAB计算 1、线性规划 问题的提出 例1. 某工厂在计划期内要安排甲、乙两种产品的生产，已知生产单位产品所需的资源A、B、C的消耗以及资源的计划期供给量，如下表： 问题：工厂应分别生产多少单位甲、乙产品才能使工厂获…...
NDK JNI 变声器实现
Android NDK 导入 C库的开发流程学习；通过使用fmod的C库，实现变声器功能。导入库文件1）复制fmod的C库到cpp目录下2）复制fmod的so库到jniLibs目录下3）复制fmod的jar库到libs目录下4）将声音文件复制到assets目…...
VMLogin防关联指纹浏览器的主帐号和子账号区别介绍
VMLogin主账户管理子账户，主要用于团队协作，分账户登录使用，主账户相当于老板，子账户相当于员工。 主账户创建并管理子账户； 主账户可以修改子账户的密码； 主账户可以设置子账户是否有创建配置文件权限&a…...
Apache DolphinScheduler GitHub Star 突破 10000！
点击蓝字 关注我们今天，Apache DolphinScheduler GitHub Star 突破 10000，项目迎来一个重要里程碑。这表明 Apache DolphinScheduler 已经在全球的开发者和用户中获得了广泛的认可和使用。DolphinScheduler 旨在解决公司日常运营中的大数据处理工作流调度…...
云计算——弹性云计算器（ECS）
弹性云服务器：ECS 概述 云计算重构了ICT系统，云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台，包含如下主要概念。 ECS（Elastic Cloud Server）：即弹性云服务器，是云计算…...
脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）
一、数据处理与分析实战 （一）实时滤波与参数调整 基础滤波操作 60Hz 工频滤波：勾选界面右侧 “60Hz” 复选框，可有效抑制电网干扰（适用于北美地区，欧洲用户可调整为 50Hz）。 平滑处理&…...
Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）
概述 在 Swift 开发语言中，各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过，在涉及到多个子类派生于基类进行多态模拟的场景下，…...
UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法：netstat [选项] 功能：查看网络状态 常用选项： n 拒绝显示别名&#…...
CocosCreator 之 JavaScript/TypeScript和Java的相互交互
引擎版本： 3.8.1 语言： JavaScript/TypeScript、C、Java 环境：Window 参考：Java原生反射机制 您好，我是鹤九日！ 回顾 在上篇文章中：CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...
让AI看见世界：MCP协议与服务器的工作原理
让AI看见世界：MCP协议与服务器的工作原理 MCP（Model Context Protocol）是一种创新的通信协议，旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天，MCP正成为连接AI与现实世界的重要桥梁。…...
vue3+vite项目中使用.env文件环境变量方法
vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量，这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...
全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec？ IPsec VPN 5.1 IPsec传输模式（Transport Mode） 5.2 IPsec隧道模式（Tunne…...
R语言速释制剂QBD解决方案之三
本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...
Webpack性能优化：构建速度与体积优化策略
一、构建速度优化 1、升级Webpack和Node.js 优化效果：Webpack 4比Webpack 3构建时间降低60%-98%。原因： V8引擎优化（for of替代forEach、Map/Set替代Object）。默认使用更快的md4哈希算法。AST直接从Loa…...