CSS3的新盒子,选择器等

新增的选择器:

属性选择器:

结构伪类选择选器:

nth较为重要:但公式中的字母必须是n

区别:

nth-child:

认为父类下的都是儿子,此时就需要有对应的需要,如下,此时即使排1,但是1是p而选择器是div使得结果不能够将结果表达,就不会生效为红色。

nth-of-type:

会指定排序,即他是先看的标签元素,在执行后面的。

伪元素选择器:

伪元素也是相当于盒子的。也是拥有很多属性的,但是一定要有conten:属性才可以有效果

文档树,指的是,在网页检索时,看不到,只在代码层才有。

element时父类盒子

伪元素选择器的使用情景:

作为字体图标:

实质是,将字体图标放进去而已。


视频底层的播放界面的变阴黑的效果的盒子替代:

显示伪类的格式。


清除浮动效果:

单清:

双清:


CSS3新增的盒子模型计算方式:

以前是内容不会变化,但是由于边框的改变使得盒子的大小有所改变。

即标准盒子模型,和IE盒子模型:

CSS3的其他特性:

将图片等实现模糊(虚化)的效果等(CSS3filter滤镜):

是作为一个CSS的修饰属性来进行的。

计算盒子宽度的calc函数:

100%指是父类的100-30px像素。特点在于子类可以依据父类的变化而实现对应效果的变化。

CSS3属性之过渡:

即:不通过js交互就可以实现互动的效果

使用格式:

曲线和开始可以省略:进行为默认的格式。

这时:当鼠标经过的时候就会,慢慢变化为宽度就会变400px

但是如果需要对盒子进行多种同时的变化效果,则需要在同一个transition中进行书写,需要使用,来将多个变化隔开。

这里的all指的是对应 悬停效果中的那个。


进度条的使用: 将内盒子变为过度性。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/364339.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何从零开始开发一个PS5浏览器 | How to develop a PS5 browser

环境:Windows PS5一台 问题:PS5折腾需要使用PKG浏览器访问特定网址,如何自定义网址呢? 解决办法:使用开发套件PS Multi Tools开发一个空应用,利于deeplinkUri 参数访问网页 背景:PS5折腾后&…

【IMAX6U移植OpenCV】

IMAX6U移植OpenCV V1.3 一 安装通用交叉编译器1.1 下载通用交叉编译器1.2 安装通用交叉编译器1.3 验证通用交叉编译器 二 搭建 OpenCV 3.4.1 的编译环境2.1 下载 OpenCV 3.4.1 源码2.2 配置 OpenCV 环境2.3 编译 OpenCV 源码 三 Qt 项目中加入OpenCV3.1 Qt 项目的 pro 文件Open…

uniapp 使用 uni-file-picker 上传头像

此处使用 select 处理选择完文件后的逻辑&#xff0c;即将文件上传到自己的服务器。 <uni-file-picker limit"1" :del-icon"false" disable-preview :imageStyles"imageStyles"file-mediatype"image" select"upload"&g…

Debug Eigen

(参考https://eigen.tuxfamily.org/index.php?titleDeveloper%27s_Corner#Debugging_under_Visual_Studio&#xff09; 假如我们直接想要检查Eigen中的VectorXf的值&#xff0c;我们会发现无法看到内部的值&#xff0c;如图 只需要下载eigen.natvis这个文件&#xff0c; &…

【Pytorch】CNN中的Attention

目录 更大层面上的Attention在attention中&#xff0c;怎么分区channel-wise还是spatial-wise举一个Spatial-Channel Attention的例子 使用广泛的Dot-product Attentionattention机制中的query,key,value的概念解释Attention的一个例子 更大层面上的Attention 在attention中&a…

GitHub的使用操作

记得看目录哦&#xff01; 1. 创建仓库2. 下载desktop3. 把创建的库克隆到本地4. 文件拷贝到本地仓库![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/7171ac6c4ca14e3b8d22717121f79c9e.png)5. 在网址后面加/compare进行比较6. 给系统添加功能 1. 创建仓库 2. 下载…

proxmox集群从7.4升级到最新的8.1

关于proxmox&#xff0c;给Zstack的公开建议 十一放假折腾服务器札记 proxmox​​​​​​​专栏上面第一篇文写的时间还是22年6月底&#xff0c;用proxmox搭建的3机集群在合肥光源束测系统后台在线工作快两年了&#xff0c;在没有UPS保护的情况下&#xff0c;经历了实验室的…

CHS_08.2.3.6_1+生产者-消费者问题

CHS_08.2.3.6_1生产者-消费者问题 问题描述问题分析思考&#xff1a;能否改变相邻P、V操作的顺序&#xff1f;知识回顾 在这个小节中 我们会学习一个经典的进程同步互斥的问题 问题描述 并且尝试用上个小节学习的p v操作 也就是信号量机制来解决这个生产者消费者问题 问题的描…

【实战系列----消息队列 数据缓存】rabbitmq 消息队列 搭建和应用

线上运行图&#xff0c;更新不算最新版&#xff0c;但可以使用修改线程等补丁功能&#xff0c;建议使用新版本。 远程服务器配置图: 这个可以更具体情况&#xff0c;因为是缓存队列理所当然 内存越大越好&#xff0c;至于核心4核以上足够使用。4核心一样跑 这里主要是需要配置服…

麒麟系统—— openKylin 安装 Nginx

麒麟系统—— openKylin 安装 Nginx 一、准备工作1. 确保麒麟系统 openKylin 已经安装完毕。 二、下载 nginx三、解压与运行解压检查与编译安装编译运行 四、配置加入到服务中加入环境变量nginx 配置文件 五、常用命令 Nginx 是一款高性能的 HTTP 和反向代理服务器&#xff0c…

Android super.img解包和打包指南(含工具下载lpunpack、lpmake、lpdump)

本文所有命令均需要在linux 上执行 一、解包 1、将Android sparse image格式的super.img转成二进制文件 $ sudo apt install android-sdk-libsparse-utils $ simg2img super.img super.img.bin 2、下载工具lpunpack 和lpmake、lpdump 以及其依赖库 下载地址:https://downl…

C语言实现12种排序算法

1.冒泡排序 思路&#xff1a;比较相邻的两个数字&#xff0c;如果前一个数字大&#xff0c;那么就交换两个数字&#xff0c;直到有序。 时间复杂度&#xff1a;O(n^2)&#xff0c;稳定性&#xff1a;这是一种稳定的算法。 代码实现&#xff1a; void bubble_sort(int arr[],…

在Debian11安装Proxmox VE 7及设置GPU工作环境

我们在测试大模型&#xff0c;深度学习的过程中&#xff0c;可能遇到的情况就是不断的清空系统&#xff0c;避免老系统中安装的软件对测试系统造成影响&#xff0c;导致测试结果不准确或莫名报错。今天为小伙伴们介绍使用PVE7做成一个人工智能开发和测试的平台&#xff0c;你可…

Day40 0-1背包问题

0-1背包问题 小明是一位科学家&#xff0c;他需要参加一场重要的国际科学大会&#xff0c;以展示自己的最新研究成果。他需要带一些研究材料&#xff0c;但是他的行李箱空间有限。这些研究材料包括实验设备、文献资料和实验样本等等&#xff0c;它们各自占据不同的空间&#x…

户外没有电源和网络,但需要安装监控系统,怎么办?太阳能智能监控系统给你解决

近期有粉丝给小编求助&#xff1a;需要在没网没电的户外进行智能监控的安装&#xff0c;不知道如何解决。收到粉丝的问题&#xff0c;小编立刻联系了技术人员给出方案。针对野外、户外等场景只需使用太阳能供电模组4G摄像机视频监控EasyCVR平台智能分析网关V4的架构&#xff0c…

【2023地理设计组一等奖】基于机器学习的地下水仿真与时空分析

作品介绍 1 设计思想 1.1 作品背景 华北平原是我国最重要的粮棉产地之一,然而近年来农业的低效用水以及过度压采正逐步加剧其地下水资源的紧张性,为经济可持续发展带来重大风险。而地下水动态变化与人为干预、全球气候波动呈现出高度相关性,因此,地下水的仿真模拟对保障粮…

网络编程套接字(2)

TCP 简单的TCP网络程序服务端创建套接字 服务端绑定服务端监听服务端接收连接测试服务端处理请求客户端创建套接字客户端连接服务器客户端连接服务器单执行流的服务器客户端为什么会显示连接成功&#xff1f; 多进程版的TCP网络程序让孙子进程提供服务 多线程版的TCP网络程序 简…

力扣之2629.复合函数(reduceRight )

/*** param {Function[]} functions* return {Function}*/ var compose function(functions) {return function(x) {return functions.reduceRight((result, func) > func(result), x);} };/*** const fn compose([x > x 1, x > 2 * x])* fn(4) // 9*/ 说明&#x…

Win10的蓝牙和其他设备没有蓝牙开关选项

一、问题背景 虽然蓝牙驱动并没有问题&#xff0c;但是Win10的蓝牙和其他设备却没有显示蓝牙开关的选项。这导致笔记本电脑无法使用蓝牙连接设备。如下图所示&#xff1a; 添加蓝牙或其他设备的标题下面本来应该有一个蓝牙开关&#xff0c;但是笔记本电脑却并没有显示这样的…

k8s安装dashboard报错CrashLoopBackOff

报错信息 使用kubectl get pods -A查看集群&#xff0c;出现错误&#xff1a; kubernetes-dashboard kubernetes-dashboard-xxxxxxxxxx6-2qrst 0/1 CrashLoopBackOff 6 15m查看日志后&#xff0c;发现原因&#xff1a; panic: Get "https://10…
最新文章