Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what are CSS document flow skills". In daily operation, I believe many people have doubts about what CSS document flow skills are. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "what are CSS document flow skills?" Next, please follow the editor to study!

Before you read the article, let's take a look at two examples. This is the most common way of project layout in our project.

Case 1: multiple containers are arranged horizontally at the same spacing.

Case 2: common menu navigation

When you see these two cases, you can briefly think about how they are usually realized. Many students' answer should be like this.

/ / case 1. Demo {padding: 1em 0; width: 470px; background-color: # e5e5e5; overflow: hidden;}. Item {float: left; margin-left: 10px; width: 150px; height: 100px; background-color: # fff; border: 1px solid # 999999; box-sizing: border-box;}. Item:first-child {margin-left: 0 } / / case II Navigation 1 Navigation 2 Navigation 3.demo2 {width: 200px; background-color: cadetblue;}. Nav {display: block; width: 100%; border-bottom: 1px solid # 000; color: # fff;}

We have achieved the effect, but all the pixels here are calculated by yourself.

For example, in the first example, the width of the parent container is 470 = 3x 150 + 20. If you don't use the flex layout, what is the best way to make the three elements adapt to the screen width?

Or if you want to expand three elements to four, you need to manually calculate the width of each element. This seems to be a lot of trouble.

Today, let's talk about how to use the characteristics of "flow" to solve some layout problems encountered in the project.

We often hear this concept called "document stream" when we first learn CSS, and many people don't delve into what a document stream is.

So what is "document stream"?

If you are still confused in the world of programming and don't know your future plans, you can join the web front-end learning and exchange autumn circle: 767273102 where you can communicate with the great god and get out of the confusion. Beginners can get learning materials for free to see how their predecessors proudly move forward in the programming world to update the latest tutorials and learning methods (detailed front-end project teaching videos), those who want to learn the front end of web, or change careers, or college students, and those who want to improve their abilities at work. Welcome to join us.

Document stream

Document flow: guides the arrangement and layout of elements in a web page, and its default direction is from left to right and from top to bottom.

One of the biggest characteristics of "flow" is self-adaptability. You can think of it like a stream of water. When the water is poured into a container, it automatically fills the whole container. On the other hand, the performance of the document stream in CSS is consistent and similar.

Not only that, you will often hear that "away from the document stream", such as floating, absolute positioning, etc., can be separated from the document flow, and detaching from the document flow is not the focus of this article, so I won't talk about it. Today is mainly about "the adaptability of flow".

There are two important concepts in document flow: block-level element (block) and inline element (inline).

Block-level elements fill the screen by default and are adaptive, while inline elements are arranged horizontally by default.

You can imagine that block-level elements fill containers like water, while inline elements are objects floating in the water arranged from left to right.

The display:block attribute is often encountered in a project. Note, however, that it is not the same thing as block-level elements. Display:table is also a block-level element.

Loss of liquidity

At this point you should be clear about the characteristics of the flow, in fact, many people know the concept of "document flow", but do not make good use of it, thus adding some unnecessary trouble to themselves.

For example, I used to write CSS like this:

Span {display: block; width: 100%;}

If you understand the characteristics of the flow, in fact, width: 100%; this attribute is redundant, because block-level elements automatically fill the container by default in the flow layout.

Have you ever been shot to write this CSS? You are welcome to state your question in the comments section.

But if it's just one more attribute, it's just an additional line of code that doesn't seem so concise, but it's always not that simple.

Once you add a width attribute to an element, it loses its liquidity, even if it has a value of 100%.

Yes, you read it correctly, as long as it has the width attribute, it will lose its most powerful liquidity. It becomes worthless.

For example, in the case of navigation at the beginning, if you add some margins to the navigation. There will be bad results.

.nav {display: block; padding: 10px; / / added margin width: 100%; border-bottom: 1px solid # 000; color: # fff;}

And if we remove the width attribute, we will get a perfect display effect.

.nav {display: block; padding: 10px; border-bottom: 1px solid # 000; color: # fff;}

Maybe you didn't realize the harm of adding width attribute before.

But when you read this article, you should be aware of the harm that width brings to liquidity, and try to use less width, or even "no width".

Before this, I believe that many partners have encountered situations that exceed the width of the project summary, but few people explore it, so many people will use their unique computing power and then write the following code.

.nav {display: block; padding: 10px; width: 180px; / / 200px-10px*2 border-bottom: 1px solid # 000; color: # fff;}

It also seems to have achieved what it should have, but the disadvantage is that it is too fixed, and any change requires you to recalculate it.

Some people may say, Brother die, my computing power is amazing, can you take care of it? well, Bo counts me losing.

So why is it that adding a width attribute will exceed it, but not adding a width attribute?

It turns out that when the element does not set the width attribute or width:auto, the margin, border, and padding of the element can automatically allocate space.

Once we have set a fixed width property, even if it is 100%, it will be calculated according to CSS's box model. Thus losing the mobility of automatically allocating space.

As for the details of how to calculate, because the box model is different, so the role of the width is different, it contains different things. I don't want to say more about it.

Brother die, now you know how powerful "no width" is.

Because here I mentioned the box model, you will think of the above case, change the next box model on the line? For example, we do this:

.nav {display: block; padding: 10px; width: 100%; border-bottom: 1px solid # 000; box-sizing: border-box; / / change box model color: # fff;}

It is true that this can be used in this case, but if you want to achieve the level of case 1 there is a gap arrangement problem, it is a bit inadequate.

Because the CSS box model does not calculate the margin, horizontal arrangement can be easily implemented, but if you want to have the same spacing, it is more difficult to achieve.

At this time, you can try to make use of the characteristics of the flow to implement this solution well.

Width separation

At this time, we can take advantage of the characteristics of the flow to separate the width.

Content .demo {padding: 1em; background-color: # e9e9e9; overflow: hidden;}. Item {float: left; width: 25%;} .child {margin: 0 10px; padding: 10px; border: 1px solid # ccc;}

You will find that no matter how you change its margin, padding, border, it will automatically fill the allocated space, and there will no longer be a series of situations such as layout disorder, excess, and so on.

At this point, the study of "what are the CSS document flow skills" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.