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.mzph.cn/news/661657.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Bugs】Jmeter报错:NoSuchMethodError: org.apache.jmeter.samplers.

报错情况 Jmeter版本:5.4.3 报错场景:在线程组中添加了jpgc - PerfMon Metrics Collector性能监控组件后出现报错。 Jmeter中无法运行测试,cmd命令行中出现以下报错。 cmd报错详细内容: Uncaught Exception java.lang.NoSuchMe…

废品上门回收小程序搭建全过程

随着人们对环境保护意识的不断增强,废品回收成为了一项重要的社会活动。为了方便废品回收的顾客和回收者之间的联系,废品上门回收小程序成为了一种流行的解决方案。然而,如何选择一款合适的废品上门回收小程序搭建平台呢?下面将为…

数据表的增删改查(上)

这一章的主角是数据表,但因为上篇文章还有一些数据库的知识没解决,因此先写了数据库。 选择数据库 在数据库创建后,不会将当前创建的数据库作为后续操作的默认数据库,如果需要在数据库中创建数据表并插入数据,需要先…

leetcode189.轮转数组|超简单易于理解方法

题目 https://leetcode.cn/problems/rotate-array/description/https://leetcode.cn/problems/rotate-array/description/ 给定一个整数数组 nums,将数组中的元素向右轮转 k 个位置,其中 k 是非负数。 示例 1: 输入: nums [1,2,3,4,5,6,7], k 3 输…

springboot完成一个线上图片存放地址+实现前后端上传图片+回显

1.路径 注意路径 2.代码:(那个imagePath没什么用,懒的删了),注意你的本地文件夹要有图片,才可以在线上地址中打开查看 package com.xxx.common.config;import org.springframework.beans.factory.annotat…

深信服技术认证“SCCA-C”划重点:深信服云计算关键技术

为帮助大家更加系统化地学习云计算知识,高效通过云计算工程师认证,深信服特推出“SCCA-C认证备考秘笈”,共十期内容。“考试重点”内容框架,帮助大家快速get重点知识。 划重点来啦 *点击图片放大展示 深信服云计算认证&#xff08…

mermaid使用指南+notion使用实例-持续更新中

最近一个月了吧,发现Notion插入图片的功能坏了,直接paste会404,本地上传也不行。电脑本地版和手机端都插不了图片,很头疼。解决方法也简单,用图床,放链接。 付费版我用的七牛,结合PicGo&#x…

Linux 路由配置与使用

概念 路由信息用于指导数据包从源地址查找到目的地址传输路径的信息; 路由分类 根据路由信息的来源分为静态路由和动态路由 静态路由 由管理员手动配置的路由表项信息,根据路由形式的不同,静态路由又可细分为: 直连路由&#xf…

LEETCODE 170. 交易逆序对的总数

class Solution { public:int reversePairs(vector<int>& record) {if(record.size()<1)return 0;//归并 递归int left,right;left0;rightrecord.size()-1;int nummergeSort(left,right,record);return num;}int mergeSort(int left,int right, vector<int>…

【Qt】Json在Qt中的使用

Json JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;广泛用于互联网应用程序之间的数据传输。JSON基于JavaScript中的对象语法&#xff0c;但它是独立于语言的&#xff0c;因此在许多编程语言中都有对JSON的解析和生成支持。…

STM32CubeIDE 使用标准库来编写程序

这些天我想找一个软件来实现软件的替代。就找到了st 的生态。可是现在st 生态都在极力的推荐HAL 库,但是习惯了标准库的朋友们,还不是很习惯。 先上总结一下,为了好记忆: 一、 在编译栏做如下设置 1、头文件设置 2、源文件设置 二、指定具体的预定义宏 1、USE_STDPERIPH_D…

数据结构-图的最小生成树

最小生成树介绍 最小生成树(Minimum Cost Spanning Tree)是代价最小的连通网的生成树&#xff0c;即该生成树上的边的权值和最小 最小生成树的性质&#xff1a; 必须使用且仅使用连通网中的n-1条边来联结网络中的n个顶点&#xff1b; 不能使用产生回路的边&#xff1b; 各…

Linux部署幻兽帕鲁服务器,PalWorld开服联机教程,保姆级教程

------另一个号申请积分-------- Linux系统搭建PalWorld私服&#xff0c;幻兽帕鲁开服联机教程&#xff0c;保姆级教程 最近这游戏挺火&#xff0c;很多人想跟朋友联机&#xff0c;如果有专用服务器&#xff0c;就不需要房主一直开着电脑&#xff0c;稳定性也好得多。 幻兽帕…

Kubernetes operator(五)api 和 apimachinery 篇

云原生学习路线导航页&#xff08;持续更新中&#xff09; 本文是 Kubernetes operator学习 系列第五篇&#xff0c;主要对 k8s.io/api 和 k8s.io/apimachinery 两个项目 进行学习基于 kubernetes v1.24.0 代码分析Kubernetes operator学习系列 快捷链接 Kubernetes operator&a…

大数据StarRocks(九):资源隔离实战

前言 自 2.2 版本起&#xff0c;StarRocks 支持资源组管理&#xff0c;集群可以通过设置资源组&#xff08;Resource Group&#xff09;的方式限制查询对资源的消耗&#xff0c;实现多租户之间的资源隔离与合理利用。在 2.3 版本中&#xff0c;StarRocks 支持限制大查询&#…

Android配置GitLab CI/CD持续集成,Shell版本的gitlab-runner,FastLane执行,上传蒲公英

mac环境下&#xff0c; 首选需要安装gitlab-runner和fastlane brew install gitlab-runner brew install fastlane 安装完成&#xff0c;来到我们在gitlab下新建的Android项目&#xff0c;我们开始创建gitlab-runner 1、创建runner 点开runner&#xff0c;点击新建runner …

自然语言nlp学习四

5-5 BMTrain--ZeRO_哔哩哔哩_bilibili 5-6 BMTrain--Pipeline Parallel (流水线并行)_哔哩哔哩_bilibili 5-12 BMCook--背景介绍_哔哩哔哩_bilibili 5-20 BMInf--背景介绍_哔哩哔哩_bilibili 6-7 机器问答--QA介绍_哔哩哔哩_bilibili 6-8 机器问答--阅读理解_哔哩哔哩_bilibili…

常用API1 ---Math

包含用于执行基本数学运算的方法&#xff0c;如初等指数、对数、平方根和三角函数。 常用方法&#xff1a; package MyApi.a01mathdemo01;public class MathDemo01 {public static void main(String[] args) {//abs 获取参数的绝对值System.out.println(Math.abs(-88));System…

江科大stm32学习笔记10——对射式红外传感器

一、接线 上电之后可以看到对射式红外传感器亮两个灯&#xff0c;如果此时用挡光片挡住两个黑色方块中间的部分&#xff0c;则只亮一个灯。 二、代码 将4-1的工程文件夹复制粘贴一份&#xff0c;重命名为“5-1 对射式红外传感器计次”&#xff0c;打开keil&#xff0c;右键添…

认识 SYN Flood 攻击

文章目录 1.什么是 SYN Flood 攻击&#xff1f;2.半连接与全连接队列3.如何防范 SYN Flood 攻击&#xff1f;参考文献 1.什么是 SYN Flood 攻击&#xff1f; SYN Flood 是互联网上最原始、最经典的 DDoS&#xff08;Distributed Denial of Service&#xff09;攻击之一。 SYN…