[Face up to CSS 06] build our own world view!

Preface

When we were very young, we didn't know anything, so everything was explained to us by others. Maybe we were parents, maybe teachers. But as we got older, we gradually formed our own world view, when we have a child, he will ask us a lot of questions and we will answer them for him. What is our answer?

Our answer comes from our own world and our own world view!

We didn't know anything when we started CSS, So we learned a lot from books and blogs. Should we also form our own world view? Can we use our world view to explain all the problems we encounter?

The above are my recent questions. I think it is necessary for us to form our own world view. world view is a sign of growth. The world view that I have formed can be small, but he must exist, you must also exist.

We need to defend our world view. We need to build our world view. When our world is large enough and developed enough, we will be called Masters. Wow, haha !!!

Shi Zun, Where did our page come from?

After a url is entered in our browser, our server returns a bunch of strings to us. This string is the legendary html.

The dom tree has been hooked up since the html bytes are obtained. In the following cases, the dom tree construction will be temporarily blocked:

① Network card

② There are unloaded scripts

③ A script is encountered before the style is loaded.

The dom tree is the foundation. After the dom tree is built, we will build our rendering tree based on the style and dom. At this time, the style file will block our page rendering.

PS: some web pages write CSS in pages, instead of external files, to avoid page flickering or streaking.

After the style sheet is loaded, the rendering tree is built, and our page is basically formed.

Once the rendering tree is built, if JavaScript scripts operate the dom, it is likely to cause page reflux. Excessive backflow is the killer of front-end performance.

The download order of the browser is from top to bottom, and the rendering order is also from top to bottom. The download style sheet and the rendering tree form are synchronized.

When rendering a part of the page, all the above parts have been downloaded and the rendering has ended (once JavaScript changes, the side may cause the backflow of the previous elements)

If there are multiple style sheets in the browser, after downloading all the style sheets, the browser will re-Parse all the style sheets and re-render all the previous elements, therefore, too many style sheets are not very good.

PS: During page creation, we should note that the page size should not start to be too large, so that it can be rendered quickly and loaded in a delayed manner.

The above logic can be divided as follows:

① Construct a dom tree

② Construct the render tree

PS: rendering tree, written in English in order to prevent future users from being asked what it is, including rectangle blocks with colors and attributes.

③ Layout the render tree, determine the exact coordinates of each node on the screen, and then start to draw.

Shi Zun, how should we deploy our pages?

The above is what the browser does. after it completes, it forms the page we see. We don't need to pay too much attention to it, but we need to pay attention to its layout.

When the rendering tree is created and added to the tree, there is no position or size. The process of calculating its position and size is layout or reflow.

Each rendered object has a layout or reflow method. Each rendered object must have a layout Method for children.

Every small change may lead to a re-layout. When the browser uses a dirty bit system, a rendering object changes and marks him and his children's stomach dirty, if there is a problem with its children, it will only involve its children.

Global reflux needs to be avoided. Because of its high performance consumption, it is understandable that window changes will cause global reflux, but we should do less to change the font size of the entire browser.

When rendering an object, the size of the element (the height is not fixed) is determined by its parent, and it will determine its children object. The children accumulates height and margin and padding are their own sizes, in short, the browser is very busy in this process.

The browser is very busy when rendering pages, so it will make a bad mistake if you accidentally think that the browser has a bug, so don't think that the browser has a bug, he is too busy to pay close attention to it.

PS: The process of element painting refers to the process of element pushing into the stack. The stack sequence of a rendering object is: Background Color-> background image-> border-> children-> outline. So we can refer to the rules when writing css.

CSS requires that all elements should have a box model (content area, padding, border, margin), but different elements are different:

Block-level element-block-level Box Model

Line Element-generate one or more inline boxes. The inline boxes form line boxes to determine the Row Height.

None -- do not generate the Box Model

Shi Zun, what is a box model?

The box model is crucial to the layout behind us.

To locate an element, the browser must know its positioning and size. The browser has three la s:

① Normal Layout Based on itself and model size

② Float starts to be similar to a normal stream, and then moves from the document to the left or right as much as possible.

③ Absolute has nothing to do with dom. The location is determined based on top and the box model determines the size.

The three types above should have their pivot points in any case. This pivot point is the legendary containing block (including fast), that is, the container where elements are located, simply rely on its parent (this may be incorrect)

As we have mentioned above, each element follows the box model theorem, so each element can be simply regarded as a box, and small boxes depend on large boxes.

① The static/relative element contains the content area (out of the padding part) of the parent element)

② Absolute contains the latest positioning element (absolute/relative)

③ Fixed is the root element (html)

④ Float contains the nearest block-level element

Shi Zun, What Is BFC/IFC?

In order to reduce the influence of each other in the box layout, block formatting context (block-level context) is a layout feature. I understand it as a separator to separate the boxes.

The following actions generate bfc:

① Float is not none

② Overflow is not visible

③ Display is one of table-cell, table-caption, and inline-block.

④ When position is not relative or static

IE7 does not have the concept of BFC. To solve this problem, haslayout is proposed. The equals sign can be drawn between the two. However, haslayout has many bugs, so IE7 has many bugs.

Margin collapse occurs between adjacent block-level elements, that is, the outer margin overlay.

This is because vertical margin overlay behavior is performed when adjacent and in the same bfc.

If the vertical outer margin is superimposed,

There are two solutions (do not let them be adjacent, in different bfc), you can set the padding attribute for the external to separate each other, of course, you can also use the overflow trigger bfc to cause it to be in different bfc, this will not cause overlay.

Shi Zun, what is a block-level element?

With the above knowledge, let's take a look at the block-level elements.

A block-level element occupies only one row. In normal, its layout is determined by its box model.

PS: the parsing of the IE6 box model is incorrect and needs to be processed for backward compatibility.

The block-level element is the layout of a large family. His cooperation with position is the layout of the Swiss Army knife.

Here I have two types of block-level elements in the absolute layout:

1 absolute destroys the height and width of an element and disconnects it from the normal document stream to form a flying inline-block element. Its initial origin (top/left) it is consistent with normal elements in the Document Stream, but does not affect other elements.

2 absolute has its own bfc environment. After it is split from mainstream bfc, the size is determined by the box model, and the position is determined by top.

Because there may be multiple absolute on the page, the display between them may be covered, so we have the z-index cover guy to help our officers.

PS: I guess that to bring elements closer to us is actually to bring their bfc closer to us, while there is no bfc below ie7, instead of haslayout, so there will be such a bug below ie7, in addition, the element must depend on the z-index of its parent element. In fact, haslayout of the child element must depend on haslayout of its parent element. The truth is that bfc of the standard browser is independent of each other, haslayout of ie7/6 depends on the parent element (guess, please click it)

Line Element

For in-row elements, each word will form an anonymous inline boxes, and each in-Row Element will also have an inline boxes, and a line of inline boxes will form a line boxes, the row box determines the height of the row.

But what did inline boxes do here?

Since there is a block-level format context, there will be inline formatting contexts (intra-row formatting context)

In ifc, inline boxes are horizontally arranged, starting from the header of its containing block,

PS: I am missing this one. I will make it up later.

Inline boxes will support line boxes, and line boxes will give us the height of a line, so the text cannot open the height, which is the height of inline boxes, finally, line-height determines the height (if the height of block-level elements is not set ).

Float

We know that float will also create an independent bfc. Here I understand it in two ways:

1 float this guy breaks down the height of the element and changes it to the inline-block that will move left and right. Although the height does not exist, the width is still there, so other texts will surround it, block-level elements (borders, etc.) are overwritten.

2 float has its own bfc, so it has nothing to do with other elements because it is out of the Document Stream (this idea cannot be formed yet, so it depends on the first one for the time being)

Is your world view formed?

So far, we have learned a lot about css, And we have formed a world view. So we need to find all the answers we need in this world in the future, if you cannot find it, it means that the world is not developed enough. If you need to build it, we need to maintain it and prevent it from being destroyed, but it doesn't matter if it is actually destroyed, because the world you have created will be brilliant !!!

Let's use this world view to explain some of our problems:

Compatibility problems?

In fact, the compatibility problem we mentioned is mainly caused by problems in IE7 or lower. haslayout is used for IE7 or lower because BFC does not exist, so there will be many bugs,

Experts will avoid problems with haslayout, and most people will choose to use hack technology

Why is it highly collapsed?

Because float destroys the inline boxes of the element, and our inline boxes opens our block-level elements, if we do not dynamically specify the height, it will not actually have a height.

How does one solve high collapse?

Clear: I guess here that clearing the floating force fixes the inline boxes of the line elements, so the elements can support block-level elements (but I cannot prove myself)

Overflow: overflow triggers the bfc of the element, so that the element has an independent bfc, so the element does not need to collapse! The above is the trap! I can't do this because I am deceiving myself, not to mention fooling around you. So let's change the argument here. Here I want to change my mind. We know that bfc is actually formatting the context, to put it bluntly, he will enclose our elements (we sometimes use the label to simulate the button in IE7, but it's okay after layout is triggered. This should be the principle ), if we look at the element that triggers bfc, it would have no height, but I want to include you. We cannot wrap anything we don't have, so the browser is forced to restore its inline boxes.

PS: first, I did not find any questions for a while, so I could answer myself. Second, I was afraid that I could not answer any questions, it is so sad that the world I set up is ruined, so I am not asking myself a question for the moment.

Why does the fan keep turning when I operate dom in js?

Because operations on the dom may cause a large amount of backflow reflow, the page must be re-deployed, which consumes resources.

Why do we need to specify the image container width?

After an image is loaded, if the width is not fixed, the page where the image is located will be opened. The following sections will show lower-layer phenomena, which is also a reflow (loading the image only after dom construction is complete)

Conclusion

I formed my own CSS Time View. Although he is still very fragile, I will build him slowly to make my CSS world solid and beautiful.

Ladies and gentlemen, if you think there are any shortcomings and errors, please submit them.