The CSS display attribute is mandatory

Why should I write a paper for display?

The display property is familiar to all of you at the front end. A few years ago, “What’s the difference between display block, inline, inline-block?” This should be a must-ask interview question. Later, the “Flex” elastic box was added to the commonly used properties. No matter to the front end novice or god, this attribute is the most simple, basic, must know will. But do we really understand this property?

Have you ever wondered why this property is defined? Why does inline-block have both block and inline characteristics?

The answers are all in the criteria.

This article is a detailed interpretation of the display attribute in the standard.

The meaning of the display

The display CSS property specifies the display type of the element. It contains two basic characteristics that specify how the element generates the box model:

• The outer display type defines how the element itself participates in the processing of the streaming layout
• The inner display type defines how the children of an element are laid out.

Keyword value:

<display-outside>

These keywords specify the external display type of the element, which is essentially its role in the streaming layout. The most familiar keywords block and inline are of this type.

• block
• inline
• run-in

  • This property is partially supported by browsers. Chrome early support, not since

  • Reference:

    • Swordair.com/css-display…
    • www.zhangxinxu.com/wordpress/2…
    • Caniuse.com/#search=run…

<display-inside>

These keywords specify the internal display type of the element, and they define the type of the formatting context for the content inside the element (assuming non-replaceable elements).

• flow

  • If its outer display type is inline or run-in and it is participating in a block or inline formatting context, it generates an inline box; Otherwise a block container box is generated
  • Depending on the value of other attributes (such as position, float, or overflow) and whether it itself participates in a block or inline formatting context, it either establishes a new block formatting context (BFC) for its content or integrates its content into its parent formatting context
  • (this is the default when inline and block are set)

• flow-root

  • This element generates a block element box that sets up a new block formatting context and defines where formatting root is located
  • Application:
    • clearfix
    • Compatible methods:

.wrapper{
   display: flow-root;
}
@supports not (display:flow-root) {
   .wrapper::after {
      content: ' ';
      display: table;
      clear:both; }}Copy the code

• table

  • Behaves like HTML<table>Elements. A block-level box is defined

• flex

  • The element behaves like a block element and lays out its content according to the Flexbox model

• grid

  • The element behaves like a block element and lays out its content according to the Grid Model

• ruby

  • This element behaves like an inline element and lays out its content according to the Ruby formatting model. It behaves like the corresponding HTML element
  • <ruby>Elements are used to display phonetic or character annotations of East Asian scripts

<display-listitem>

Change the external display type of this element to a Block box and the internal display type to multiple List-Item inline boxes.

The list-item keyword generates a ::marker pseudo-element for the element, whose content is specified by list-style attributes such as bullet points

A single value of a list-item causes the element to behave like a list item. Can be used with list-style type and list-style position

The list-item attribute can also be used in combination with any

keyword and with the flow or flow-root keyword

Note:

In browsers that support a two-value syntax, if inner value is not specified, the default is flow. If outer value is not specified, the main box has externally displayed blocks

<display-internal>

• Layout models like Table and Ruby have complex internal structures, so their children and subsequent elements can have multiple roles. This type of keyword is used to define these “internal” display types and only makes sense within these specific layout models.
• Unless otherwise stated, the internal and external display types of elements that use these display values are set to the given key.
  • A pile of table – XXX
  • A pile of ruby – XXX

<display-box>

These values define whether the element fully generates the display box.

• contents

  • These elements themselves do not generate specific boxes. They are replaced by their contents, including their pseudo-elements and their children.

  

• none

  You’re all familiar with this

<display-legacy>

CSS 2 uses a single-keyword syntax for display properties, and a separate keyword is required for block level and inline level variants of the same layout mode.

The familiar inline-* is of this type.

• inline-block

  • The element produces a block element box that, like an inline box (which behaves more like a replaced element), can be incorporated into the surrounding content.
  • Equivalent to inline flow-root

• inline-table

  • In HTML, inline-table has no direct correspondence. It appears as an HTML element, but as an inline box that is different from a block-level box. Inside the table box is a block-level context.
  • Equivalent to inline table

• inline-flex

  • The element is represented as an inline element and the content is laid out using an elastic box model.
  • Equivalent to Inline Flex

• inline-grid

  • The element is represented as an inline element and the content is laid out using a grid model.
  • Equivalent to an inline grid

<display-xul> Gecko 62 has been discarded

Only used by Firefox, mainly for XUL document style.

conclusion

The two-keyword display, though defined by the specification, is not widely supported by browsers. Until better support is available, you can use the display-Legacy method to get the same result with a single keyword value

reference

Developer.mozilla.org/zh-CN/docs/… Drafts.csswg.org/css-display…