CSS display的多种写法

本文将介绍如何通过定义display属性创立一个 CSS formatting box

display属性值

先来看规范文档是怎么形容的吧

从大的分类来讲，display能够分为6个大类:

display-outside

所谓display-outside，就是说这些值只会间接影响一个元素的内部体现，而不影响元素外面的儿子级孙子级元素的体现。

display: block：定义最根本的block-level

display: inline：定义最根本的的inline-level

display: run-in：会依据前面的元素进行转换display为inline | inlin-block | block。如果它后一个元素是block，那么它会变成inline并且神奇的是它会和后一个元素并排。如果它后一个元素是inline那么它会变成block。

不过很遗憾，Chrome从32版本开始将这个属性移除了。想要理解其实现成果，能够参考规范文档 https://www.w3.org/TR/css-dis...

想要理解为什么chrome不反对这个属性，能够浏览 display-run-in-dropped-in-chrome

display-inside

display-inside 艰深地讲，次要是用来管教本人上司的儿子级元素的排布的，规定它们的布局。

display: flow：处于试验阶段的一个属性值，渲染成哪个盒子与内部元素的显示类型无关。

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: 能够让元素块状化，同时蕴含格式化上下文BFC，能够用来革除浮动，去除margin合并，实现两栏自适应布局等。

<div class="box">    <img src="https://profile.csdnimg.cn/3/3/0/2_wuchen092832">    <p class="flow-root">zhaodao88.com</p></div><style>    img {        float: left;        width: 50px;        margin-right: 10px;    }    .flow-root {        display: flow-root;        background-color: #f0f3f9;        padding: 10px;    }</style>

display: table: 实现table表格

The element generates a principal table wrapper box that establishes a block formatting context, and which contains an additionally-generated table grid box that establishes a table formatting context.

display: flex: flex布局，置信作为前端工程师，这个属性以及与它相关联的一系列属性肯定了然于胸。这里不能详述，对于这个写起来得是一大篇文章，感兴趣能够浏览这篇文章。https://css-tricks.com/snippe...

display: grid: 网格布局。也是很重要的一个布局，不能详述，对于这个写起来也是一大篇文章。详情还是参考这篇文章，讲得十分粗疏十分分明。https://css-tricks.com/snippe...

display: ruby: 这个就比拟好玩了，能够增加相似拼音的成果。感兴趣的能够移步规范文档：https://www.w3.org/TR/css-ruby-1

<ruby>蝴<rt>hú</rt>蝶<rt>dié</rt>

display-listitem

display: list-item: 实现列表元素的成果，等同于<ul><li>，感兴趣能够浏览我之前写的对于list-model详细描述的两篇文章。
https://blog.csdn.net/wuchen0...

https://blog.csdn.net/wuchen0...

display-internal

次要为display: table-*, display: ruby-*这些属性。

在这里次要讲讲display: table-cell：能够用来实现大小不固定元素的垂直居中，两栏自适应布局，

垂直居中：

div{    display:table-cell;    width:1em;     height:1em;     border:1px solid #beceeb;    font-size:144px;     text-align:center;     vertical-align:middle;} img{    vertical-align:middle;}<div>    <img src="https://profile.csdnimg.cn/3/3/0/2_wuchen092832"/></div>

两栏自适应布局

应用办法等同于下面提到的display: flow-root。

display-box

display: contents: 来看看规范文档对它的定义：

The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes and text runs as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced in the element tree by its contents (including both its source-document children and its pseudo-elements, such as ::before and ::after pseudo-elements, which are generated before/after the element’s children as normal).

意思就是：将设置了该属性值的元素自身将不会产生任何盒子，然而它的从保留其子代元素的失常展现。设置了display: contents 的元素自身不会被渲染，然而其子元素可能失常被渲染。

说到这里，仔细的你或者曾经想到它的利用场景了：咱们在写vue组件时，因为框架的要求，在输入的<template>外面必须包裹一个父元素，因而组件外面的内容最终都要包裹一层可能没有什么款式的div。从页面渲染上来说，这其实是没有必要的，这个时候，就能够添上display: contents，既起到了包裹的作用，然而在理论渲染中，这个 div 其实没有生成任何box。

display: none:

The element and its descendants generate no boxes or text runs.Similarly, if a text node is defined to behave as display: none, it generates no text runs.

display-legacy

display: inline-*：内联模块。简略了解为在inline外面示意block的个性。

参考

https://www.w3.org/TR/css-dis...

https://www.w3.org/TR/css-ruby-1

https://css-tricks.com/snippe...