• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • display

    display 属性可以设置元素的内部和外部显示类型 display types。元素的外部显示类型 outer display types 将决定该元素在流式布局中的表现(块级或内联元素);元素的内部显示类型 inner display types 可以控制其子元素的布局(例如:flow layout,grid 或 flex)。

    示例

    /* <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-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;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持display

    语法

    display:[<display-outside>||<display-inside>] |<display-listitem>| <display-internal>| <display-box>| <display-legacy>

    display 属性使用关键字取值来指定,关键字取值被分为六类:

    <display-outside>

    这些关键字指定了元素的外部显示类型,实际上就是其在流式布局中的角色(即在流式布局中的表现)。

    • block:元素生成一个块元素框,在正常流中生成元素前后的换行符。
    • inline:元素生成一个或多个内联元素框,这些框不会在其前后生成换行符。在正常流中,如果有空间,下一个元素将位于同一行上
    • run-in:元素生成一个磨合盒。如果定义为display:run-in框的元素的相邻同级是块框,则run-in框将成为它后面的块框的第一个内联框。Run-in元素的作用类似于inline或block,具体取决于周围的元素。即:如果磨合框包含块框,则与块相同。如果块框在运行框之后,则运行框将成为块框的第一个内联框。如果后面有一个内联框,则运行框将成为块框。此项还处于实验阶段

    <display-inside>

    这些关键字指定了元素的内部显示类型,它们定义了该元素内部内容的布局方式(假定该元素为非替换元素 non-replaced element)

    • table:这些元素的行为类似于HTML<table>元素。它定义了块级别的框。
    • flex:元素的行为类似于块元素,并根据flexbox(伸缩盒子)模型布局其内容。
    • grid:元素的行为类似于块元素,并根据grid(网格模型)布置其内容。
    • flow:元素使用flow(流)布局(块和内联布局)布局其内容。如果它的外部显示类型是inline或run-in,并且它参与了块或内联格式上下文,那么它将生成一个内联框。否则,它将生成一个块容器盒。此项还处于实验阶段
    • ruby:元素的行为类似于一个内联元素,并根据ruby格式模型布局其内容。它的行为类似于相应的HTML<ruby>元素。此项还处于实验阶段

    <display-listitem>

    将这个元素的外部显示类型变为block盒,并将内部显示类型变为多个list-iteminline盒。

    列表项的单个值将导致元素的行为类似于列表项。这可以与列表样式类型和列表样式位置一起使用。

    列表项还可以与任何<display-outside>关键字和flowflow-root<display-inside>关键字组合使用。

    <display-internal>

    有些布局模型(如tableruby)有着复杂的内部结构,因此它们的子元素可能扮演着不同的角色。这一类关键字就是用来定义这些“内部”显示类型,并且只有在这些特定的布局模型中才有意义。

    • 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>HTML元素。此项还处于实验阶段
    • ruby-text:这些元素的行为<rt>HTML元素。此项还处于实验阶段
    • ruby-base-container:这些元素的行为<rbc>HTML元素。此项还处于实验阶段
    • ruby-text-container:这些元素的行为<rtc>HTML元素。此项还处于实验阶段

    <display-box>

    这些值决定元素是否使用盒模型。

    • none:关闭元素的显示,使其对布局没有影响(呈现文档时就像元素不存在一样)。所有子元素的显示也已关闭。若要使元素占用其通常占用的空间,但不实际呈现任何内容,请改用visibility属性
    • contents:这些元素本身不会生成特定的长方体。它们被它们的伪框和子框所取代。请注意,csssdisplaylevel3规范定义了contents值如何影响“异常元素”——这些元素不是纯粹由CSS框概念(如被替换的元素)呈现的元素。详见附录B:显示效果:异常元素的内容。由于浏览器中的可访问性,当前浏览器中的可访问性将不会从该元素中删除。此项还处于实验阶段

    <display-legacy>

    CSS 2 对于 display 属性使用单关键字语法,对于相同布局模式的block级和inline级变体需要使用单独的关键字。

    • inline-block:元素生成一个块元素框,它将与周围的内容一起流动,就像它是一个单独的内联框一样(其行为与被替换的元素非常相似)。它相当于flow-root.
    • inline-table:内联表值在HTML中没有直接映射。它的行为类似于HTML<table>元素,但它是一个内联框,而不是块级的框。表框内是块级上下文。它相当于inline table.
    • inline-flex:元素的行为类似于一个内联元素,并根据flexbox模型布局其内容。它相当于 inline flex.
    • inline-grid:元素的行为类似于内联元素,并根据网格模型布局其内容。它相当于 inline grid.
    初始值inline
    适用元素所有元素
    是否是继承属性
    适用媒体all
    计算值作为指定值,但定位元素和浮动元素以及根元素除外。在这两种情况下,计算值可以是指定的关键字以外的关键字。
    Animation typediscrete

    display 的“遗留”取值

    Level 3 规范详细说明了display属性的两类取值——显式地指定了外部和内部显示属性的规范——但是还没有被浏览器广泛支持。

    display-legacy 方法允许使用单个关键字达到相同效果,开发者应该在双关键字取值被广泛支持之前采用这个方法。举例来说,你可以这样指定 inline flex 容器:

    .container {
        display: inline-flex;
    }
    

    也可以用两个关键字来指定。

    .container {
        display: inline flex;
    }
    

    可访问性相关

    display: none;

    display设置为none会将元素从可访问性树中移除。这会导致该元素及其后续元素不再被屏幕阅读技术访问。

    如果你只是想从视觉上隐藏这个元素,对可访问性更加友好的做法是使用属性组合来将其从屏幕上隐藏,但仍可以被屏幕阅读器等辅助技术解析。

    display: contents;

    浏览器会将所有将display设置为contents的元素从可访问性树中移除。这会导致该元素及其后续元素不再被屏幕阅读技术访问。

    • Display: Contents Is Not a CSS Reset | Adrian Roselli
    • More accessible markup with display: contents — hiddedevries.nl

    Tables

    <table>元素的display值修改为block,gridflex会修改其在可访问性树中的表示,这会使得表格不能被屏幕阅读技术正常处理。

    上篇:left

    下篇:float