scale使用记错

先看以下代码

 1 <body>
 2     <style>
 3         .show {
 4             text-align: center;
 5             transition: all 1s ease-out;
 6         }
 7         .show:hover {
 8             transform: scale(2);
 9         }
10         .show1 {
11             background-color: crimson;
12     </style>
13     <div>
14         <p class="show show1">我是块级元素</p>
15     </div>
16 </body>

体验到p元素缩放的神奇之处之后，我又做了以下尝试

<body>
    <style>
        .show {
            text-align: center;
            transition: all 1s ease-out;
        }
        .show:hover {
            transform: scale(2);
        }
        .show2 {
            background-color: deepskyblue;
        }
    </style>
    <div>
        <span class="show show2">我是行内元素</span>
    </div>
</body>

发现怎么都不缩放呢？发现原来是由于行内元素不能设置宽高，因此也就无法缩放了，因此做了如下设置

<body>
    <style>
        .show {
            text-align: center;
            transition: all 1s ease-out;
        }
        .show:hover {
            transform: scale(2);
        }
        .show3 {
            background-color: lawngreen;
            display: block;
        }
    </style>
    <div>
        <span class="show show3">我是块级元素</span>
    </div>
</body>

成功缩放！另外还有inline-block也是可以进行缩放

<body>
    <style>
        .show {
            text-align: center;
            transition: all 1s ease-out;
        }
        .show:hover {
            transform: scale(2);
        }
        .show4 {
            background-color: lightsalmon;
            display: inline-block;
        }
    </style>
    <div>
        <span class="show show4">我是行级-块级元素</span>
    </div>
</body>

可以尝试一下display: flex;

posted @ 2020-04-08 22:53  不解风情的帅帅男  阅读(208)  评论(0)    收藏  举报