CSS3 transform探究

xiaoxiao2021-03-01  6

今天在使用这个样式属性的时候,发现了一些小问题,值得记录一下。

一、transform属性的适用范围

这是规范文档上写的,第一条说的就是:这个布局属性只用于块级元素或原子行内元素,或者display属性值为table-row, table-row-group, table-header-group, table-footer-group, table-cell, table-caption的元素。

比如使用span元素,使用transform属性就无效。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>rotate</title> <style> .rotate { transform: rotate(90deg); } </style> </head> <body> <span class="rotate">测试</span> </body> </html>

运行上面的代码,会发现span元素未被旋转,但是将span转为block或者inline-block,则可以实现旋转

二、translate不会脱离文档流

使用translate和relative一样,不会脱离文档流。ps:translate配合absolute定位可以实现居中

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <span style="display: inline-block;transform: translate(10px,0px)">ceshi</span><span>hahah</span> </body> </html>

运行之后会发现,后面的haha并没顶上来,移动的位置会留白。如图所示

 

转载请注明原文地址: https://www.6miu.com/read-3350254.html

最新回复(0)