显示 | display (Flexible Box Layout)

  •   CSS 中文开发手册

    显示 | display (Flexible Box Layout) - CSS 中文开发手册

    该displayCSS属性指定用于渲染元素框的类型。在HTML中，display值，取自用户在HTML中设定的值或来自浏览器/用户默认值。XML中的默认值是inline。

    none允许您关闭元素的显示；当您使用none，所有子元素的显示也会被关闭。文档被呈现为不存在。

    /* <display-outside> values */
display: block;
display: inline;
display: run-in;

/* <display-inside> values */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;
display: subgrid;

/* <display-outside> plus <display-inside> values */
display: block flow;
display: inline table;
display: flex run-in;

/* <display-listitem> values */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;

/* <display-internal> values */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

/* <display-box> values */
display: contents;
display: none;

/* <display-legacy> values */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;

/* Global values */
display: inherit;
display: initial;
display: unset;

    初始值

    inline

    适用于

    所有元素

    遗传

    没有

    媒体

    所有

    计算值

    作为指定的值，除了定位和浮动元素和根元素。在这两种情况下，计算出的值都可能是指定的关键字以外的关键字。

    动画类型

    离散的

    规范的顺序

    形式语法定义的独特的非模糊顺序

    语法

    display属性是使用关键字值指定的。关键字值分为六类：

    <display-outside><display-inside><display-listitem><display-internal><display-box><display-legacy>

    最好使用单个关键字来指定display; 尽管最新的CSS标准允许你组合一些关键字，但浏览器还不能很好地支持。

    值

    <display-outside>关键字指定元素的外部显示类型，这是它在流布局中的形态。它们被定义如下：

    值

    Description

    块

    该元素生成一个块元素框。

    inline

    元素生成一个或多个内联元素框。

    run-in

    该元素生成一个运行框。磨合元素的行为像内联或块，取决于周围的元素。即：如果运行框包含一个块框，与块相同。如果一个块盒在引入框之后，引入框成为块框的第一个嵌入框。如果是内联框，则运行框变成一个块框。

    如果运行框包含一个块，则与块相同。如果一个块在引入框之后，引入框成为块框的第一个嵌入框。如果是内联框，则运行框变成一个块框。

    <display-inside>这些关键字指定元素的内部显示类型，它定义了布局其内容的格式化上下文的类型（假设它是非替换元素）。它们被定义如下：

    值

    描述

    flow

    该元素使用流布局（块内布局）布局其内容。如果其外部显示类型是内联或者插入，并且正在参与块或内联格式化上下文，则它会生成一个内联框。否则，它会生成一个块容器框。根据其他属性的值（例如位置，浮点数或溢出）以及它本身是否参与块或内联格式化上下文，它要么为其内容建立新的块格式上下文，要么将其内容整合到其父格式中上下文。

    flow-root

    该元素生成一个块元素框，建立一个新的块格式上下文。

    table

    这些元素的行为像<table> HTML元素。它定义了一个块级的框。

    flex

    该元素的行为类似于块元素，并根据flexbox模型展示其内容。

    -webkit-FLEX

    别名为flex。

    -moz-box / -webkit-box

    根据过时的Flexbox规范，元素的行为类似于灵活的框。

    grid

    该元素的行为像块元素，并根据网格模型展示其内容。

    subgrid

    如果父元素具有display：grid，则元素本身及其内容按照网格模型进行布局。

    ruby

    该元素的行为像一个内联元素，并根据ruby格式化模型布局其内容。它的行为像相应的<ruby> HTML元素。

    <display-listitem>

    元素为内容和一个单独的列表项行内框生成一个块框。

    如果未指定<display-inside>值，则主框的内部显示类型默认为flow。如果未指定<display-outside>值，则主框的外部显示类型默认为block。

    <display-internal>

    一些布局模型，如table和ruby，有一个复杂的内部结构，有几个不同的角色，他们的子代和后代可以填补。本节定义了那些“内部”显示值，这些值仅在特定布局模式中有意义。

    除非另有规定，使用这些显示值的元素的内部显示类型和外部显示类型都设置为给定的关键字。

    值

    描述

    table-row-group

    这些元素的行为就像<tbody> HTML元素

    table-header-group

    这些元素的行为像<thead> HTML元素。

    table-footer-group

    这些元素的行为像<tfoot> HTML元素。

    table-row

    这些元素的行为就像<tr> HTML元素。

    table-cell

    这些元素的行为像<td> HTML元素。

    table-column-group

    这些元素的行为像<colgroup> HTML元素。

    table-column

    这些元素的行为像<col> HTML元素。

    table-caption

    这些元素的行为像<caption> HTML元素。

    ruby-base

    这些元素像<rb> 元素。

    ruby-text

    这些元素的行为像<rt>元素。

    ruby-base-container

    这些元素的行为就像生成为匿名框的<rbc>元素一样。

    ruby-text-container

    这些元素的行为像<rtc>元素。

    <display-box>这些值定义元素是否生成显示框。

    值

    描述

    contents

    这些元素本身并不产生特定的盒子。他们被他们的伪箱子和他们的子箱子取代。

    none

    关闭元素的显示，使其对布局没有影响（文档呈现为元素不存在）。所有的后代元素也关闭了他们的显示。要使元素占用通常需要的空间，但是实际上不需要渲染任何东西，请改为使用可见性属性。

    <display-legacy> CSS 2对该display属性使用了单关键字语法，要求单独的关键字用于相同布局模式的块级别和内联级别。它们被定义如下：

    值

    描述

    inline-block

    该元素生成一个块元素框，它将与周围的内容一起流动，就好像它是一个单行内嵌框（行为很像被替换的元素）。它等价于内联流根。

    inline-table

    内联表值在HTML中没有直接映射。它的行为像一个<table> HTML元素，但是作为一个内联框，而不是一个块级框。表格框内是一个块级的上下文。这相当于内联表格。

    inline-flex

    该元素的行为像一个内联元素，并根据flexbox模型展示其内容。这相当于内联flex。

    -webkit-inline-flex

    内联flex的别名。

    -moz-inline-box / -webkit-inline-box

    该元素按照过时的Flexbox规范表现得像一个内联灵活框。

    inline-grid

    元素的行为像一个内联元素，并根据网格模型展示其内容。

    形式语法

    [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>where 
<display-outside> = block | inline | run-in
<display-inside> = flow | flow-root | table | flex | grid | subgrid | ruby
<display-listitem> = list-item && <display-outside>? && [ flow | flow-root ]?
<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container
<display-box> = contents | none
<display-legacy> = inline-block | inline-list-item | inline-table | inline-flex | inline-grid

    实例

    隐藏元素

    HTML内容

    <p>Visible text</p>
<p class="secret">Invisible text</p>

    CSS内容

    p.secret {
  display: none;
}

    结果

    查看活动示例

    规范

    Specification

    Status

    Comment

    CSS Display Module Level 3The definition of 'display' in that specification.

    Working Draft

    Added run-in, flow, flow-root, contents, and multi-keyword values.

    CSS Ruby Layout Module Level 1The definition of 'display' in that specification.

    Working Draft

    Added ruby, ruby-base, ruby-text, ruby-base-container, and ruby-text-container.

    CSS Grid LayoutThe definition of 'display' in that specification.

    Candidate Recommendation

    Added the grid box model values.

    CSS Flexible Box Layout ModuleThe definition of 'display' in that specification.

    Candidate Recommendation

    Added the flexible box model values.

    CSS Level 2 (Revision 1)The definition of 'display' in that specification.

    Recommendation

    Added the table model values and inline-block.

    CSS Level 1The definition of 'display' in that specification.

    Recommendation

    Initial definition. Basic values: none, block, inline, and list-item.

    浏览器兼容性

    Feature

    Chrome

    Edge

    Firefox (Gecko)

    Internet Explorer

    Opera

    Safari (WebKit)

    none, inline and block

    1.0

    (Yes)

    1.0 (1.7 or earlier)

    4.0

    7.0

    1.0 (85)

    inline-block

    1.0

    (Yes)

    3.0 (1.9)

    5.54

    7.0

    1.0 (85)

    list-item

    1.0

    (Yes)

    1.0 (1.7 or earlier)

    6.0

    7.0

    1.0 (85)

    run-in

    1.0 5

    (Yes)

    No support

    8.0

    7.0

    1.0 (85)5

    4.0 Removed in 32

    5.0 (532.5) Removed in 8.0

    inline-table

    1.0

    (Yes)

    3.0 (1.9)

    8.0

    7.0

    1.0 (85)

    table, table-cell, table-column, table-column-group, table-header-group, table-row-group, table-footer-group, table-row, and table-caption

    1.0

    (Yes)

    1.0 (1.7 or earlier)

    8.0

    7.0

    1.0 (85)

    flex

    21.0-webkit 29.0

    (Yes)

    18.0 (18.0)1 20.0 (20.0)

    10-ms8 11

    12.50

    6.1-webkit 9.0

    inline-flex

    21.0-webkit

    (Yes)

    18.0 (18.0)1 20.0 (20.0)

    10-ms8 11

    12.50

    6.1-webkit

    grid

    57

    (Yes)-ms

    45.0 (45.0)6

    10.0-ms

    44

    TP

    inline-grid

    57

    (Yes)-ms

    45.0 (45.0)6

    10.0-ms

    44

    TP

    subgrid

    ?

    No support

    ?

    No support

    ?

    ?

    ruby, ruby-base, ruby-text, ruby-base-container, ruby-text-container

    ?

    (Yes)

    34.0 (34.0)3

    ?

    ?

    ?

    contents

    587

    No support

    37 (37)2

    No support

    No support

    No support

    -webkit-box

    (Yes)

    ?

    45.0 (45.0)

    No support

    (Yes)

    ?

    -webkit-inline-box

    (Yes)

    ?

    48.0 (48.0)

    No support

    (Yes)

    ?

    -webkit-flex, -webkit-inline-flex

    (Yes)

    ?

    48.0 (48.0)

    No support

    (Yes)

    ?

    flow-root

    58

    ?

    53.0 (53.0)

    ?

    45

    ?

    Feature

    Android Webview

    Chrome for Android

    Edge

    Firefox Mobile (Gecko)

    IE Phone

    Opera Mobile

    Safari Mobile

    Basic support

    (Yes)

    (Yes)

    (Yes)

    ?

    ?

    (Yes)

    7.0-webkit

    grid

    57

    57

    ?

    ?

    ?

    44

    ?

    inline-grid

    57

    57

    ?

    ?

    ?

    44

    ?

    flow-root

    58

    58

    ?

    ?

    ?

    45

    ?

    		 
  •   CSS 中文开发手册
    转载请保留页面地址：https://www.breakyizhan.com/css/32033.html
    【推广】 免费学中医，健康全家人
    原文地址：https://www.cnblogs.com/breakyizhan/p/13216380.html