Are you beginning to enter the front end of the time, always for the web layout has a god like yearning, especially hope that they can quickly make like Taobao, JINGdong and other pages, think to this extent is not far from the real front end!

In fact, it is! 🤷 ♀ ️

We put a primary entry of the front-end ability, usually defined as can complete the layout of the mainstream website, this matter is no problem, and then learn a little JS ability, in that era you are very mature front-end development engineers!

But what does this topic have to do with layout?

You know, it takes a lot more than HTML to create a layout. (Of course, we won’t talk about tables in the old days.)

There are only two questions we need to understand today

Question 1: What is layout first?

Question 2: How do we use HTML+CSS to achieve the layout of the web page?

What is the layout?

You should know that web page is a form of website developers to deliver certain information to users, such as B site home page should have recommended videos, people to follow, advertising, site navigation, etc., these information want to be displayed through a page, then how to organize is a very learned matter.

Usually this isn’t done by us front-end developers at first, because we have a product manager (yes, the one who gets beat up all the time) who is responsible for designing the basic information of the web page and the basic structure of the front page.

Then it is handed to UI/UE designers for the overall design and detail design of each module, so as to achieve the state that users really see. This process will form the design draft, and even many companies will make the high-fidelity prototype. (the use of software to automatically generate HTML web pages, to the level of actual operation,) to hear this students will be afraid, the web page directly automatically generated, I do what?

Don’t worry, these software is far less clever than you, the code they generate is very messy, the execution will be very inefficient, basically demo use, you have to do the real web page!

Above each link no problem, the final layout of the web page is determined, each module should be in what position, clear.

This is the design stage of the web layout!

So next thing you know, it’s your turn! (what? Are you kidding me? After all that, it’s my turn!

Implications of box models for layout

I know, this is when you panic!

WTF!!!!!!

You’re not trying to fuck me

Ha ha, don’t worry, today boge is going to teach you how to complete the layout of the web page, but before I start teaching you, there are two things to say!

There are two forms of web layout using HTML+CSS

One is the old dumb way of using tables for layout, and you’re like, what the hell, isn’t a table for tables?

Yeah, that’s fine, but can you imagine the layout of a web page as a table, tables within tables?

Like this, right?

As a matter of fact, we used to do this really, there was no way, the conditions were difficult at that time! In order to get the salary of each month, again difficult also want to go up!

But now you don’t have to worry about that, because there’s a second way, which is to use div layouts.

Heard this some students began to panic! If you don’t tell me about the box model, I will stop learning! Hum!!!!!!

All right, all right.

Div layout is actually using the box model for layout, so say you have no problem with it!

But to be honest, just knowing the box model is useful and crucial for layout, but in order to achieve full layout, you need to learn both float and position.

These two technologies to see our later video, remember to pay attention to favorites forwarding comments! Follow us to receive the full video of 2021 Front-end Development

Basic concepts of the box model

First of all, you should know that the block level elements represented by DIV should be a rectangle by default. When we carry out the layout of the web page, we simply control the placement of large and small rectangles in the web page.

So how do you control them? Let’s take a look at this picture

You should think of it this way:

  • Green area -> Margin -> Margin properties -> Position of the current div from other elements
  • Blue area ->border ->border property -> normal people understand the div rectangle is here
  • Yellow area -> Inner margin -> Padding property -> position of the current div from the inner element
  • Pink area -> Content -> Content -> DIV The element inside the rectangle could be just a paragraph of text, or it could be another div

Why is that?

Next we compare the express box body and stacked arrangement you will understand!

Why don’t you take a look and see if they’re the same?

  • Margin -> The position of the box from the outside element
  • Border -> thickness of carton
  • Inside margin -> The position of the box from the items inside
  • Content -> Express item itself

Why don’t we take a look at what they look like when they’re laid out?

That’s the layout… (You also need a float, of course.)

Remember the properties and usage of the box model

Basically, when you learn the box model, you already know how to use the border, so here we only say the outer and inner margins!

Margin alone

margin-top: 10px; /* Distance from top */

margin-bottom: 30px; /* Distance from bottom */

margin-left: 50px; /* Distance to the left */

margin-right: 100px; /* Distance to the right */

Copy the code

Short for margin

/* Abbreviation: indicates that the four directions are set to 50px spacing */

margin:50px;

/* Up, right, down, left, clockwise */

margin: 50px 20px 10px 100px;

/* Control four directions, two groups, up and down and left and right */

margin: 50px 100px;
Copy the code

The padding is written separately

padding-top: 10px; /* Distance from top */

padding-bottom: 30px; /* Distance from bottom */

padding-left: 50px; /* Distance to the left */

padding-right: 100px; /* Distance to the right */
Copy the code

Shorthand for padding

/* Abbreviation: indicates that the four directions are set to 50px spacing */

padding:50px;

/* Up, right, down, left, clockwise */

padding: 50px 20px 10px 100px;

/* Control four directions, two groups, up and down and left and right */

padding: 50px 100px;
Copy the code

conclusion

The box model only solved the div spacing and inner margin problem, just because of a lofty name, confused many beginners!

The above is just the basic concept of the box model. If you are not familiar with the content of this article, you can also watch The live video of The box model by Bog.

Box model video