zoukankan      html  css  js  c++  java
  • CSS中zoom和scale的区别

    zoomscale这两个东西都是用于对元素的缩放,但两者除了兼容性之外还有一些不同的地方。zoom缩放会将元素保持在左上角,而scale默认是中间位置,可以通过transform-origin来设置。另外他们执行的渲染顺序也不同zoom可能影响到盒子的计算。
    运行<!DOCTYPE html>
    <style>
    div {
      width
    :300px;height:100px;
      border
    :1px solid #CCC;
      font-size
    :0px;
      line-height
    :100px;
      margin
    :10px;
    }
    span {
      display
    :inline-block;
      height
    :80px;width:200px;background:#F5F5F5;
      vertical-align
    :middle;
      overflow
    :hidden;
    }
    </style>
    <div>
      <span style="-webkit-transform:scale(0.5);"></span>
    </div>
    <div>
      <span style="
        -webkit-transform-origin:top left;
        -webkit-transform:scale(0.5);
      
    "></span>
    </div>
    <div>
      <span style="zoom:0.5;"></span>
    </div>

      第一个测试中只设置了scale,于是元素以自己的中心为基点做缩放。第二个测试中不仅设置了scale,还有origin来将缩放的基点设置到左上角,因此变化结束后元素呆在了左上角。虽然容器设置了和高度一样的行高,当它并没有在容器里居中,因为scale是先布局后变换的,变换不会对布局产生影响。最后一个测试是使用zoom,虽然Firefox上不支持,但这是个很古老的特性了。它和第二个测试的区别是它先缩放,后计算布局。所以在例子中它得到了垂直居中效果。

  • 相关阅读:
    从零开始入门 K8s | 应用编排与管理
    209. Minimum Size Subarray Sum
    208. Implement Trie (Prefix Tree)
    207. Course Schedule
    203. Remove Linked List Elements
    183. Customers Who Never Order
    182. Duplicate Emails
    181. Employees Earning More Than Their Managers
    1261. Find Elements in a Contaminated Binary Tree
    1260. Shift 2D Grid
  • 原文地址:https://www.cnblogs.com/axl234/p/3898819.html
Copyright © 2011-2022 走看看