如何理解Css中的Display属性

display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline。

display 属性可以设置元素的内部和外部显示类型。元素的外部显示类型将决定该元素在流式布局中的表现，比如：块级、内联元素；元素的内部显示类型可以控制其子元素的布局，比如：table、flow layout、grid、flex。

display的属性

CSS 1

  • display: none

  • display: block

  • display: inline

  • display: list-item

CSS 2.1

  • display: inline-block

  • display: table

  • display: inline-table

  • display: table-*

CSS 3

  • display: inline-list-item

  • display: flex

  • display: box

  • display: inline-flex

  • display: grid

  • display: inline-grid

  • display: ruby

  • ...

none

属性值为 none 的元素，既不会占据空间，也无法显示，相当于该元素不存在。一些特殊元素的默认 display 值是它，例如 script、style。

与 visibility 属性的区别： none 不会保留元素本该显示的空间，但是 visibility: hidden; 还会保留。

block

display 属性值为 block 的元素，称为块元素。一个块级元素会新开始一行并且尽可能撑满容器，特性如下：

  • 元素独占一整行

  • 元素可以设置宽度和高度

  • 元素默认宽度100%，默认高度自适应

  • 可以设置 margin 与 padding 属性

常见的块级元素有：

  • div：标准的块级元素

  • ol、ul、dl、dir

  • p、h1 - h6

  • hr

  • fieldset、form、table

  • noframes、noscript、address、blockquote、center 、pre、isindex、menu

inline

display 属性值为 inline的元素，称为行内元素或内联。一个行内元素与其他行内元素在同一行上，特性如下：

  • 可与其他行内元素在同一行上

  • 元素宽高不可改。宽度、高度自适应，即内容文字或者图片的宽高

  • text-align 属性设置无效

  • 不可以设置 margin 与 padding 属性

  • line-height 会让 inline 元素居中

常见的行内元素：

  • span：标准的行内元素

  • a、label 、img

  • br

  • abbr、cite、code

  • b、em 、i、strong 、font

  • big、small、acronym

  • dfn 、kbd、q、s、u、sub、sup、strike 、bdo、samp、tt 、var、kbd

  • q、s、u、sub、sup、strike 、bdo、samp、tt 、var

空白符带来的问题

两个 inline 元素之间出现了奇怪的间隔：

<div class="element_box2">
    <div class="element_item2">
        <img src="https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/nice/1bf18986c7786cadc5257b92c474c4fe.jpg">
        <img src="https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/nice/20190419141710_4735vxaqwhri_small.jpg">
    </div>
</div>

查看DEMO

解决方法：

方法一：两个 inline 元素写在一行，即，不要有任何字符，包括空白符。

<img src="https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/nice/1bf18986c7786cadc5257b92c474c4fe.jpg"><img src="https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/nice/20190419141710_4735vxaqwhri_small.jpg">

查看DEMO

方法二：将 inline 元素转换为 inline-block 元素

方法三：设置父元素的 font-size: 0

list-item

此类型可以将多个元素作为列表来显示，同时在元素的开头添加列表的标记，可以设置 list-style-position、list-style-type属性。

另有：display: inline-list-item，chrome 测试，属性无效？？

<style>
    .item_03 span {
        display: list-item;
        list-style-position: inside;
        list-style-type: cambodian;
    }
</style>
<section class="item_03">
    <span>世上最凄绝的距离是两个人本来距离很远，互不相识，</span>
    <span>忽然有一天，他们相识，相爱，距离变得很近。</span>
    <span>然后有一天，不再相爱了，本来很近的两个人，变得很远，甚至比以前更远。</span>
</section>

查看DEMO

inline-block

display 属性值为 inline-block的元素，称为行块元素，同时具有 block 的宽高特性又具有 inline 的同行元素特性。

  • 元素可以设置宽度和高度

  • 元素可以和其他元素共处一行

  • 元素默认宽度自适应，默认高度自适应

  • 可以设置 margin、padding、text-align 属性

常见的行块元素：input、textarea、select、button

table

display 值为 table，此元素会作为块级表格来显示（类似table），表格前后带有换行符。

table-cell

table表格中的单元格有一些特性，我们可以借助display:table-cell属性实现以下内容：

垂直居中

单元格的一个特性，可以设置 vertical-align 来控制内容的垂直对齐方式：

<style>
    .box_04 {
        display: table-cell;
        width: 600px;
        height: 300px;
        border: 1px solid #0aa;
        vertical-align: middle;
        text-align: center;
    }
    .box_04 img {
        height: 200px;
    }
</style>
<section class="box_04">
    <img src="https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/nice/20190419141710_4735vxaqwhri_small.jpg">
</section>

查看垂直居中DEMO

自适应布局

左侧图片用float: left，右侧文案用 display: table-cell。当图片宽度变化时，文案宽度会自动调节，终始保持占满整个父元素宽度。

<style>
    .box_05 img {
        float: left;
        height: 120px;
        margin-right: 20px;
    }
    .item_05 {
        display: table-cell;
        width: 600px;
        padding: 20px;
        border: 1px solid #0aa;
    }
</style>

<section class="box_05">
    <img src="https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/nice/20190419141710_4735vxaqwhri_small.jpg">
    <div class="item_05">
        曾经在某一个瞬间，我们以为自己长大了，有一天，我们终于发现，长大的含义除了欲望还有勇气和坚强，以及某种必须的牺牲。曾经在某一个瞬间，我们以为自己长大了，有一天，我们终于发现，长大的含义除了欲望还有勇气和坚强，以及某种必须的牺牲。曾经在某一个瞬间，我们以为自己长大了，有一天，我们终于发现，长大的含义除了欲望还有勇气和坚强，以及某种必须的牺牲。曾经在某一个瞬间，我们以为自己长大了，有一天，我们终于发现，长大的含义除了欲望还有勇气和坚强，以及某种必须的牺牲。曾经在某一个瞬间，我们以为自己长大了，有一天，我们终于发现，长大的含义除了欲望还有勇气和坚强，以及某种必须的牺牲。
    </div>
</section>

查看自适应布局DEMO

等高布局

表格的另一个特点：同一行列表单元格都等高。

<style>
    .box_06 {
        display: table-row;
    }
    .item_06 {
        display: table-cell;
        width: 33.3333%;
        padding: 20px;
    }
</style>
<section class="box_06">
    <div class="item_06" style="background: #e2efed;">曾经在某一个瞬间，我们以为自己长大了，有一天，我们终于发现，长大的含义除了欲望还有勇气和坚强，以及某种必须的牺牲。
    </div>
    <div class="item_06" style="background: #f2f2f2;">
        曾经在某一个瞬间，我们以为自己长大了，有一天，我们终于发现，长大的含义除了欲望还有勇气和坚强，以及某种必须的牺牲。曾经在某一个瞬间，我们以为自己长大了，有一天，我们终于发现，长大的含义除了欲望还有勇气和坚强，以及某种必须的牺牲。曾经在某一个瞬间，我们以为自己长大了，有一天，我们终于发现，长大的含义除了欲望还有勇气和坚强，以及某种必须的牺牲。
    </div>
    <div class="item_06" style="background: #ffdaed;">
        曾经在某一个瞬间，我们以为自己长大了，有一天，我们终于发现，长大的含义除了欲望还有勇气和坚强，以及某种必须的牺牲。曾经在某一个瞬间，我们以为自己长大了，有一天，我们终于发现，</div>
</section>

查看等高布局DEMO

flex

flex是一种弹性布局属性。主要属性有两大类：容器属性和项目的属性。 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

另有inline-flex：将对象作为内联块级弹性伸缩盒显示。

容器属性

  • flex-direction: 属性决定主轴的方向（即项目的排列方向）。

  • flex-wrap: 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

  • flex-flow: 属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

  • justify-content: 属性定义了项目在主轴上的对齐方式。

  • align-items: 属性定义项目在交叉轴上如何对齐。

  • align-content: 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

项目属性

  • order: 定义项目的排列顺序。数值越小，排列越靠前，默认为0。

  • flex-grow: 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

  • flex-shrink: 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

  • flex-basis: 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

  • flex: 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

  • align-self: 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

box

由于某X5浏览器某些版本还不支持最新版的flex布局，所以为了保证良好的运行，建议还是使用display: box，box 和 flex 布局的主要差别如下:

容器属性

  • display: box。该显示样式的新值可将此元素及其直系子代加入弹性框模型中。Flexbox 模型只适用于直系子代。

  • box-orient：horizontal | vertical | inherit。子元素是如何排列的？还有两个值：inline-axis（真正的默认值）和 block-axis，但是它们分别映射到水平和垂直方向。

  • box-pack：start | end | center | justify。设置沿 box-orient 轴的框排列方式。因此，如果 box-orient 是水平方向，就会选择框的子代的水平排列方式，反之亦然。

  • box-align：start | end | center | baseline | stretch

基本上而言是 box-pack 的同级属性。设置框的子代在框中的排列方式。如果方向是水平的，该属性就会决定垂直排列，反之亦然。

项目属性

  • box-flex：0 | 任意整数。该子代的弹性比。弹性比为 1 的子代占据父代框的空间是弹性比为 2 的同级属性的两倍。其默认值为 0，也就是不具有弹性。

grid

即网格布局，将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。

另有：display: inline-grid，作为行内元素的网格布局。

flow-root

元素，无论是内联元素，还是原本就是块级元素，在应用display:flow-root声明后，都会变成块级元素，同时这个元素会建立新的BFC（块级格式上下文）。

与block相对，flow-root 元素 主要区别就是创建了BFC，可以用来清除浮动、阻止外边距折叠。

与其他创建 BFC 的方法相比，flow-root 可以创建无副作用的 BFC。 如：float、postion: absolute 创建 BFC 会改变元素的布局形式；overflow: hidden 会隐藏溢出内容。

ruby

ruby这个取值对于我们亚洲人来说其实是非常有用的一个东西，但是目前除了Firefox以外其它浏览器对它的支持都不太好。简而言之，display: ruby;的作用就是可以做出下面这样的东西：

ruby这个词在英语里的意思是红宝石，但在日语里是ルビ，翻译成中文是旁注标记的意思，我们中文的旁注标记就是汉语拼音。可以想见，这个标准的制定者肯定是日本人，如果是我们中国人的话，那这个标签就不是ruby，而是pinyin了。还有一个ruby语言，发明者也是一个日本人，和html里这个ruby是两码事，不要搞混了。

其他值

ruby-base、ruby-text、ruby-base-container、ruby-text-container

contents、run-in

详情请查看 display的32种写法

相关问题

什么是块级元素？

块级元素指的是 display 值为 block 的元素吗？我知道不少人一直有这样的认知，不过这不完全准确。

块级元素元素包含 display 值为：

  • block

  • list-item

  • table

  • table-*

  • flex

  • position: absolute/fixed 元素，或者 float: left|right 元素，或者根元素，这三都的 display 值会根据以下规则转变：display: inline-table 转变为 display: table，display: inline|inline-block|run-in| table-* 转换为 display: block。

内联盒模型基本概念

内联盒模型主要由四部分组成：内容区域、内联盒子、行框盒子、包含盒子。

  • 内容区域(content area)：是一种围绕文字看不见的盒子。内容区域的大小与 font-size 大小和 font-family 相关，与 line-height 没有任何关系。点击查看字体字号和盒子的关联

  • 内联盒子(inline boxes)：每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来。内联盒子不会让内容成块显示，而是排成一行。

    如：外部包含inline水平的标签(span、a、em、strong等)，则属于内联盒子。如果是个光秃秃的文字，则属于匿名内联盒子。行内框默认等于内容区域，除非设置了padding。

  • **行框盒子(line boxes)：**每一行就是一个行框盒子，每个行框盒子又是由一个一个内联盒子组成。行框盒子是浏览器渲染模式中的一个概念，无法显示出来。行框高度等于本行中所有行内框高度的最大值。当有多行内容时，每一行都有自己的行框。

  • 包含盒子(containing box)：由一行一行的行框盒子组成，高度就是单行文本高度的累加。

为什么不建议行内元素包含块元素？

内元素包含块元素是不符合规范的写法。尽管这种用法不会报错，它还是有些怪异表现，比如：

<section class="box_07">
    <span>
        黄叶青苔归路，屧粉衣香何处。消息竟沉沉，今夜相思几许。
        <div><img src="https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/images/pins_4246056171.webp" alt=""></div>
        秋雨，秋雨，一半因风吹去。—纳兰性德-如梦令
    </span>
</section>

行内元素包含块元素DEMO

怪异一： 行内元素的内容遇到块元素会自动换行，这不符合我们对行内元素的第一感知（行内元素是在一行显示的）。

其实际渲染类似：

<section class="box_07">
    <span>黄叶青苔归路，屧粉衣香何处。消息竟沉沉，今夜相思几许。</span>
    <div><img src="https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/images/pins_4246056171.webp" alt=""></div>
    <span>秋雨，秋雨，一半因风吹去。—纳兰性德-如梦令</span>
</section>

怪异二： 高度问题。在开发者工具，检查 span 元素可以看出，它的高度是 195.6px，但它的区域似乎只有块元素前面的一行文字。实际中，我们也无法通过 span 标签去获取整块内容的真正高度：

document.querySelector('.box_07').querySelector('span').clientHeight
// 0
document.querySelector('.box_07').querySelector('span').offsetHeight
// 21

参考链接

display的32种写法

我所知道的几种display:table-cell的应用

上一页自定义表单伪元素样式下一页视口和软键盘对视口的影响

最后更新于