[Face up to CSS 02] The Story of inline, line-height, float, and absolute

Preface

That's a story that was a long time ago... Previously, I always thought that the most important thing about CSS is layout. It is king to display an image on a webpage.

However, after gradually getting started, I found that the layout was not very difficult, but the element in the line was hidden.

The element in the row belongs to the kind of kind lord. You know him well, you can do better, you don't know him, and your pages won't be too messy, so we can easily ignore his power, so let's take a good look at it today.

You did not marry me that year

In that year, I would write the following code:

「 Knife crazy sword crazy 」

Then, I did a demo and thought I had mastered the essence:

1. The width setting is invalid.

2. The height setting is invalid.

3. The upper and lower sides of margin are invalid, and the left and right sides are valid.

4. the padding is invalid. It is valid for both the left and right sides (the element range is increased, but the element content is invalid)

The above is my understanding of the elements in the row for a long time, but it is only superficial, and there is no problem for a while.

Later, I found that I ignored some things.

Strange phenomenon

We found that setting the height and width is meaningless, especially the height makes us more confused. Please refer to the example below:

I am at the sum of spaces

The above is the difference between the text in the div and the text in the div. We found that if the div has no words, it will "disappear ".

With the text, the div has a height, so we think it is the text to open the div, but according to our previous understanding of the element in the line, we will gradually suspect that it is not the text to open the height, but the line-height:

I am at the sum of spaces

We should be surprised at this picture because he gave me a slap (there is a picture of the truth ).

He basically explained that the text didn't actually support the div, and the div height was line-height, but why didn't he have the height when there was no text?

In the inline box model, there is a line boxes, which is the text box (there will be a box in CSS), and a line boxes in a line of text, the space above has a line boxes (each text has its own line box, inline box, the two names are too similar, easy to misunderstand ), when div is empty, there is no line boxes in it, but after there is a word, this guy has line boxes, so he is very arrogant.

The above line boxes are not the final boss, and the final boss is actually the line element in it, because in fact it is the line height formed by the line element inline boxes, let's go one by one:

I am at the sum of spaces

Looking at our great pictures, we opened our div!

PS: Actually, I shouldn't introduce images here. It will make the situation more complex. For example, if you set the Image Height or something, you will find that... So let's take another example:

I am at the sum of the spaces

I am at the sum of the spaces

We can see that, regardless of the picture or the span behind it, "Ye xiaochai" has elevated the height of a street !!!

Why ??

Because the inline boxes of the line element "ye xiaochai" has elevated the entire line boxes (in fact, ye xiaochai has three inline boxes ...)

In this case, let's look at the implementation of text center:

Before I was there, ye xiaochai, I was at the sum.

We found that the height is not set to the same as the line-height, but it is still centered because the line-height is his height when the line-height is not set, so height is sometimes required.

So far, I think we should have a deeper understanding of the elements in our team .... So let's broaden it.

Float and In-row Elements

Float is a bad guy. As we have said before, inline boxes gives line boxes a height, so we have a height for the entire element, but let's look at the situation:

I am at the sum of the spaces

This figure is okay. "ye xiaochai" raised the height of the entire line boxes, but what if we add a floating to him?

I am at the sum of the spaces

Let's take a look at what the bad guy float has done:

① It damaged the height of my "ye xiaochai". I lost my height and broke away from the document stream (Whow, help me)

② Although I do not have the height, why do I have to give my width?

Look, float is a bad guy, so we don't need to use it for layout, because it makes ye xiaochai have no height !!!!

We may see something different when adding some effects to the original code:

I am at the sum of the spaces

This is a strange scene! Why is it difficult for us to learn industry elements? If we don't pay attention to it, it will subvert our ideas. If we don't pay attention to it, we will be confused!

We have obviously destroyed ye xiaochai's height. Why does he have such a background ???

. If the height is specified dynamically, the background area will be a little larger. Let's try it now:

I am at the sum of the spaces

Come on! The element outside ye xiaochai is span. In principle, it is invalid when span is set to height, but here it is obvious that he is !! Why? This is related to the box of our elements.

PS: Actually, ".

Float's practice is to destroy and recreate it!

In any case, float changes the element in the row to an inline-block element that is not an inline-block.

In-row elements and absolute

In the same way as float, absolute does not have to do good things. It has never been better !!! It also disconnects elements from the document stream.

Incorrect).

If float is a termite, absolute is a flying termite. In fact, we think this is not good!

Although absolute will destroy and recreate an element, it is used for layout, and the flying inline-box is the best description of it. Anyway, I mean you should treat him well:

I am at the sum of the spaces

Absolute is the flying inline-block.

Line Element and vertical-algin

Vertical-align this guy is a tool for line element alignment:

I don't care about the above things here. Everyone must remember:

This code is useful.

Sometimes we use vertical-align for block-level elements, which does not work. It can only be used for block-level or intra-row elements, and will make a whole block Drift Relative to the baseline.

This may not be used too deeply here. Let's end this article with an example.

References

It took 10 years to learn the power of the famous teacher. Therefore, we need to learn more and learn more from each other, even more people's ideas are imitated, and then people are gathered to form their own ideas and even learn how the process is unimportant. What matters is continuous learning. Reference in this article (famous teacher in the legend ):

Http://www.zhangxinxu.com/

Http://www.cnblogs.com/winter-cn/

Conclusion

Don't go to bed at noon, crash in the afternoon !!! Later, we studied bootstrap and CSS-related things together.

If you are a beginner, click it.