After writing this article, I made a share in our team. The common problem is that there are so many concepts thrown out that it’s a little hard to understand. Here we reorganize our ideas and simplify our concepts. Let’s do it again. So move on to the relationship between the revised CSS layout and “warehouse management.

There are a lot of tools and software out there that try to make the transition from design to prototype. But so far I have not seen any company that can stand up and say, “We can do this 100% of the time.”

What prevented the transition between these two visually almost identical scripts? In my opinion, the physical logic is different. To put it simply, to achieve the transformation from design draft to prototype draft is to achieve the height of breaking through the physical dimensions between them.

The difference between the prototype draft and the design draft

Because we’re so used to relying on our eyes, it’s easy to see things from only one perspective. If we take a different perspective and combine it with the laws of physics that we live in, we might be able to see something. Here we turn to the sides of the two scripts.

I understand the process of design as the process of painting on the floor, and there is only overlay relationship between elements. And because the logic between elements is so simple, we can start anywhere without worrying about affecting the position of other elements.

In our Web environment, however, programmers write code on a wall with a vertical floor. And the physical logic becomes much more complicated. How do you say?

Working from a wall, it is obvious that all elements will fall to the floor under the gravity of the Earth (although if the elements below are large enough, they can be stacked). But in real web pages, we’re used to looking from the top down, so what about that?

We need an upward force, so fill the whole room with water. At this point, all the elements are rising under the influence of buoyancy. But you can see our words are floating up, out of order. How can I get these words in the right place?

It’s very simple. We put all these words in boxes. And it’s all very similar to your wardrobe. The only difference is that your home is now filled with water.

The box model

Box? What does this have to do with the box model of our web page? They look like one thing to me.

Insert a little bit of box-sizing here. It’s like when you buy walnuts, some stores have them in the shell and some stores don’t. You can’t say there’s a problem with any of these walnuts. They just do it differently. Browsers understand width the same way. Some browsers take borders into account, others don’t. So what we need to figure out is what the browser does, or you can just use box-sizing to tell the browser I want to do that calculation.

For the gap between the inside and outside of the box, we can think of this as the magnetic force. All our boxes are made of metal. Some boxes carry magnetic force (H1,body, P) and some boxes do not (div, SPAN). We can charge these boxes through the margin and Paading sockets to change the magnetic force between them.

  • marginThe socket is charging the skin, so the force is outward.
  • paddingThis socket is charging the inner shell, so the force is inward.

positioning

So that’s the logic that we’re going to use to make this kind of cascading effect what do we do?

All we need to do here is put a 3D net over our box, and we can stack the elements that we want to stack.

For fixed, we can understand that we have a global default network, fixed is to put elements into the network.

Many young friends can’t understand the relationship between relative,absolute and fixed. Although they are both declared by position, relative creates a structure, while absolute and fixed place elements into the structure.

  • relativeCreate a 3D mesh structure;
  • abosolutePut elements in the net;
  • topX-axis position of the element in the net;
  • leftThe Y-axis position of the element in the net;
  • z-indexThe z-axis position of the element in the net;
  • fixedPut elements into the global network;

And we have a net on the Z-axis that looks like an infinite number of levels.

Liquid layout

Now let’s cut the view from the side back to our front. To give you a real example of the physical logic of the layout of a web page.

Let’s say this is our actual browser interface, and we put the following I love you three words into our browser. Because the text is subject to the buoyancy we talked about earlier, it will float up.

But oddly enough, in the real world of the web, our text automatically aligns to the left. This is because the browser’s magnetic text-align attribute, by default, is left.

We can easily apply force to a box, but text is more difficult, so we usually put text in the box to achieve the force effect indirectly.

Put a few more boxes and text in your browser and you can see this effect. Oddly, there is a lot of white space to the right of the width block element. According to the previous logic, the element below us will automatically fill up under the influence of buoyancy.

This can be interpreted as a box with a block property that has an invisible partition between it (similar to the transparent glass in a closet). No matter what the width of this box is, nothing under it can float.

What if we just want the element below to float up? So we can remove this layer of glass with the float property.

It can be imagined that because we removed the glass version, the following text will automatically float up.

We can do this by adding a text box called clear:both; So that our words don’t float.

Of course, since we are adding boards, we can also put our floating elements into a box. Add a height (60px) to the box, either set the overflow property, or use clearFix to preset CSS styles. The same effect can be achieved.

Of course we have a block element with a partition. There are also inline-block elements and inline elements without partitions.

Above is a screenshot from the top of Webnovel’s details page. You can go to webDeveloper and download the webDeveloper plugin for Chrome and Firefox. Use infomation => display Topographic Information to view the box structure of any web page.

Other layout

For layouts like Table, Flex, and Grid, you think they’re pretty advanced. They’re all just boxes with this thing.

The principles are the same; in short, they are a more stable and flexible layout than floating.

conclusion

If all the elements of your web page are laid out by positioning, then the physics of the web page is almost the same as the layout of our design tools. That’s why measure in Sketch can export a prototype that looks exactly like the original design. Most of our web pages tend to be document-streaming, so it’s up to the programmers to implement another version of the stream.

Although the design tool has this function, but there is no box force relationship in our web page. But in the eyes of our front-end programmers, everything is just a box. Imagine the difficulty of designing a world full of boxes with a tool that doesn’t even have the concept of boxes.

Of course, there are many design tools that introduce the concept of a box. But you give hydrangfang girl a knife to kill a pig, this is not so easy to grasp the concept. However, I believe that artificial AI intervention can break this dimension, and the time will come when the design is directly the prototype, and that is when we will be laid off.

Note that the concepts in this article are just a metaphor for CSS layout and do not represent the actual logic of a web page.

BTW, we’re looking for people who are “on the front end of experience”. Click here.