Let's talk about the principle of zoom: 1. What if asked ?, Zoom Principle

Let's talk about the principle of zoom: 1. What if asked ?, Zoom Principle

One day, my former colleague bowed his head and returned from the goose factory for an interview. He said he was overwhelmed by a common problem.

The other party asked him if he knew the function of zoom: 1?

Former colleague: Clear floating, triggering haslayout.

Q: Do you know how zoom: 1 works?

Former colleague :......

Zoom: 1 does help us solve a lot of bugs in ie, but how many people know about it?

So I often talk about it.

The Zoom attribute is a proprietary attribute of IE browser. It can be used to set or retrieve the scaling ratio of objects. Let's take a look at it from du Niang.

In the general css coding process, zoom: 1 can solve the odd bug in ie.

For example, the outer margin (margin) overlaps, such as floating clearance, such as triggering the haslayout attribute of ie.

The ins and outs are as follows:

Du Niang tells us that zoom is the scaling ratio of the set or retrieval object. Setting or changing the attribute value of a submitted object will result in the re-flow of the content of the surrounding object.

Although this property cannot be inherited, it affects all sub-objects (children) of the object ). This effect is similar to the changes caused by the background and filter attributes.

This attribute is read-only for currentStyle objects and can be read and written for other objects.

After the zoom value is set, the set element will be expanded or reduced, and the height and width will be recalculated, once the zoom value is changed, it will actually be re-rendered. Using this principle solves the problem that the parent element does not automatically expand when the child elements of ie are floating.

Zoom is a proprietary attribute of IE browser. Firefox and earlier versions of webkit core browsers do not support this attribute. However, zoom has now been gradually standardized and appears in the CSS 3.0 standard draft.

Currently, non-ie does not support this attribute. What attributes are used to scale elements?

We can scale the image by using the animation attribute scale in css3.

Well, let's look at the ins and outs of zoom. If there are any errors, I hope you can give me more advice. If you think there are gains, please leave a message.

Author: Alone
Antroduction: Senior front-end development engineer
Sign: there is no failure in life, only success in life.

Recommended articles for bloggers:

Moving up and down events on the Mobile End -- touch. js

SeaJs-A Tool for modular Development

I have read interesting front-end questions and don't regret them.

Mobile front-end development overview

Semantics of tags

Introduction to scroll wheel events

Without a long journey or even a thousand miles ---- highly adaptive textarea

Sass and less, excellent front-end style Preprocessor

What about parallax scrolling?
Small bugs about common pitfalls

1. What is this for me?

It is to collect some topics that interest you in your life, then draw a statistical table, and then propose a mathematical question based on the statistical table. However, it is recommended that the mathematical problem be simple, because it is difficult to calculate if the data is too big. Well, please accept it.

1 What is the water supply principle of a water pump? When it starts to turn the water supply, it is always not possible to maintain the working state of water supply one day to night, in case of users

The water pump does not directly provide water to the user. It first draws water to the pool or water tank, and the pool or water tank supplies the user.
The water level table or pressure gauge is installed in the pool or water tank. when the water level or pressure rises to 80%-90% of the full pool (set according to the specific situation), the water pump stops running; when the water level or pressure drops to about 40% of the full pool (set according to the specific situation), the water pump runs again, so that the cycle starts again and again.
The device also has a backup device, an abnormal alarm device, an automatic conversion device, and a repeat protection device to ensure normal operation.