You know there are four ways to write the word “hui,” but did you know there are 32 ways to write display? Today we’re going to let you master display once and for all and never worry about it again.

In terms of large classification, the 32 ways of writing display can be divided into 6 categories, plus a global class, a total of 7 categories:

  • The external value
  • Internal value
  • The list of values
  • Attribute values
  • According to the value
  • Mixed value
  • Global values

The external value

External values are values that directly affect the external performance of an element, not the performance of its children and grandchildren.

display: block;

is the default value. The most basic block-level element, which belongs to the concept of CSS beginners know, as long as the container type element is basically this value. In addition to

, there are

through

,

,

,

,

,

,

all of which are naturally this value.

display: inline;

, , , and and < I > in ancient HTML are all of this type.

display: run-in;

It’s kind of a weird value, nobody usually uses it, but you can figure it out. With the exception of Internet Explorer and Opera, all major browsers including Chrome, Safari, and Firefox have ignored it. In plain English, there is nothing mysterious about this. It means that if we command an element run-in, it means “break in”! So this element goes straight to the next line. Like this:

It looks something like this:

<div class="a">aaa</div>
<div class="b">bbb</div>
.a {
  font-size: 36px;
  display: run-in;
}
Copy the code

How does that help? We can achieve this effect by setting font size to span. Let IE play with itself. To tell the truth, in today’s human resources so precious, IE product manager do not know whether the brain is wrong, do not send engineers to achieve so many more important features, but spend time to do such a useless thing, isn’t the engineer’s time money? No wonder market share has been slipping year after year.

Internal value

So, having talked about external values, let’s look at internal values. This group of values is more interesting, in today’s CSS3 in full swing, you want to play these values, afraid is where also can’t find a job. The inner values are mainly used to regulate the arrangement of the subordinate sons of the elements, either in an S shape or B shape.

display: flow;

Unclear meaning, lab stage products, Chrome does not support. If that’s not enough to convince you not to touch it for now, try to understand the English text below:

If its outer display type is inline or run-in, and it is participating in a block or inline formatting context, then it generates an inline box. Otherwise it generates a block container box.

display: flow-root;

Unlike flow, flow-root is increasingly used because it can hold up the height of the block-level elements that you float. The outer container would have had height, like this:

    <div class="container container1">
      <div class="item"></div>
      Example one
    </div>
    .container {
        border: 2px solid #3bc9db;
        border-radius: 5px;
        background-color: #e3fafc;
        width: 400px;
        padding: 5px;
    }
    .item {
        height: 100px;
        width: 100px;
        background-color: #1098ad;
        border: 1px solid #0b7285;
        border-radius: 5px;
    }Copy the code

And it turns out because you want that line to go up, you add a float: left; The result is this, the height of the outer container dropped, this is not a common mistake many people make, right?

Now we add display: flow-root; Take a look again:

Now, the height of the outer container is back. Is that a vertical effect?

M: We use clear: both; Wouldn’t that be the same thing?

.container::after {
    content: '';
    clear: both;
    display: table;
}
Copy the code

Xiao Ming, please go out! Display: flow-root; Clear: both; !

display: table;

This attribute, along with the eight other table-related attributes below, controls how divs look like tables. Since we don’t like

, we want to replace all
tags. What’s so good about

? It’s just a line wrap, but you could make a

tags with
tag and replace it all with display: block; It can also fold automatically, but with a little trouble.

On the display: table; “, we can refer to this article, here is not detailed.

display: flex;

Type on the blackboard and underline! As the new generation of front end engineers, this attribute is something you must know by heart in your corset, or, no, in your chest. display: flex; And a set of attributes associated with it: Flex-direction, flex-wrap, flex-flow, context-content, align-items, align-content, and all of those are things that you need to keep grinding. The property, born in 2009, is as much an industrial revolution as the steam engine in CSS, marking the end of horse-drawn float.

For details, Chinese speakers can refer to this article by Ruan Yifeng, but IN my opinion, this article on CSstrick is better formatted. None of the graphics fully capture flex, so here’s one of my favorites:

display: grid;

Can flex suck? Grid will be more hanging oh! Maybe this is the point of the next front-end interview!

Grid layout, Chinese translation for grid layout. There are two important points to learn about grid layout: One is that grid layout introduces a whole new unit: Fr is the abbreviation of fraction, so from now on, in addition to px, EM, REM, percentage and vw, VH, you will have another hidden weapon in your Arsenal, FR. In order to use grid well, you must fully understand FR. The other important thing is the slash operator, which is not a fraction. It represents the starting position and the ending position. Let’s say 3/4, that doesn’t mean 3/4, that means an element starts at line 3 and ends at line 4, but doesn’t include line 4.

Again, there’s a whole bunch of side door attributes associated with the grid. At the same time must master. Grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-template, grid-template-columns, grid-template-rows, grid-template-areas, grid-gap, grid-column-gap, grid-row-gap, grid-auto-columns, grid-auto-rows, The grid – auto – flow, the grid – the column, the grid – row. I can’t go into detail. There’s a whole article to be written about this. For details, please refer to this article on CSstrick, which is very detailed and very clear.

display: ruby;

The Ruby value is actually a very useful thing for us Asians, but it is currently not well supported in browsers other than Firefox. In short, display: Ruby; Is used to make something like this:

Good stuff, right? If it can be used, it can greatly promote primary education in our country. Unfortunately, we can’t use it right now.

Ruby this word in English means ruby, but in Japanese is the sign of the translation into the Chinese side note mark meaning, our Chinese side note mark is Chinese pinyin. It can be expected that the standard maker must be Japanese, if we Chinese, then the label is not Ruby, but pinyin. There is also a Ruby language that was invented by a Japanese person, which is not the same as the Ruby in HTML, don’t get confused.

Ruby’s syntax looks like this:

display: subgrid;

On August 6, 2015, the W3C’s Cascading Style Sheets Working Group released a Working draft of the CSS Grid Layout Module Level 1. In this draft, we specified the display: grid; The scheme. And display: subgrid; Is part of the informal CSS Grid layout module level 2 released on November 9, 2017. So this is a very new draft, and there has been no end of controversy around it.

The general idea of subgrid is that small grids can be set in large grids without affecting each other. But if I can subgrid my grid, what if I want to subgrid my grid? Subsubgrid? Besides, it’s grid: subgrid; Or display: subgrid; There is no consensus on this either. If you are interested in this series of disputes, you can read this article. If you are good at English, you can read this article.

The list of values

display: list-item;

display: list-item; And display: table; Again, this is the result of a bunch of guys who hate HTML tags and want to use

to write all their HTML.

See, what you can do with

  • , it can do with
    , that’s what it does.

Attribute values

Attribute values are usually attached to the main value, such as display: table; Display: table-row-group; display: table-row-group; And so on, but not absolutely. For what they do, the principal values are sufficient.

display: table-row-group;

See display: table; .

display: table-header-group;

See display: table; .

display: table-footer-group;

See display: table; .

display: table-row;

See display: table; .

display: table-cell;

See display: table; . This attribute is worth mentioning in detail because it can be used independently for vertical centering of elements of variable height. See Xinxu Zhang’s article for details. The effect is shown below:

display: table-column-group;

See display: table; .

display: table-column;

See display: table; .

display: table-caption;

See display: table; .

display: ruby-base;

See display: ruby; .

display: ruby-text;

See display: ruby; .

display: ruby-base-container;

See display: ruby; .

display: ruby-text-container;

See display: ruby; .

According to the value

MDN calls it

values, and I call it display value, just to make it easier to understand.

display: contents;

This is probably the most exciting event of the beginning of 2018: Chrome 65 will finally support display: contents; ! Firefox has long supported this feature, while Chrome is only now starting to support it, so what does it actually do? You may be disappointed with the results. The original layout looked like this:

You add display: contents to the middle div; After that, it looks like this:

So that’s display: contents; The child element has the same layout as the parent element, that’s all.

display: none;

Is there more to this famous value?

Mixed value

display: inline-block;

On the display: inline – block; I’m afraid as long as do more than 3 days of front-end engineers should know. Without further ado, let’s conclude with a famous image:

display: inline-table;

If you can understand inline-block, you can understand inline-table. Display a table in the row like this:

display: inline-flex;

We don’t have to say much about that, do we? As above, make an elastic layout within the row, see display: flex; .

display: inline-grid;

Same as above, for grid layout in line, see display: grid; .

Global values

These values are not exclusive to the display property, almost any other property can be used, listed here to make up the numbers.

display: inherit;

Inherits the display attribute of the parent element.

display: initial;

Revert to the original display property of the browser, regardless of the parent element Settings.

display: unset;

Unset combines inherit and Initial. If the parent element is set, the parent element is used; if the parent element is not set, the browser default is used. It is best to look directly at the picture:

conclusion

So that’s 32 ways to write display in CSS. So much talk, I wonder how much you remember? In fact, it is not difficult to simply understand the value of each display attribute, but the difficulty is to integrate and apply the right value in the right place. After all, our goal is to make the code short, not long. If you are afraid that you do not remember clearly, please save this article, you may need it some day.