Home > Developer > Web Develop
Welcome back, last class did not leave any questions to everyone, but introduced a very important question, that is the CSS Cascade priority order:
Inline style >id selector > class selector > Element selector
Okay, so this is the end of the review, and then we'll continue to learn our CSS.
This lesson is about a very important and slightly difficult thing to understand-floating
In the previous course we gave examples of several lists, but all of the lists are lined up in rows.
So how do you get them to cross up? -Just use our float (float)
Before we formally introduce the floating thing, let's start with a bit of knowledge--block elements and inline elements.
What do you mean? Don't know if you've found a pattern or have you ever tried
In the previous example, we set the width and height styles for div and Li.
But not for a, span set, then we might as well give these tags try to add width and height to try
Code and previews I'm not here to write, and you'd better try it yourself.
The final width and height are not effective
Ok, maybe we know what the situation is: the label seems to be divided into two kinds
One is to set the width and height to work
There is another way to set the width and height does not work
So the computer of this group of people gave the former a name called block elements , and others call it block-level elements
The latter is called inline elements, or inline elements , embedded elements
Because the front-end of the fairy blossom, the various schools of contention, so the derivation of so many names
It doesn't matter what the name is, but there is one more thing to note is that the block element has a feature in addition to setting the width and height
That is , if you do not do any special processing, the block element will have a single row, regardless of its front, back, parent, child is block or inline
Inline elements are displayed in the order in which we write them.
Okay, so much for that, let's just take a look at the example.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Inline and block</title> <styletype= "Text/css">. UL1{width:500px;Height:200px;Border:1px solid Black;}. ul1 Li{width:200px;Height:50px;Border:1px solid Black;}. A1{width:100px;Height:50px;Border:1px solid Black;}. Div1{width:100px;Height:100px;Border:1px solid Black;} </style></Head><Body> <ulclass= "UL1"> <Li>Li1</Li> <Li>Li2</Li> <Li>Jiu</Li> </ul> <aclass= "A1"href= "javascript:;">A link 1</a> <aclass= "A1"href= "javascript:;">A link 2</a> <aclass= "A1"href= "javascript:;">A link 3</a> <aclass= "A1"href= "javascript:;">A link 4</a> <Divclass= "Div1">Div1</Div></Body></HTML>
The structure and style are very simple, so we don't say much, just look at the results of the operation
Well, looking at this example, we can clearly see that Li is a block element, a link is an inline element
Div's words have already been said to be block elements, so there's nothing to doubt
So what is the UL element?
Well, the simplest way to judge whether an element is a block or an inline is to see if it works .
We can also see the effect of the width and height of the preview from above.
OK, next we'll analyze an interesting question, a link is an inline element
Then why not the top of the UL behind it?
If you have such a question, you may wish to return to take a serious look, analysis under
Even if a wants and UL squeeze in a row, UL allowed?
The block element is very overbearing, it doesn't matter what you are, everything will squeeze you to the next line
So a link was squeezed down
Similarly, why is the div not following the fourth a link?
Not a link do not want to, but the div is not willing and these even the width of the high can not set the small characters together Ah
It's the next row, naturally.
Well, even though an element is a block or an embedded scientist, it's been set up for us.
But the political teacher told us that everything is evolving.
So the block can become an inline, and the inline can become a block.
This is controlled by a style attribute called display.
For example, we add Display:block to the. A1 class in the example above; this style property
Then all the a elements on our page with the A1 class name begin to dominate:
If that's what happens after you preview, then congratulations on the right place.
Well, it seems like the subject of our class--floating is not what it's about, don't worry.
Let's do some prep work next.
We add a little bit to the code above, first add a background background:red to all Li, and then add a class to the first Li. li1
Add a style background:blue inside the. li1;
After such a toss, let everyone deepen the last lesson on the level of the concept of the impression, then we can compare the effect is the same as mine
If it's the same, then congratulations and the right place.
Finally, give the. Li1 plus our float: float:left;
At this moment, the time to witness miracles is coming:
People will find a very magical phenomenon, li1 as if the position has not changed, and Li2 and Li3 had an accident, not only the position changed, and they seem to overlap
Well, in fact, if we add float to an element, the element looks like it's floating up.
Float:left is drifting to the left, and float:right is floating right.
Of course, even if it's so unrestrained, there's gotta be an end to it, there's gotta be a wall to block it.
This wall is the nearest block-level parent element.
But this is a bit verbose, because there is no block element in the inline.
So as long as your CSS is still in compliance with the law, the parent of the block element must be a block element.
If you do things in violation of the law, you have to set up a block element inside the inline, what is the matter with no responsibility
Well, it's a little bit more, back to our topic.
In this case, the nearest block-level parent element of LI is ul.
So the Li who added the Float:left one-sided to the left of UL.
Of course, a slightly normal vision of friends will say you Li obviously still and UL have so some spacing
Actually, this spacing is related to the box model we're going to say later.
This spacing is actually Li's margin.
Anyway, let's not worry about this.
Perhaps because the li1 itself in the UL inside the left side, so everyone to the left of the experience may not be so deep
You might as well try to change the. Li1 float to right.
If your results are the same as above, congratulations on your step forward.
OK, look at this interface, I would like to ask you a question Li1 and Li2, who is a higher position?
As we have said before, adding floating elements will float, so it is inevitable that the li2 position is higher.
So we can basically guess.
When Li1 added to the left float, it must be because the blue li1 floated up, and then because Li1 in the sky will Li2 blocked
So we just saw a red Li, and the red Li we saw was li3.
There must be some doubt, if so why Li2 and li3 text overlap together?
The fact that the block element is added to the float will have a feature: it will squeeze the text of the element underneath it .
So we're not surprised to see this effect.
Well, we can actually further verify our guesses.
How to verify it?
We add a style to the. Li1 class height:25px;
If our guesses are correct, the height of the li1 becomes 25px.
We can see the bottom half of the li2 and the whole li3.
And this time the li2 inside of the text, although also squeezed down, but will not cover Li inside the text
Analyzing so much, or directly previewing the most obvious
Just as we thought, this is the so-called think alike, hehe
This is the end of the class, and the next lesson we continue to talk about our floating
Web front-end from getting started to mastering-7 CSS Introduction
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
