[02] inline and line-height to CSS, float, absolute story

Preface

It is a long story... Before I always thought that CSS is the most important layout, a picture of the good to webpage display is king.

However, after then slowly after the introduction, they found that the layout is not feeling very difficult, it is in this guy hidden elements.

Inline elements belong to the kind of very gracious Lord, you know you can do better, you don't know him, your page will not too messy, so we ignore his power, so today we are going to take a good look at it

That year, you have not married before I was married

In that year I will write code like this:

<p>
    One of the most well known pili in the movie. Ye Xiaochai life pathos, ill fated family friends, who left him one by one, was sad, but also so practice the transcendent meditation. 
Upright and single-minded, the faith of the knight, although the boy was born, but refuse to be cowed or submit personality, rich life experience, let it become a member of the Central Plains martial arts an integral, 
Enjoy<span style=" width: 200px; height: 200px; margin: 10px; padding: 10px; border: 1px solid black;">「Knife crazy sword Chi」</span>
The famous hero scar, shawls hair and face, with silent features, creating the role of unique style. </p>

Then, I'll do a little demo, thought to grasp the essence:

1 set width is invalid

2 set height is invalid

3 margin is invalid, or so effectively

4 padding is invalid, the effective (or range of elements increases, but the content of the element is invalid)

This is me a long time to inline elements understand, just superficial, and for a period of time without any problems.

A little later, grow in all aspects, I discovered that in fact they are overlooked something.

Strange phenomenon

In the above we found that set the height and width is of no significance, especially high and let us become more confused, look at the example.:

1 <div>Before I</div>
2 <div style=" border: 1px solid black; background-color: Red; ">Space</div>
3 <div>I am in and</div>

The above is the word and div no word when differences in div, we found that div if not words, he “ disappear”.

Have a word, div is high, so we think words opened div, but according to our previous understanding of line elements, slowly we will doubt is not the word but opened height line-height:

1 <div>Before I</div>
2 <div style=" border: 1px solid black; background-color: Red; line-height: 1px; ">Space</div>
3 <div>I am in and</div>

In this picture we should feel surprised, because he gave me a slap in the face (really picture is truth.).

He explains, the text is not open div, control div height is line-height, but why no words when he no height.?

In the inline box model, A line boxes, He is a text box (CSS inside what things will have a box), A line of text with a line boxes, The above “ space ” has a line boxes (each character will have inline box's own internal frame, The two man was too similar, Easily misunderstood), When the div is empty there is no line boxes, But the word, This guy is line boxes., So he is very arrogant “ &rdquo expansion; up.

The line boxes is not the final boss, the final boss is inside the element in row, because in fact is in elements of the inline boxes formation for high, to a walk:

1 <div>Before I</div>
2 <div style=" border: 1px solid black; background-color: Red; line-height: 1px; ">
3     <img src="1.png" />Space</div>
4 <div>I am in and</div>

Look at our great pictures, open our div!

PS: In fact, I here is not the introduction of pictures, he would make the situation more complex, such as you to picture settings for high or something, you'll find out... So, we return to example:

1 <div>Before I</div>
2 <div style=" border: 1px solid black; background-color: Red; line-height: 1px; ">
3     <span style="  ">Ye Xiaochai</span>Space</div>
4 <div>I am in and</div>

1 <div>Before I</div>
2 <div style=" border: 1px solid black; background-color: Red; line-height: 1px; ">
3     <span style="line-height: 10px;  ">Ye Xiaochai</span>Space</div>
4 <div>I am in and</div>

We can see, whether the pictures or the back of the span, “ Ye Xiaochai ” the height. The high street!!!

This is why? ?

Because the line element “ Ye Xiaochai ” inline boxes the line boxes pull up (in fact, Ye Xiaochai is the 3 inline boxes. . )

In this case, we'll have a look to achieve text centered:

1 <div>Before I</div>
2 <div style=" border: 1px solid black; background-color: Red; line-height: 40px; ">
3 Ye Xiaochai</div>
4 <div>I am in and</div>

We find that, there is no height and line-height is set to the same, but he still centered, is because no height line-height is his height, so height is sometimes required.

At this point, I want to know the elements of our team within the line should be more profound.... So we further widened.

Element float in line with

Float is a bad guy, we've said, inline boxes line boxes has high, so we all elements have highly, but we look at the situation:

1 <div>Before I</div>
2 <div style=" border: 1px solid black; background-color: Red; line-height: 2px; ">
3     <span style="line-height: 10px;  ">Ye Xiaochai</span>Space</div>
4 <div>I am in and</div>

This picture is no problem, “ Ye Xiaochai ” pushed up the entire line boxes height, but if we give him with floating.?

1 <div>Before I</div>
2 <div style=" border: 1px solid black; background-color: Red; line-height: 2px; ">
3     <span style="line-height: 10px;  float: left; ">Ye Xiaochai</span>Space</div>
4 <div>I am in and</div>

We'll have a look float the bad guy did something:

The destruction of the I “ Ye Xiaochai ” height, even my height is gone, but also from the document flow (hum, help)

Although I am not high, but why want to give me the width, so the back of words before me

Look, float, this guy is bad, so we do not use the layout of guy, because he let Ye Xiaochai no height!!!!

We are the original code add effect may see something different:

1 <div>Before I</div>
2 <div style=" border: 1px solid black; background-color: Red; line-height: 2px; ">
3     <span style=" float: left; background-color: Gray; ">Ye Xiaochai</span>Space</div>
4 <div>I am in and</div>

This is very strange scene! When we learn inline elements why difficult, because little attention will overturn our idea, a little attention will fall into confusion!

We obviously destroyed Ye Xiaochai's height, why would he have so a little background.? ? ?

Here I will venture to think that div is a little bit default height, if not please God that. If the dynamic specify its height, then the background area will be a little more, okay, we'll try it:

1 <div>Before I</div>
2 <div style=" border: 1px solid black; background-color: Red; line-height: 2px; ">
3     <span style=" float: left; background-color: Gray; width: 50px; height: 50px; padding: 10px; margin: 10px; ">Ye Xiaochai</span>Space</div>
4 <div>I am in and</div>

Idea! We Ye Xiaochai outside the element's span yo, according to the truth of span set height is invalid, but here he is effective!! And why is that? This and we have the elements of the frame.

PS: In fact here “ float forcing inline elements into the inline-block element.”.

This guy float approach is: destruction, reconstruction!

Anyway, float inline elements into a inline-block element is not inline-block.

The element with the absolute line

Consistent with float, absolute did not have him, go beyond!!! Also let the element from the document flow.

Absolutely positioned elements will clean out completely an element width and height damage ( not requested).

If float is termites, absolute is flying termites, actually we think so bad!

Although absolute will destroy the reconstruction of an element, but he is used to layout, flying inline-box is he the best describe. Anyway, I mean we should treat him well.:

<div>Before I</div>
<div style=" border: 1px solid black; background-color: Red; line-height: 2px; ">
    <span style=" position: absolute; background-color: Gray; width: 50px; height: 50px; padding: 10px; margin: 10px; ">Ye Xiaochai</span>Space</div>
<div>I am in and</div>

Absolute is flying inline-block.

The element with the vertical-algin line

Vertical-align this guy is in element alignment tool:

The above a pile of things, I'm here on the matter, but you must remember:

<input  type="checkbox" style=" vertical-align: -2px;"/>

This code have what use.

We sometimes use vertical-align for block level elements, this is not work, he can only be used for block level element or row, it will make a whole relative to the baseline drift.

We are here this may not too deep, here not go. We next to an example of the end of this paper.

Reference material

Dugu Qiubai was enlightened lonely nine sword spent 10 years, Linghu Chong in less than 1 years to learn, this is the teacher's power, so we must study, draw lessons from, even copying others thought, then assemble all the long form their own idea or theory, how the process is not important, it is important not to stop learning. In this paper, the reference (legendary Masters):

Conclusion

Do not sleep at noon, afternoon collapse!!! Behind the time we study together bootstrap and CSS related things.

Brother beginner, any question welcome clap brick.

Posted by Hellen at November 20, 2013 - 9:58 AM