今天在使用这个样式属性的时候,发现了一些小问题,值得记录一下。
这是规范文档上写的,第一条说的就是:这个布局属性只用于块级元素或原子行内元素,或者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和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并没顶上来,移动的位置会留白。如图所示