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

This article mainly shows you "how to realize the spacing layout of css", the content is simple and easy to understand, and the organization is clear. I hope it can help you solve your doubts. Let Xiaobian lead you to study and learn this article "how to realize the spacing layout of css".

pitch layout

A spaced layout refers to a placeholder layout in which nodes are arranged from left to right, top to bottom, and spaced at specified intervals within a container. The spacing layout is common in large lists and is one of the most important layouts in my opinion. Why spend some time explaining such a simple layout? Recently, I looked at a lot of CSS code related to spacing layout on Github, although the overall effect seems to be fine, but margin/padding and structure selector are misused, so I want to correct the correct coding of spacing layout from zero to one.

Before entering the coding link, I want to focus on the finishing touch of:nth-child(). Most of you may recognize only the everyday uses of:nth-child(n),:nth-child(2n-1),:nth-child(2n), and:nth-child(xn), but there are other uses you may not have seen. Here I take this opportunity to summarize all uses of:nth-child(), n/x/y represents a positive integer, and the minimum value is 1.

:nth-child(n): Select the nth element

:nth-child(odd): Select odd-numbered elements, equivalent to:nth-child(2n-1)

:nth-child(even): Select even-positioned elements, equivalent to:nth-child(2n)

:nth-child(xn): Select the x* nth element

:nth-child(x-n): Select the first x elements

:nth-child(y-n):nth-child(n+x): Select x-y elements

Analyze all the features of the pitch layout and capture features that are useful for converting features into CSS code.

A: Determine the spacing between containers, using the margin statement

B: Determine the spacing in the container, use padding declaration, and then conveniently declare background-color(this step is easily confused with the previous step, please pay special attention)

C: Determine the distance between nodes near the container boundary and the container, declaring the container using padding instead of using margin to declare nodes (this step illustrates the processing results of the previous step)

D: Confirm the left and right spacing of each row of nodes, and use margin-left/margin-right(choose one from two) to declare nodes.

E: Confirm the distance between the leftmost column node or the rightmost column node and the container. Use margin-left:0 to declare the leftmost column node or margin-right:0 to declare the rightmost column node.

F: Except for the first row node, use margin-top to declare the rest nodes

G: If you want the top and bottom of the container to be blank, use border-top/border-bottom instead of padding-top/padding-bottom

All the steps in series may be confusing, but combined with the following code understanding, I believe you can quickly become familiar with it. Take a row of 3 nodes, a total of 8 nodes as an example, the final effect is three rows and three columns.

1 2 3 4 5 6 7 8.spacing-layout { display: flex; overflow: auto; flex-wrap: wrap; margin-top: 20px; //corresponds to A padding: 20px; //corresponds to B and C // padding-top: 0; //corresponds to G // padding-bottom: 0; //corresponds to G // border-top: 20px solid #f66; //corresponds to G // border-bottom: 20px solid #f66; //corresponds to G width: 700px; //slightly left blank for scroll bars height: 400px; background-color: #f66; li { width: 200px; height: 200px; background-color: #66f; line-height: 200px; text-align: center; font-size: 20px; color: #fff; &:not(:nth-child(3n)) { margin-right: 20px; //corresponds to D and E } &:nth-child(n+4) { margin-top: 20px; //corresponds to F } }} The above is all the content of this article "How to achieve spacing layout in CSS". Thank you for reading it! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!

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.