今天在使用这个样式属性的时候,发现了一些小问题,值得记录一下。
一、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,则可以实现旋转
二、rotate旋转不会导致margin跟着旋转
直观理解,旋转过后盒子模型的width、height、padding、border、margin等跟着旋转,但实际上margin方向不会改变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rotate</title>
<style>
.rotate {
transform: rotate(-90deg);
display: inline-block;
margin-left: -15px;
padding-left: 15px;
border-left: 1px solid #000;
background-color: aquamarine;
}
</style>
</head>
<body>
<div style="height: 10px"> </div>
<span class="rotate">测试</span>
</body>
</html>
举个例子来说明。在这里padding、width、height、border都随着盒子旋转而改变,而不显示margin属性却未旋转,还是按照视图的方向。
按照上面的样式,padding,border都进行了旋转,但是margin还是按照视图上的水平左方向缩进。
三、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并没顶上来,移动的位置会留白。如图所示