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

This article focuses on "how to understand the three new features of CSS3 grid". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to understand the three new features of CSS3 Grid.

A brief history of grid

Once upon a time, our layout was a mess. Tables and frames are the main tools for creating multi-column layouts. Although they can finish the work (but it is actually very bad).

Focus on today. HTML and CSS have become very complex, and the popularity and complexity of Web designs are increasing with each passing day. The old layout method we used is obviously already out. However, a problem left over from history surfaced: multi-column layout.

To make matters more complicated, our page width is no longer static. Responsiveness is very popular, so we tend to be based on percentage column widths. A simple grid based on a fixed 960 pixel width no longer works-we need a fluid grid.

There is a problem with the floating method of solving columns in the CSS2 specification. To prevent the parent element from breaking your layout, we need to add clearfix. In this way, the problem of high collapse of the parent element is corrected (the floating element deviates from the standard stream, and the parent element thinks that the floating resource does not exist). Most of us accept this method, but many people still think of it as a kind of hack.

The method through inline-box is not common, but it still exists. Inline elements remain in one line, and they are arranged in natural order. When one line is full, the following elements naturally fold to the next line. But because he behaves as a text, his behavior is similar to the text. This means that you have to avoid white space between HTML elements (spaces, tab, line breaks...) . Inline-block is not designed for this, and it doesn't work very well.

Of the two methods, the floating method is more reliable. That's why it's more popular and ranks first. However, after creating multiple columns, we find that we need to compress the content again because we need some padding distance. This leads to the final problem: the box model.

What is the box model? to put it simply, the actual size of an element includes: height / width + inner margin + width of the edge. The outside does not make the box bigger, but only increases the gap between itself and other elements. So when you set the width, say 25%, the actual width of the box is much larger than this, which means there is not enough room for four elements in a row.

There are different solutions to this annoying problem: negative margins, nested elements-- all I know. They all need additional CSS or DOM elements, which count as hack methods. Let's face it, there is no good way to solve the grid in CSS2.

Today, however, CSS3 provides good support, and the specification adds several new features specifically for the grid. What are these features? How do we use them? Let's have a look.

2. Box-sizing: border-box

One of the problems that has been solved is the nature of the extension box model. You can solve this problem by setting the value of box-sizing to border-box. The distance between the edge and the inner margin is also counted in the width attribute by reducing the width of the content.

HTML

The code is as follows:

Col one

Col two

Col three

Col four

CSS

The code is as follows:

.row: after {

Clear: both

Content:''

Display: block

}

.column {

-webkit-box-sizing: border-box

-moz-box-sizing: border-box

Box-sizing: border-box

Float: left

Min-height: 8em

Overflow: hidden

Padding: 2em

Width: 25%

}

.column:nth-child (1) {background-color: # 9df5ba;}

.column:nth-child (2) {background-color: # 9df5d7;}

.column:nth-child (3) {background-color: # 9df5f5;}

.column:nth-child (4) {background-color: # 9dd7f5;}

Effect.

Although this works well, we still need to use floats, and we still need to clear floats. In addition, we can only use the inner margin as the space of the element, and the outer margin no longer works. This means that there is no actual space between fast elements, but its content. Although this is very useful for many designs, it still feels like a small mistake.

1.Firefox 1

2.Chrome 1

3.IE 8

4.Opera 7

5.Safari 3

3. Width: calc (percentage-distance)

Another great choice is to use the calc () function. It allows us to calculate the true width of an element without relying on JavaScript-it can be in different units!

HTML

The code is as follows:

Col one

Col two

Col three

Col four

CSS

The code is as follows:

.row {margin-left:-1em;}

.row: after {

Clear: both

Content:''

Display: block

}

.column {

Float: left

Margin-left: 1em

Min-height: 8em

Padding: 1em

Width:-webkit-calc (25%-3em)

Width:-moz-calc (25%-3em)

Width: calc (25%-3em)

}

.column:nth-child (1) {background-color: # 9df5ba;}

.column:nth-child (2) {background-color: # 9df5d7;}

.column:nth-child (3) {background-color: # 9df5f5;}

.column:nth-child (4) {background-color: # 9dd7f5;}

Effect:

The ability to recalculate the actual size is a great choice, but unfortunately, we still need to float, and we also need to column the container for negative margins. Ditto, a great choice, but there are still some flaws.

1.Firefox 4

2.Chrome 19

3.IE 9

4.Opera?

5.Safari 6 (appears to be a little buggy)

IV. Flexbox

A scalable layout box is an element with specific configuration behavior-- a bit like a table. Is this true? Yeah, that's right. The behavior of the table is actually quite good because its display varies according to its content. But table layouts are no longer used, so table tags are not an option.

At first, the telescopic box seemed to take years to get complicated. There are many attributes that are difficult to understand, especially for people like me who are not good at speaking in English. Fortunately, Chirs Coyier wrote a great guide to telescopic boxes, which I must mention.

HTML

The code is as follows:

Col one

Col two

Col three

Col four

CSS

The code is as follows:

.row {

Display:-webkit-flex

-webkit-flex-direction: row

-webkit-flex-wrap: nowrap

-webkit-justify-content: space-between

Display: flex

Flex-direction: row

Flex-wrap: nowrap

Justify-content: space-between

}

.column {

Margin: 0.5em

Min-height: 8em

Padding: 1em

Width: 25%

}

.column:nth-child (1) {background-color: # 9df5ba;}

.column:nth-child (2) {background-color: # 9df5d7;}

.column:nth-child (3) {background-color: # 9df5f5;}

.column:nth-child (4) {background-color: # 9dd7f5;}

Effect:

At this point, I believe you have a deeper understanding of "how to understand the three new features of CSS3 grid". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.