注:赶时间的同学可直接下拉到底,看结论。

我使用transform对一个元素进行位移,代码如下:

<div class="box">
<span>今天你吃了么?</span>
</div> // css
span {
transform: translateX(20px)
}

然而span标签并没有向右移动20px,这使我感到困惑。

但当我给span增加display: inline-block时,transform又表现正常了——span向右位移了20px

transform不支持行内元素么?

此时必须google一下啊,果不其然,早有前辈提出了相同的问题:css3-transform-not-working

其中一个回答引用了w3c关于transform的规范:

CSS Transforms Module Level 1 - Transformable Element

A transformable element is an element in one of these categories:

  • an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS2]
  • an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, patternTransform or gradientTransform [SVG11].

上面说到能够transform的元素有哪些。其中提到atomic inline-level element(原子行内级元素,嗯,翻译就是如此蹩脚),难不成span、a等行内元素不属于原子行内级元素?

原子行内级元素是什么

An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a 'display' value of 'inline' generates an inline box. Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box. (https://www.w3.org/TR/CSS2/visuren.html#x13)

上面这段话讲了两个盒子:inline box(行内盒子)和inline-level box(行内级盒子):

  • 行内盒子由一个display:inline的非替换元素生成。
  • 行内级盒子又叫做原子行内级盒子,它不是 行内盒子。因为它是透明的。

结论

因为,

display: block: 让一个元素生成一个block box

display: inline-block: 生成一个inline-level block container,元素本身被格式化为atomic inline-level box,它的内部被格式化为block box

display: inline: 让一个元素生成一个或多个inline boxes

而,可被transform的元素有:block-level elementoratomic inline-level elementetc,但不包括inline element.

#

为什么transform对行内元素不生效的更多相关文章

  1. css变换transform 以及 行内元素的一些说明

    变换transform的用法比较简单:[变换其实和普通的css属性,如color等没什么区别,可以为变换应用过渡或动画,就像其他普通css属性一样]#test { transform: transla ...

  2. css笔记12:块元素和行内元素

    1.概念: 行内元素:又叫内联元素,内联元素只能容纳文本或者其他内联元素,常见的内联元素有<span><a> 块元素:块元素一般都是从新行开始,可容纳文本,其他内联元素和其他块 ...

  3. 行内元素(inline标签)设置了行高为什么不生效,还是表现为父盒子的行高?行内元素行高问题终极解释

    最近在看张鑫旭大佬的<css世界>,读到5.2.4  内联元素 line-height 的“大值特性” ,产生了疑惑, 在开发中确实也遇到了同样的问题,深入探究后得出结果,先说结论吧,论证 ...

  4. CSS中的块级元素(block)与行内元素(inline)

    css中有3种基本的定位机制:普通流(相对定位实际上看做普通流定位模型的一部分)浮动(float)绝对定位(固定定位是绝对定位的一种)所以在学习浮动之前,我们先要了解块级元素与内联元素(行内元素).块 ...

  5. css块级元素和行内元素详细解析

    块级元素和行内元素是布局中常见的两种基本元素,但是未必有很多人深入的研究它们的细微差别. 常见块级元素:div  p  form ul ol li 等: 常见的行内元素:span stronh em; ...

  6. CSS--块级元素和行内元素

    相同:设置后,对应的模块都会脱离文档流 不同点:position相应的块级元素会覆盖下面的内容(文字,),而float只会覆盖块级元素,里面的文字会脱离 出来 float是浮动定位,position是 ...

  7. html:块级元素和行内元素的特点

    display:block: 块元素会独自占据一整行,或者多行,可以任意设置其大小尺寸,是用于搭建网页布局的必须部分,使网页结构更加紧凑合理. 块级元素width.height.padding.mar ...

  8. 04. H5标签有哪些?行内元素有哪些?块级元素有哪些?空(void)元素有哪些?行内元素和块级元素有什么区别?你工作中常用标签有什么?

    4. H5标签有哪些? 2)行内元素有哪些? a - 锚点 em - 强调 img - 图片 font - 字体设定 ( 不推荐 ) i - 斜体 input - 输入框 3)块级元素有哪些? add ...

  9. [转]CSS块级元素和行内元素

    原地址:http://www.studyofnet.com/news/398.html 本文导读:HTML中的元素可分为两种类型:块级元素和行级元素.这些元素的类型是通过文档类型定义(DTD)来指明. ...

随机推荐

  1. Java ClassLoad详解

    Java ClassLoad详解 类加载器是 Java 语言的一个创新,也是 Java 语言流行的重要原因之一.它使得 Java 类可以被动态加载到 Java 虚拟机中并执行.类加载器从 JDK 1. ...

  2. 使用Spring 简化MyBatis

    1.导入mybatis所有的jar 和 spring 基本包,spring-jdbc,spring-tx,spring-aop,spring整合mybatis的包等. 2.编写spring配置文件ap ...

  3. 762. Prime Number of Set Bits in Binary Representation

    static int wing=[]() { std::ios::sync_with_stdio(false); cin.tie(NULL); ; }(); class Solution { publ ...

  4. 2019.01.20 bzoj3784: 树上的路径(二分答案+点分治)

    传送门 点分治好题. 题意简述:给一棵带边权的树,问所有路径中前mmm大的.m≤300000m\le300000m≤300000 思路: 网上有题解写了可以通过什么点分治序转化成超级钢琴那道题的做法蒟 ...

  5. yii2 控制器渲染

    render() : 渲染一个 视图名并使用一个 布局返回到渲染结果. renderPartial() : 渲染一个 视图名并且不使用布局. renderAjax() : 渲染一个 视图名并且不使用布 ...

  6. windows下Oracle数据库完全删除

    1.1   停止所有oracle的服务 1.2   删除安装路径 app及其下所有文件 1.3   删除注册表 regedit 进入 在下列列表中找到与oracle相关的注册表项删除 1.HKEY_L ...

  7. elasticsearch中文发行版 安装

    参见: https://github.com/medcl/elasticsearch-rtf 具体步骤参见:ubuntu安装elasticsearch-rtf elasticsearch-head 安 ...

  8. IntellJ IDEA2017 springboot2.0.2中读取配置

    IDEA 路径 src\main\resources\application.properties 配置文件名称为 application.properties 默认的位置在classpath根目录下 ...

  9. ZOJ 3156 Taxi (二分 + 二分匹配)

    题意:给定 n 个人坐标, m 辆车的坐标,还有人的速度,要求每个人要进一辆不同的车,问你所有都进车的最短时间是多少. 析:首先二分时间 mid,很明显就是最后那个人进车的时间,然后如果把第 i 个人 ...

  10. HDU 1536 S-Nim (组合游戏+SG函数)

    题意:针对Nim博弈,给定上一个集合,然后下面有 m 个询问,每个询问有 x 堆石子 ,问你每次只能从某一个堆中取出 y 个石子,并且这个 y 必须属于给定的集合,问你先手胜还是负. 析:一个很简单的 ...