[Face up to CSS 05] What do we miss? Why?

Preface

My memory is not good, so I will spend a lot of time studying the same things.

I have been studying CSS for a while, but I find out the fact that the more I learn, the less I understand, and the humble human being!

I think back to the times when I read the authoritative CSS guide. The first time I had nothing to do with it, the second time I tried to stick to it, and the third time I got little income, I became confused for the fourth time!

When you find that you cannot find the answer, it is a horrible start! In fact, no matter JavaScript, CSS, or others, you can't find the answer...

For example, this article is actually called CSS04. How can it be changed to 05? Because 04 is called:

What am I going to do? I want to know the performance of our common expressions when they do not have CSS, such as ul's margin and padding, such as h1's font size, his margin, for example, what is the performance of dl .......

Finally, I thought for a long time and found that I couldn't write anything, so I fell asleep... In the afternoon, I looked at the "Three dumbys and make a big mistake" and said it was really good!

Then it was now, so I began to think about what I missed? Ladies and gentlemen, what have you missed ????

What do I miss?

This question seems profound and simple: I missed the wonderful products.!

Yes, I missed a wonderful front-end project. To be honest, I still work hard in terms of learning. There are only two reasons I can't remember:

1. I have low IQ.

2. I use less

I certainly won't admit that I have low IQ, so I can only admit the fact that my front-end project is insufficient. The lack of experience here is not enough (in fact, my front-end experience is really insufficient ), more importantly, there is a lack of thinking in the layout process!

We may encounter some problems in the layout process more or less. We will always find various solutions to solve them, but we will give up pursuing their true principles for various reasons!

.

So the above answer is wrong. The real answer is:

.

Although I often run into a demo when I encounter a problem, there is still a lack of big project baptism, such as an e-commerce project, such as an sns project. This is what I need, this is what I want right now !!!

A real product is the beginning of a boom, and there is always no confidence in it.

So I can't get the knowledge from the CSS authoritative guide, not to thoroughly understand it, but not to receive what it teaches. Cool, try again!

Why is Ye xiaochai?

This paragraph can be omitted, but it is still caused by gender. I think it is necessary to emphasize it again ....

When ye xiaochai was still a real "diaosi", he was guided by a famous teacher (half camel waste) to reveal the "Voice of hand ", no matter how you do it, ye xiaochai cannot cover the whole night, leading to a white head. Finally, after being mentioned, the voice of his hand is actually the voice of silence! How can ye xiaochai realize what is the voice of silence? Is it not nonsense if an ordinary person experiences the realm of no tricks? So ye xiaochai cut his tongue and went to find the half-camel waste. Then, the half-camel waste gave his sword to ye xiaochai, and gave him the word "Knife mad sword" for his sword question, this is also the origin of ye xiaochai, the crazy sword of the old man's knife.

Since ye xiaochai has not realized the voice of his hand, why is it that the trigger of a trigger on his mind? Because the half camel waste saw Ye xiaochai's pure (determination is too light, it is too light, it must be pure), so I believe ye xiaochai.

After a long period of time, ye xiaochai naturally understood the voice of his hand and realized a higher realm.

When a person asks him what is a knife and what is a sword, he answers the question of a mad sword. When a person asks if a sword is not stored? He answered his question and said, "What is the last question? He answered the question!

......

Gorgeous split line, it is necessary to separate...

Many years later, another real diaosi claimed to be ye xiaochai and wanted to become an excellent front-end technical staff in China. Through the famous teacher "blog garden articles, Zhang xinxu blog, Ruan Yifeng blog ...... "To learn how to become an excellent front-end technician in China.

How can I know the realm of excellent front-end if I want ye XiaoYu to have a problem with food and clothing? Isn't that nonsense? So ye xiaochai posted a blog and wrote his wishes to express his determination (it must be determination, and it cannot be achieved ...), So I began to learn and explore in order to learn and reach the peak!

Ye xiaochai is now going through a long period of time and cannot fully understand the voice of the hand. I hope that after two fleeting years, this diaosi will become a "Crazy sword". Please remember, this silk is male.

If you want to become a swordsman, you have to do a good job of products and front-end products that you don't want to do. Let's start learning today...

Containing block

That's good. It's another guy, including blocks!

To draw an element in our browser, we must know its positioning and size (so we can get its offset using js ).

There are three types of positioning: nomal flow, absolute, and floats (although it should not be defined as a layout element, it should indeed appear here ).

The above three types will first find their "pivot", that is, they contain the fast ining block. To put it bluntly, it is their container.

The elements in CSS are composed of boxes, and boxes can be seen as boxes. Therefore, how to place small boxes depends on the faces of large boxes. Large boxes naturally depend on the placement of larger boxes, and so on.

PS: As I said before, both user experience and program design are simulating human life.

Therefore, the browser needs to determine the containing block and position of an element:

1 static/relative: Content box of the element's parent element (in short, excluding the padding part)

2 absolute: locate the nearest position element (absolute or relative element)

3. fixed is the root element.

4 float contains the nearest block-level element

BFC

Block formatting context (block-level formatting context) is a layout feature that can be understood as a partition that separates small boxes.

Bfc is actually generated for a box that does not affect zero. to form a bfc, you can do this:

① Float is not none

② Overflow is not visible

③ The value of display is any of table-cell, table-caption, and inline-block.

④ Position is not relative or static

Let's take a look at the previous knowledge system:

① In normal flow, elements are arranged horizontally Based on the top-down layout in html. Each block-level element occupies one row.

② In A floats (floating) layout, the element first appears at the normal stream position, and then moves to the left or right as far as possible based on the floating direction without processing. The height of its parent element will collapse.

③ In absolute positioning, the element is completely separated from the normal Document Stream, so the parent element will directly ignore its existence.

BFC applications belong to normal streams, so it makes no sense to locate BFC.

PS: BFC was proposed to eliminate the influence of elements on each other. If all elements are floating, it would naturally be meaningless.

Therefore, elements with BFC are the same as normal containers, but they isolate independent containers, so that the two elements do not affect each other. In short, bfc is an attribute, it will influence the positioning of elements and the role between sibling elements.

Bfc and margin collapse

Two Connected divs are superimposed on the vertical margin, which we have seen before:

Here's a test.

If we change the code a bit: "remove the outer element border ..

Is this a BUG? We have never clearly understood this phenomenon before. How can we understand this phenomenon here?

When two block-level elements are adjacent and in the context of the same block-level format, the margin between their vertical directions is superimposed.

PS: two block-level elements are in a pile. One is floating and the other is absolute. They are not overlapped in a bfc.

Let's ignore the above questions and look at this example:

The knife is crazy.

The preceding three divs contain their respective div labels. The internal divs have the margin attribute. However, as long as the third element is not folded with the parent element, the third element has its own BFC, the above div uses a BFC, and we will make some changes now:

The knife is crazy.

We found that after padding is set for the outer div, it will also own its own BFC, but this idea is wrong !!!

According to the previous definition, setting padding does not generate a new BFC. So why did we achieve the expected effect after setting padding for the outer layer?

The reason may be very simple, because internal margin and external margin are invisible to each other, they are separated by a door (padding, border), so they are still in the same BFC! (If yes)

Float destruction and Reconstruction

I have said before that float actually destroys the height of the element and converts it into an element similar to the inline-block element. Here we may have another explanation:

Float destroys the BFC of the element, so there is no partition between the elements, so the above elements are pressed down. We set overflow for the float element: the principle behind the floating is that the BFC feature of the parent element is triggered, so that it can re-enclose the floating element and close the floating element.

Here is a simple example:

Xiao Chai ye, Xiao Chai ye
Xiao Chai ye Xiao
Chai ye xiaochai

If the bfc of the second div is triggered here:

Xiao Chai ye, Xiao Chai ye, Xiao ye
Chai ye Xiao Chai
Xiao Chai ye Xiao Chai

Because the two elements are in different BFC, the second div will not overwrite the first div.

BFC and haslayout

IE6/7 has such a BUG. The root cause is that he does not have BFC. Right, ie has a previous idea that internal elements will not break through its box, therefore, there is no frame or isolation board, but in fact the element may exceed its frame. So IE6/7 made a haslayout attribute to remedy it!

Haslayout is similar to BFC, but haslayout has many problems such as IE6/7. For example, our z-indexBUG may be caused by it.

We recommend that you use zoom: 1;

Layout elements are used to control the size and positioning of layout elements;

Without layout, you can only rely on its parent element. If its parent element does not have layout, you can only find Grandpa (there is always a rich ancestor ).

Some elements are inherent in layout)

If there are no elements, I will not explain how to trigger them here...

Forget it, so as not to forget it. Let me talk about it:

We don't really care about these guys.

These guys can trigger the following:

In particular, we sometimes set a style for span or a to make it look like a button, but it looks like a horse in IE7 or below. In this case, we should consider triggering layout.

Because span does not have layout, and there is no background, if there is a background, the background of the guy who does not have the layout attribute will not be displayed.

Conclusion

Today's learning is now here, and we will continue tomorrow.