灯塔：CSS笔记（2）
一 选择器进阶
后代选择器：空格
作用：根据HTML标签的嵌套关系，，选择父元素 后代中满足条件的元素
选择器语法：选择器1 选择器2{ css }
结果：
*在选择器1所找到标签的后代（儿子 孙子 重孙子...）中，找到满足选择器2的标签，设置样式
注意点：
1.后代包括：儿子 孙子 重孙子....
2.后代选择器中，选择器与选择器之间通过空格隔开
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div p{color: red;}/* div{color: chartreuse;} */</style>
</head>
<body><div><p>这是一个div标签</p></div><div>看看我变红了吗</div>
</body>
</html>子代选择器： >
作用：根据HTML标签的嵌套关系，选择父元素 子代中满足条件的元素
选择器语法：选择器1>选择器2{ css }
结果：在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签样式，设置样式
注意点：
1.子代只包括儿子
2.子代选择器中，选择器与选择器之间通过 > 隔开
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div>a{color: brown;}</style>
</head>
<body><div><p><a href="#">我是超链接</a></p><a href="#">我是超链接2</a></div><a href="#">我是超链接3</a>
</body>
</html>并集选择器： ，
作用：同时选择多组标签，设置相同的样式
选择器语法：选择器1 ，选择器2{ css }
结果：找到 选择器1和选择器2选中的标签，设置样式
注意点：
1.并集选择器中的每组选择器之间通过分隔
2.并集选择器中的每组选择器可以是基础选择器或者复合选择器
3.并集选择器中的每组选择器通常一行写一个，提高代码的可读性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p,div,span,a{font-family: 楷体;color: rgb(255, 0, 0);}</style>
</head>
<body><p>我是p标签</p><div>我是div标签</div><span>我是span标签</span><br><a href="#">我是超链接</a><h1>现在需要把上面的四个改色和字体</h1>
</body>
</html>交集选择器：紧挨着
作用：选择器1 . 选择器2{css}
结果：（既又原则）找到页面中既能被选择器1选中又能被选择器2选中的标签，设置样式
注意点：
1.交集选择器中的选择器之间是紧挨着的，没有东西分隔
2.交集选择器中如果有标签选择器，标签选择器必须写在最前面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div.class{color: brown;}</style>
</head>
<body><p>This is a p </p><div class="class">这里有一个div标签</div><p class="class">这里是一个p标签</p>
</body>
</html>hover伪类选择器
作用：选中鼠标悬停在元素上的状态，设置样式
选择器语法：选择器 ：hover{ css }
注意点：伪类选择器选中的元素的某种状态
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div:hover{color: green;}a:hover{color: brown;}p:hover{color: rgb(99, 30, 210);}</style>
</head>
<body><p>鼠标悬停时 文字显示为绿色</p><div>上面是一个p标签</div><a href="#">超链接</a>
</body>
</html>emment语法
作用：通过简单语法，快速生成代码
语法：类似于刚刚学的选择器的写法
| 记忆 | 示例 | 效果 |
| 标签名 | div | <div> <div> |
| 类选择器 | .red | <div class=" red "> <div> |
| id选择器 | #one | <div id="one"> <div> |
| 交集选择器 | p.red#one | <p class="red" id="one"> <p> |
| 子代选择器 | ul>li | <ul><li> </li></ul> |
| 内部文本 | ul>li(我是li的内容) | <ul><li>我是li的内容</li></ul> |
| 创建多个 | ul>li*3 | <ul><li> </li><li> </li><li> </li><ul> |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- p.box --><p class="box"></p><!-- p.red#one --><p class="red" id="one"></p><!-- 同级的div和p ： div+p --><p></p><div></div><!-- 父子：> --><div><p></p></div><!-- ul>li*3 --><ul><li></li><li></li><li></li></ul><!-- ul>li*3{$} --><ul><li>1</li><li>2</li><li>3</li></ul><!-- ul>li{1111}*3 --><ul><li>1111</li><li>1111</li><li>1111</li></ul>
</body>
</html>背景相关属性
背景颜色
属性名：background-color（bgc）
属性值：颜色取值：关键字 rgb表示法 rgba表示法 十六进制...
注意点：背景颜色默认值使透明：rgba（0，0，0，0） transparent
背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布居中会习惯给盒子设置背景颜色
背景图片：
属性名：background-image（bgi）
属性值：
background-image：url（'图片的路径'）；注意点:
背景图中url中可以省略引号
背景图片默认仅仅是在水平和垂直方向上平铺的
背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不是能撑开盒子的
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 300px;background-color: pink;background-image: url(./beauty.jpg);}</style>
</head>
<body><div>整个背景吧</div>
</body>
</html>背景平铺
属性名：background-repeat（bgr）
属性值：
| 取值 | 效果 |
| repeat | （默认）水平和垂直方向都平铺 |
| no-repeat | 不平铺 |
| repeat-x | 沿着水平方（x轴）平铺 |
| repeat-y | 沿着垂直方向（y轴）平铺 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 300px;background-color: red;background-image: url(./beauty.jpg);background-repeat: no-repeat;/* background-repeat: repeat-x; *//* background-repeat: repeat-y; *//* background-repeat: repeat; */}</style>
</head>
<body><div>load</div>
</body>
</html>背景位置
属性名：background-position（bgp）
属性值：
background-position：水平方向位置 垂直方向位置;
注意点：方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 1900px;height: 1600px;background-color: white;background-repeat:no-repeat ;background-image: url(./bird.jpg); /* background-position: center center; *//* background-position: right bottom; *//* background-position: left top; *//* background-position: center; */background-position: -50px 60px; }</style>
</head>
<body><div>这是背景位置</div>
</body>
</html>背景相关属性的连写形式
属性名：background（bg）
属性值：单个属性的合写，取值之间用空格隔开
书写顺序：
推荐：background：color image repeat position
省略问题：
*可以按需求省略
*特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background：url（）
注意点：
*如果需要设置单独的样式和连写 ，要么把单独的样式写在连写的下面 ，要么把单独的样式写在连写的里面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 2000px;height: 1900px;/* background: pink url(./bird.jpg) no-repeat bottom center; *//* background: pink url(./bird.jpg) no-repeat center bottom; *//* background: pink url(./bird.jpg) no-repeat center bottom; */background: pink url(./bird.jpg) no-repeat 50px 100px;/* 背景图如果是英文单词可以颠倒顺序 *//* 测试背景图位置如果是数值 不要颠倒顺序 */}</style>
</head>
<body><div></div>
</body>
</html>img标签和背景图片的区别
需求：需要在网页中展示一张图的效果？
法一：直接写上img标签即可
法二：div标签+背景图片
*需要设置div的宽高，因为背景图片只是装饰css样式，不能撑开div标签
元素单独显示模式
块级元素
显示特点：
1.独占一行（一行只能显示一个）
2.宽度默认是父元素的宽度，高度默认由内容撑开
3.可以设置宽高
代表标签：
div p h系列、ul 、li、dl、dd、form、header、nav、footer...
行内元素
显示特点：
1.一行可以显示多个
2.宽度和高度默认由内容撑开
3.不可以设置宽高
代表标签：
a、span、b、u、i、s、strong、ins、em、del...
行内块元素
显示特点：
1.一行可以显示多个
2.可以设置宽高
代表标签：
input、textarea、button、select...
特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
元素显示模式转换
目的：改变元素默认的显示特点，让元素符合布局要求
语法：
| 属性 | 效果 | 使用频率 |
| display：block | 转换成块元素 | 较多 |
| display：inline-block | 转换成行内块元素 | 较多 |
| display：inline | 转换成行内元素 | 极少 |
拓展1：HTML嵌套规范注意点：
1.块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等...
但是：p标签中不要求嵌套div、p、h等块级元素
1.a标签内部可以嵌套任意元素
但是：a标签不能嵌套a标签
CSS特性：
1.继承性：
特性：子类元素默认继承父类元素样式的特点(子承父业)
可以继承的常见属性（文字控制属性都可以继承）
1.color
2.font-weight、font-style、font-size、font-family
3.text-indent、text-align
4.line-height
5.。。。
注意点：可以通过调试工具判断样式是否可以继承
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{color: blueviolet;font-family: 楷体;}div p a {color:black;}</style>
</head>
<body><div><p><a href="#">超链接</a></p><span>span </span><br><a href="#">a </a><h1>一级标题</h1></div>
</body>
</html>（拓展）继承失效的特殊情况
如果元素有浏览器默认样式，此时继承性依然存在，但是如果子类本身就有的属性 ，就不会继续继承
1.a标签的color会继承失效
2.h系类标签的font-sizde会继承失效
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 控制文字的属性都能继承，不是控制文字的不能继承 *//*css上一行出错会影响下一行*/div{color: red;font: size 30px;;height: 300px;}</style>
</head>
<body><div>这是div标签<span>这是div里面的span</span></div>
</body>
</html>继承的例子
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 都是继承，继承里面谁高，看继承哪个父级，哪个父级高，哪个选择器生效 */div p{color: red;}.father{color: blue;}</style>
</head>
<body><div class="father"><p class="son"><span>文字</span></p></div>
</body>
</html>2.层叠性：
特性：
1.给同一个标签设置不同的样式→ 此时样式会层叠叠加 →会共同作用在标签上
2.给同一个标签设置相同的样式→ 此时样式会层叠覆盖 →最终写在最后的样式会生效
注意点：当样式冲突时，只有选择器优先级相同时，才能通过层叠性判断结果
3.1优先级的介绍：
特性：不同的选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式
优先级公式：
继承<通配符选择器<标签选择器<类选择器<id选择器<行内式<！important
注意点：
1.！important写在属性值的后面，分号的前面！
2.！important不能提升继承的优先级，只要是继承优先级最低！
3.实际开发中不建议使用！important。
3.2权重叠加计算
测试优先级例子：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box{color: aqua;}.box{color: blue;}div{color: chartreuse!important;}body{color: red;}</style>
</head>
<body><div class="box" id="box" style="color:blueviolet;">测试优先级</div>
</body>
</html>Chrome调试工具
相关文章：
灯塔：CSS笔记（2）
一 选择器进阶 后代选择器：空格 作用：根据HTML标签的嵌套关系，，选择父元素 后代中满足条件的元素 选择器语法：选择器1 选择器2{ css } 结果： *在选择器1所找到标签的后代（儿子 孙子 重孙子…...
基于Springboot的志愿服务管理系统（有报告）。Javaee项目，springboot项目。
演示视频： 基于Springboot的志愿服务管理系统（有报告）。Javaee项目，springboot项目。 项目介绍： 采用M（model）V（view）C（controller）三层体系结构…...
保姆级讲解 Stable Diffusion
目录 本文讲解思路介绍 一、引入 二、Diffusion Model 三、原文的摘要和简介 四、Stable Diffusion 4.1、组成模块 4.2、感知压缩 4.3、条件控制 五、图解 Stable Diffusion 5.1、潜在空间的扩散 5.2、条件控制 5.3、采样 5.4、Diffusion Model 与 Stable Diffusion …...
HTML二识
图片，音频，视频标签 标签描述<img>定义图片<audio>定义音频<video>定义视频 定义图片： src：规定显示图片的URL（统一资源定位符）height：定义图像的高度 单位：px…...
[BUUCTF]-PWN:starctf_2019_babyshell解析（汇编\x00开头绕过+shellcode）
查看保护 查看ida 这里就是要输入shellcode，但是函数会有检测。 在shellcode前面构造一个以\x00机器码开头的汇编指令，这样就可以绕过函数检查了。 完整exp： from pwn import* context(log_leveldebug,archamd64) pprocess(./babyshell)she…...
uniapp 手写 简易 时间轴 组件
一、案例如图 该案例设计条件： 左侧时间 和竖线、点、内容都是居中对其的，上下时间点中间要有一段距离 二、编写逻辑 1. 布局结构：一共三个元素，左侧是时间和黑点，中间是线条，右侧是内容 2. 样式难点&#…...
实现HttpServletRequest下多次获取流数据
HttpServletRequest下多次获取流数据 背景示例错误的尝试全局替换执行顺序 背景 众所周知request的输入流只能读取一次，不能重复读取。而在HttpServletRequest中，获取请求体数据的流（通过getInputStream()方法）默认只能被读取一…...
uviewplus在uniapp中的配置使用
版本: "uview-plus": "^3.1.45"在page.json中配置: "easycom": {"autoscan": true,"custom": {"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue","^up-(.*)": "uview-plus/componen…...
C++11 新特性之future和packaged_task
C11 新特性之future #include <iostream> #include <thread> #include <future> #include <chrono>void test(std::promise<int>& probj){std::this_thread::sleep_for(std::chrono::seconds(5));probj.set_value(20); }int main(){std::pr…...
Flutter APP下载更新
由于我做的项目不是放在APP商店（公司内部用）的，一些flutter的第三方库不合适我，我需要用的是从网上下载再安装（从服务下），网上也找了花了我好几天时间。不全又乱，这我自己做一下备份…...
Pinctrl子系统_04_Pinctrl子系统主要数据结构
引言 本节说明Pinctrl子系统中主要的数据结构，对这些数据结构有所了解，也就是对Pinctrl子系统有所了解了。 前面说过，要使用Pinctrl子系统，就需要去配置设备树。 以内核面向对象的思想，设备树可以分为两部分&#x…...
设计模式(十)：抽象工厂模式（创建型模式）
Abstract Factory，抽象工厂：提供一个创建一系列相关或相互依赖对 象的接口，而无须指定它们的具体类。 之前写过简单工厂和工厂方法模式(创建型模式)，这两种模式比较简单。 简单工厂模式其实不符合开闭原则，即对修改关闭…...
计算机网络概论01
计算机系统基础知识 基本组成 计算机系统由硬件和软件组成。 硬件由五大部分，他们分别是： 运算器 执行算数运算和逻辑运算控制器 控制cpu的工作，决定了计算机运行过程的自动化。包括指令控制逻辑、时序控制逻辑、总线控制逻辑和中断控制逻辑…...
新零售SaaS架构：订单履约系统架构设计（万字图文总结）
什么是订单履约系统？ 订单履约系统用来管理从接收客户订单到将商品送达客户手中的全过程。 它连接了上游交易（客户在销售平台下单环）和下游仓储配送（如库存管理、物流配送），确保信息流顺畅、操作协同&…...
Hive SQL 开发指南（三）优化及常见异常
在大数据领域，Hive SQL 是一种常用的查询语言，用于在 Hadoop上进行数据分析和处理。为了确保代码的可读性、维护性和性能，制定一套规范化的 Hive SQL 开发规范至关重要。本文将介绍 Hive SQL 的基础知识，并提供一些规范化的开发指…...
Spring Boot 自动装配的原理！！！
SpringBootApplication SpringBootConfiguration：标识启动类是一个IOC容器的配置类 EnableAutoConfiguration： AutoConfigurationPackage：扫描启动类所在包及子包中所有的组件，生…...
Linux运维_Bash脚本_编译安装Wayland-1.22.0
Linux运维_Bash脚本_编译安装Wayland-1.22.0 Bash (Bourne Again Shell) 是一个解释器，负责处理 Unix 系统命令行上的命令。它是由 Brian Fox 编写的免费软件，并于 1989 年发布的免费软件，作为 Sh (Bourne Shell) 的替代品。 您可以在 Linu…...
Python数字类型
文章目录 Python数字类型1. 数字类型1.1 数字类型概述1.2 整数类型1.3 浮点数类型1.4 复数 2. 数字类型的操作2.1 内置的数值运算操作符2.2 内置的数值运算函数2.3 内置的数字类型转换函数 思考与练习 Python数字类型 1. 数字类型 1.1 数字类型概述 数字是自然界计数活动的抽…...
每天一个数据分析题（一百九十六）
在多元线性回归模型的自变量选择方法中，关于向后回归法和逐步回归法的描述，以下哪些是正确的？ A. 向后回归法开始时包含所有自变量，并逐步剔除每个不显著的变量。 B. 逐步回归法结合了向前回归法和向后回归法，可以在…...
华为北向网管NCE开发教程（1）闭坑选接口协议
华为北向网管NCE开发教程（1）闭坑选接口协议 华为北向网管NCE开发教程（2）REST接口开发 华为北向网管NCE开发教程（3）CORBA协议开发 本文一是记录自己开发华为北向网管遇到的坑，二是给需要的人&…...
业务系统对接大模型的基础方案：架构设计与关键步骤
业务系统对接大模型：架构设计与关键步骤 在当今数字化转型的浪潮中，大语言模型（LLM）已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中，不仅可以优化用户体验，还能为业务决策提供…...
python打卡day49
知识点回顾： 通道注意力模块复习空间注意力模块CBAM的定义 作业：尝试对今天的模型检查参数数目，并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...
React Native 导航系统实战（React Navigation）
导航系统实战（React Navigation） React Navigation 是 React Native 应用中最常用的导航库之一，它提供了多种导航模式，如堆栈导航（Stack Navigator）、标签导航（Tab Navigator）和抽屉…...
WordPress插件：AI多语言写作与智能配图、免费AI模型、SEO文章生成
厌倦手动写WordPress文章？AI自动生成，效率提升10倍！ 支持多语言、自动配图、定时发布，让内容创作更轻松！ AI内容生成 → 不想每天写文章？AI一键生成高质量内容！多语言支持 → 跨境电商必备&am…...
C++.OpenGL （10/64）基础光照（Basic Lighting）
基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...
springboot整合VUE之在线教育管理系统简介
可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生，小白用户，想学习知识的 有点基础，想要通过项…...
Netty从入门到进阶（二）
二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架，用于…...
淘宝扭蛋机小程序系统开发：打造互动性强的购物平台
淘宝扭蛋机小程序系统的开发，旨在打造一个互动性强的购物平台，让用户在购物的同时，能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机，实现旋转、抽拉等动作，增…...
根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要
根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分： 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...
前端中slice和splic的区别
1. slice slice 用于从数组中提取一部分元素，返回一个新的数组。 特点： 不修改原数组：slice 不会改变原数组，而是返回一个新的数组。提取数组的部分：slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...