The usage and difference of the zoom and scale attributes in CSS

This article mainly introduces the use and difference of the zoom attribute and the scale attribute in CSS, is the basic knowledge of the CSS primer learning, the need for friends can refer to the following

Zoom Property
Grammar:
Zoom:normal | <number> | <percentage>
Default value: Normal
Applies to: all elements
Inheritance: There are
Value:
Normal
Use the actual size of the object.
<number>:
Use floating-point numbers to define the scale. Negative values are not allowed
<percentage>:
Use percentages to define the scale. Negative values are not allowed
Description
Sets or retrieves the scale of the object.
The corresponding script attribute is zoom.

Scale Property
The value of the scale property is 2, which is actually equivalent to a function, because it is written just like a function:
Scale ();
scale (x);
Scale (x, y);
1. Scale (x, y) scales the elements
X indicates a multiple of horizontal scaling y represents the zoom factor in the vertical direction
Y is an optional parameter that is not set, which means that the zoom multiplier is the same for X, y two directions. and take x as the standard.
Transform:scale (2,2.5);
2. The ScaleX (<number>) element scales the element only in the x-axis (horizontal direction).
The default value is 1, as a base point at the center of the element. You can change the base point by Transform-origin.
Transform:scalex (2);
3. The ScaleY (<number>) element scales the element only in the y-axis (vertical direction).
Base point is the same as the center position of the element. You can change the base point by Transform-origin.
Transform:scaley (2);
Look at the compatibility wording:

. test{   -moz-transform:scale (2,2);   -webkit-transform:scale (2,2);   -o-transform:scale (2,2);   Background:url (img/i.png) no-repeat;   width:198px;   height:133px;   }

The difference between zoom and scale

Zoom and scale These two things are used for the scaling of elements, but there are a couple of different places in addition to compatibility. Zoom zoom keeps the element in the upper-left corner, and the scale defaults to the middle position, which can be set by Transform-origin. In addition, they perform a different rendering order, and zoom may affect the calculation of the box.
Run <! DOCTYPE html>

<style>   p {     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>   <p>     <span style= "-webkit-transform:scale (0.5);" ></span>   </p>   <p>     <span style= "     -webkit-transform-origin:top left;     -webkit-transform:scale (0.5);   " ></span>   </p>   <p>     <span style= "zoom:0.5;" ></span>   </p>

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!