[Face up to CSS 07] Let's look at vertical-align.

Preface

Recently I learned CSS, and CSS has always been my own short board. I didn't expect to learn so much about CSS recently. It is really commendable.

As the saying goes, I am a little crazy recently.

Sometimes, after the study ends at night, I sleep very lightly for one night. I feel like it is raining, but the rain is actually all html tags!

I saw a picture on my cell phone in the elevator. I smiled, because I saw his layout!

So I got my magic wand. Yes, it's a sign of magic! Everything has its degree, and the previous Overuse has caused my problems today.

I don't know what to learn today .... Learning is like sailing against the water, so we all need to calm down our minds. Let's take a look at it and build our CSS world view together!

Reference:

Ttp: // www.zhangxinxu.com/wordpress /? P = 813

Vertical-align

Yes, this guy is the main character in this article. In fact, I mentioned this guy again and again before, but today I broke it out because I found that I still don't know him well.

Number

This means that the element is 2px offset relative to the baseline, so we will encounter a baseline. What is the baseline?

I am sorry to steal the image here. Just draw one by yourself:

I know that Shenma is a baseline. Although the old man has not been writing for a long time, he can't think of it, but it is still so drifting!

Percentage

The percentage we encountered earlier, for example, width/height is relative to the parent element, where font-size is relative to the last element with this attribute, vertical-align is relative to the line-height of the label.

The preceding two examples are as follows:

This is a good girl, so let's change the code:

PS: I made a very 2 error and used vertical-align to div.

Knife crazy sword Chi ye xiaochai knife crazy sword Chi ye xiaochai

There are a lot of things to pay attention to in this area, so I suggest you try it.

You will find that the height of the div changes !!!

Come on, let's discuss this question together. Well, I 'd like to give an example here:

Let's take a look at this example. Here I set it to a negative value, and the element in the row will go out of the block-level element.

What's more interesting is that we have two in-row elements in a block-level element. We may open block-level elements !!!

When there are two in-row elements, setting a large or small value for one of the vertical-align will lead to a higher block-level element !!! Why?

In fact, this is easy to understand and easy to say. It is a little difficult. We can imagine that one of the boxes goes up and down (relative to the baseline), so the whole block-level box is increased !!!

Conclusion

I don't know how to catch a cold today. I am here for now. We will continue next time.