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

inline的盒子设置transform不生效

目录

    • 如何遇到的问题
    • 原因
    • 为什么会这样
    • 怎么解决

如何遇到的问题

最近在开发过程中,因为需要对一个icon进行旋转,而icon本身,是设置span的伪类来进行的,结果我发现无论怎么设置transform都无法使其生效。

  span::before {font-family: element-icons !important;content: "\e6c9";transform: rotate(180deg);}

原因

经过我的测试和网上找到的原因,它们相互印证这样一个结论:inline的盒子设置transform不生效。

为什么会这样

inline元素被视为一行中的文本片段,其大小由内容决定,并且不允许通过transform属性来改变其尺寸、位置或旋转。transform属性通常用于块级元素或行内块级元素,因为这些元素有明确定义的宽度和高度,可以进行变换操作。

怎么解决

要解决这个问题,可以将元素的display属性更改为inline-block或block。这样做后,transform属性就会生效。

  span::before {font-family: element-icons !important;content: "\e6c9";transform: rotate(180deg);display: inline-block;}

如果你仍然希望元素保持display: inline,但仍然需要应用变换效果,可以考虑将元素包裹在一个块级元素中,然后在该块级元素上应用transform属性。

<div class="outer-wrapper"><span class="inline-box"></span>
</div>
  .outer-wrapper {transform: rotate(180deg);}.inline-box::before {font-family: element-icons !important;content: "\e6c9";}

相关文章:

inline的盒子设置transform不生效

目录 如何遇到的问题原因为什么会这样怎么解决 如何遇到的问题 最近在开发过程中&#xff0c;因为需要对一个icon进行旋转&#xff0c;而icon本身&#xff0c;是设置span的伪类来进行的&#xff0c;结果我发现无论怎么设置transform都无法使其生效。 span::before {font-famil…...

自然语言处理学习笔记(四)————词典分词

目录 1.中文分词 2.词典分词 &#xff08;1&#xff09;词的定义 &#xff08;2&#xff09;词典性质——齐夫定律 &#xff08;3&#xff09;词典 &#xff08;4&#xff09;加载词典 &#xff08;5&#xff09;hanlp词典路径 1.中文分词 中文分词&#xff1a;指的是将一…...

jsoncpp库和nlohmann-json库实现JSON与字符串类型转换

在ROS中&#xff0c;可以使用jsoncpp库来实现JSON与字符串类型之间的转换。jsoncpp是ROS自带的一个JSON库&#xff0c;它提供了一些函数来解析和生成JSON数据。 下面是一个使用jsoncpp库实现JSON与字符串类型转换的示例代码&#xff1a; #include <ros/ros.h> #include…...

20230803 函数传参引用

定义多输出变量的函数时&#xff0c;通过直接传参数内存地址在函数内部直接修改外部变量的值。需要定义函数时 在输入参数前加 引用符号 & 。 C 值传递、指针传递、引用传递详解...

IDEA SpringBoot项目引入外部jar并打包

1、首先&#xff0c;我们再pom.xml中导入依赖包时&#xff0c;打包可以正常进行。 但如果我们引入了第三方的外部jar包&#xff08;这里需要先把jar包添加到该项目依赖库中&#xff0c;这里不做演示&#xff09;&#xff0c;如图 2、导致打包时报错&#xff0c;程序包不存在或…...

ModaHub魔搭社区——阿里云通义千问宣布开源!70亿参数模型上线魔搭社区,免费可商用

通义千问开源!8月3日,AI模型社区魔搭ModaHub上架两款开源模型Qwen-7B和Qwen-7B-Chat,阿里云确认其为通义千问70亿参数通用模型和对话模型,两款模型均开源、免费、可商用。在多个权威测评中,通义千问7B模型取得了远超国内外同等尺寸模型的效果,成为当下业界最强的中英文7B…...

Jenkins 自动化部署实例讲解,另附安装教程!

【2023】Jenkins入门与安装_jenkins最新版本_丶重明的博客-CSDN博客 也可以结合这个互补看 前言 你平常在做自己的项目时&#xff0c;是否有过部署项目太麻烦的想法&#xff1f;如果你是单体项目&#xff0c;可能没什么感触&#xff0c;但如果你是微服务项目&#xff0c;相…...

arcgis字段计算器

1、两字段叠加。要求待叠加的字段类型为文本或字符串类型。如下&#xff1a; 2、字符串部分提取。...

数据结构: 线性表(无哨兵位单链表实现)

文章目录 1. 线性表的链式表示: 链表1.1 顺序表的优缺点1.2 链表的概念1.3 链表的优缺点1.4 链表的结构 2. 单链表的定义2.1 单链表的结构体2.2 接口函数 3. 接口函数的实现3.1 动态申请一个结点 (BuySListNode)3.2 单链表打印 (SListPrint)3.3 单链表尾插 (SListPushBack)3.4 …...

Exploring the Underlying Architecture of CSS3

引言 在现代的网页设计中&#xff0c;CSS&#xff08;层叠样式表&#xff09;起着至关重要的作用。CSS3作为最新的CSS标准&#xff0c;引入了许多令人兴奋的功能和特性。但是&#xff0c;要真正理解CSS3的底层架构实现原理&#xff0c;对于前端开发者来说&#xff0c;是非常重…...

方差分析||判断数据是否符合正态分布

方差分析练习题 练习学习笔记&#xff1a; &#xff08;1&#xff09; 标准差和标准偏差、均方差是一个东西。标准误差和标准误是一个东西。这两个东西有区别。 &#xff08;2&#xff09;单因素方差分析&#xff08;MATLAB求解&#xff09; &#xff08;3&#xff09;使用an…...

java linq多字段排序时间比较

public static void main(String[] args) {//100万条数据List<CrmInvestSaleUserCount> waitAssignUserList new ArrayList<>();for (int i 0; i < 1000000; i) {waitAssignUserList.add(new CrmInvestSaleUserCount().setSales_username("test" i…...

【c++】rand()随机函数的应用(二)——舒尔特方格数字的生成

目录 一、舒尔特方格简介 二、如何生成舒尔特方格 &#xff08;一&#xff09;线性同余法 1、利用线性同余法生成随机数序列的规律 (1) 当a和c选取合适的数时&#xff0c;可以生成周期为m的随机数序列 (2) 种子seed取值也是有周期的 2、利用线性同余法生成5阶舒尔特方格…...

“深入剖析JVM内部机制:探索Java虚拟机的运行原理“

标题&#xff1a;深入剖析JVM内部机制&#xff1a;探索Java虚拟机的运行原理 摘要&#xff1a;本文将深入探讨Java虚拟机&#xff08;JVM&#xff09;的内部机制&#xff0c;包括类加载、内存管理、垃圾回收、即时编译等关键概念和原理&#xff0c;帮助开发者更好地理解JVM的运…...

pandas 新增数据列的几种方式

准备数据 将下面的数据存到csv中 ymd,bWendu,yWendu,tianqi,fengxiang,fengli,aqi,aqiInfo,aqiLevel 2018-01-01,3℃,-6℃,晴~多云,东北风,1-2级,59,良,2 2018-01-02,2℃,-5℃,阴~多云,东北风,1-2级,49,优,1 2018-01-03,2℃,-5℃,多云,北风,1-2级,28,优,1 2018-01-04,0℃,-8℃…...

linux_驱动_iic总线获取si7006温湿度

应用层si7006.c #include<stdio.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <unistd.h> #include <stdlib.h> #include <string.h> #include <sys/ioctl.h> #include <arpa/inet.h>…...

虚拟机网络图标不见了

有3台虚拟机之前正常运行的&#xff0c;有一天打开虚拟机发现2台虚拟机的网络连接图标不见了&#xff0c;也ping不通另外两台。 解决&#xff1a;在终端执行以下命令&#xff0c;即可ping通 [roothadoop103 ~]# sudo nmcli network off [roothadoop103 ~]# sudo nmcli network…...

CTF:信息泄露.(CTFHub靶场环境)

CTF&#xff1a;信息泄露.&#xff08;CTFHub靶场环境&#xff09; “ 信息泄露 ” 是指网站无意间向用户泄露敏感信息&#xff0c;泄露了有关于其他用户的数据&#xff0c;例如&#xff1a;另一个用户名的财务信息&#xff0c;敏感的商业 或 商业数据 &#xff0c;还有一些有…...

Redis学习总结

Redis学习总结 文章目录 Redis学习总结Radis基本介绍docker的安装基本数据结构通用命令字符型key的层次结构Hash类型Listset sortedset集合redis的java客户端jedis的使用jedis连接池的配置 SpringDataRedis自定义redistemplate的序列化与反序列化方式stringtemplate的使用 redi…...

云原生全栈体系(二)

Kubernetes实战入门 第一章 Kubernetes基础概念 一、是什么 我们急需一个大规模容器编排系统kubernetes具有以下特性&#xff1a; 服务发现和负载均衡 Kubernetes 可以使用 DNS 名称或自己的 IP 地址公开容器&#xff0c;如果进入容器的流量很大&#xff0c;Kubernetes 可以负…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

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))…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...