display的32种写法

最新推荐文章于 2024-05-23 09:57:59 发布

哈哈n

最新推荐文章于 2024-05-23 09:57:59 发布

阅读量3.4k

点赞数 6

分类专栏： CSS学习文章标签： CSS

原文链接：https://segmentfault.com/a/1190000012833458#outside

版权

CSS学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

转自（担心原作者会删除文章，所以这里自己做个备份）：display的32种写法

你知道『回』字有四种写法，但你知道display有32种写法吗？今天我们一一道来，让你一次性完全掌握display，从此再也不用对它发愁。

从大的分类来讲，display的32种写法可以分为6个大类，再加上1个全局类，一共是7大类

1. 外部值

所谓外部值，就是说这些值只会直接影响一个元素的外部表现，而不影响元素里面的儿子级孙子级元素的表现。

1.1 display: block;：这个值大家不陌生，我们最熟悉的<div>缺省就是这个值，最基本的块级元素，属于css入门初学者都知道的概念，只要是容器类型的元素基本都是这个值。除<div>之外，还有<h1>到<h6>，<p>，<form>，<header>，<footer>，<section>，<article>天生都是这个值。
1.2 display: inline;：这个值大家也不陌生，行内元素嘛，只要是个行内元素都是这个值，最典型的是<span>，还有<a>，<img>，以及古代html语言当中的<b>，<i>都属于这一类型。
1.3 display: run-in（通常没人用它）：除了IE和Opera支持它以外，其他所有主流浏览器包括Chrome, Safari, Firefox全都对它置若罔闻。run-in，中文意思就是『闯入』那么这个元素就直接闯入下一行

2. 内部值【CSS3相关：重要】

谈完了外部值，我们来看看内部值。这一组值比较有意思了，在css3如火如荼的今天，你要玩不转这些值，怕是哪儿也找不到工作的。内部值主要是用来管束自己下属的儿子级元素的排布的，规定它们或者排成S形，或者排成B形这样的。

2.1 display: flow;（实验阶段）：含义不清，实验室阶段产品，Chrome不支持

2.2 display: flow-root;：不同于flow，现在用flow-root的渐渐多起来了，
因为它可以撑起被你float掉的块级元素的高度。

浮动元素使其父元素高度塌陷（该段内容参看了另一文章后总结） :我们经常会遇到一种情况，给一个元素设置浮动之后 float:left/right;，如果该元素的父元素有背景颜色，那么会发现父元素的背景颜色消失了；如果父元素有一个边框，那么浮动元素无法将边框撑开。

<html>
    <head>
        <style>
            .pdiv {
            	background-color:cornflowerblue;
            	border: 2px solid red;
            	/**父元素加overflow:hidden
            	可以消除子元素float对父元素的影响*/
            	/**overflow: hidden; */
            	
            	/**
            	display新的属性值
            	虽然目前仅几个最新浏览器支持，
            	但完全可以通过@supports()属性做完美降级处理。
            	*/
            	display: flow-root;
            }
            /**
            为父元素添加伪类可以
            消除子元素float对父元素的影响
            .pdiv::after {
				content:"";
				clear:both;		//清除浮动
				display:block;	//确保该元素是一个块级元素
			}
			*/
            .cdiv {
            	background-color:burlywood;
            	border: 1px solid brown;
            	width: 100px;
            	height: 100px;
            	margin: 20px;
            	/** float: left; */
            }
        </style>
    </head>
    <body>
        <div class="pdiv">
            <div class="cdiv">
            </div>
            <div class="cdiv">
            </div>
        </div>
    </body>
</html>

未加float时：

将上面代码中的float放开：

在第一个示例中仿佛父元素消失了，但在第二个示例中发现其实父元素并没有消失，只是高度被计算为0。这就要回到浮动元素的特性来说明此问题“当元素设置浮动后，会自动脱离文档流”，翻译成白话就是说，元素浮动后，就不在整个文档流的管辖范围，那么它之前存在在父元素内的高度就随着浮动不复存在了，而此时父元素会默认自己里面没有任何内容（前提是未给父元素设置固定高度，如果父元素本身有固定高度，就不会出现这种情况）

解决方法：

a、给父元素也添加float。这样让父元素与子元素一起脱离文档流浮动起来，保证子元素在父元素内，这样父元素就能自适应子元素的高度，但是此方法有一弊端，一定会影响父元素之后的元素排列，甚至影响布局。

b、给父元素一个固定高度，此方法适用于子元素高度已知并且固定的情况。

c、添加一个块级元素，并给此元素设置clear:both;清除浮动。在很早之前用的就是这种解决办法，新建一个空的div，为这个div设置clear：both；这样无疑是增加了无意义的标签，一个大型页面中，这种标签太多是不好的。

d、给父元素添加 overflow：hidden;

e、给父元素添加伪类::after清除浮动

新的解决方法：display: flow-root;

2.3 display: table;：这一个属性，以及下面的另外8个与table相关的属性，都是用来控制如何把div显示成table样式的，因为我们不喜欢<table>这个标签嘛，所以我们想把所有的<table>标签都换成<div>标签。<div>有什么好？无非就是能自动换行而已，但其实你完全可以做一个<table><tr><td>标签，把它全都替换成display: block;也可以自动折行，只不过略微麻烦而已。
2.4 display: flex;【敲黑板，划重点！】：作为新一代的前端工程师，这个属性你必须烂熟于胸。display: flex;以及与它相关联的一系列属性：flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content，并且包括所有这些属性的取值，都是你需要反复研磨的。2009年诞生的这个属性可以说是不亚于css界一场蒸汽机诞生一样的工业革命，它的诞生标志着马车一样的float被彻底抛进历史的垃圾堆。

阮老师的Flex布局教程

A Complete Guide to Flexbox

2.5 display: grid;【会flex很吊吗？会grid更吊哦！】：也许这就是下次前端面试的重点哦！

grid布局，中文翻译为网格布局。学习grid布局有两个重点：

一个重点是grid布局引入了一个全新的单位：fr，它是fraction（分数）的缩写，所以从此以后，你的兵器库里除了px, em, rem, 百分比这些常见兵器以及vw,vh这些新式武器之外，又多了一样旁门暗器fr，要想用好grid，必须充分掌握fr。

另一个重点是斜杠操作符，这可不是分数哦。它表示的是起始位置和结束位置。比如说3 /4，这可不是四分之三的意思，这是指一个元素从第3行开始，到第4行结束，但又不包括第4行。

同样，与grid相关联的也有一大堆旁门属性，是在学习display: grid;的同时必须掌握的。包括grid, grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-template, grid-template-columns, grid-template-rows, grid-template-areas, grid-gap, grid-column-gap, grid-row-gap, grid-auto-columns, grid-auto-rows, grid-auto-flow, grid-column, grid-row。不能详述，关于这个写起来又是一大篇文章。详情还是参考csstrick上这篇文章，讲得非常细致非常清楚。
2.6 display: ruby;【类似加拼音】：ruby这个取值对于我们亚洲人来说其实是非常有用的一个东西，但是目前除了Firefox以外其它浏览器对它的支持都不太好。简而言之，display: ruby;的作用就是可以做出下面这样的东西：
2.7 display: subgrid;【了解即可】

2015年8月6日，W3C的级联样式单（CSS）工作组（Cascading Style Sheets Working Group）发布了CSS网格布局模块第一级（CSS Grid Layout Module Level 1）的工作草案。在这个草案里规定了上一节我们讲到的display: grid;的方案。

而display: subgrid;是属于2017年11月9日发布的非正式的CSS网格布局模块第二级的内容。所以这是一个非常新的草案，并且围绕它的争议从来也没有断过。

subgrid总的思想是说大网格里还可以套小网格，互相不影响。

但如果grid里可以再套subgrid的话，那我subgrid里还想再套subgrid怎么办？subsubgrid吗？况且，到底是grid: subgrid;还是display: subgrid;这个也没有达成共识，关于此一系列的争议，感兴趣的同学可以看看这篇文章

3. 列表值【极少用】

3.1 display: list-item;

display: list-item;和display:table;一样，也是一帮痛恨各种html标签，而希望只使用<div>来写遍一切html的家伙搞出来的鬼东西，实际使用极少，效果就是这样：

看，你用<ul><li>能实现的效果，他可以用<div>实现出来，就是这个作用。

4. 属性值【附属于主值】

比如主值里设置了display: table;，就可以在子元素里使用display: table-row-group;等等属性，不过并不绝对。关于它们的作用，主要参考主值就够了。

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:table-cell的应用

display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

5. 显示值

MDN里把它叫做<display-box> values（盒子值），我把它叫做显示值，主要是为了便于理解。

5.1 display: contents（下面内容来自w3cplus）
display:contents啥意思呢？看下图展示:

上图对应代码：
```
<div style="display: contents; 
    background: magenta; 
    border: solid thick black; 
    ng: 20px; color: cyan; 
    font: 30px/1 Monospace;"> 
    <span style="background: black;">foobar</span> 
</div>
```
即：display: contents样式规则使div元素不产生任何边界框，因此元素的背景、边框和填充部分都不会渲染。然而，继承的属性如颜色(color)和字体(font)却能照常影响到span这个子元素。

5.2 CSS网格布局与display: contents

这个display: contents样式能取代子网格(subgrids：上面2.7提到的内容)功能，目前还没有任何浏览器支持次网格。不过，子网格(subgrids)有些情况还是需要用到的。

典型的例子是网格布局(Grid Layout)的自动就位(auto-placement)效果，下面是一个简单的表格元素，看起来是这样的：

<html>
    <head>
        <style> 
            form { display:grid; } 
            label { grid-column: 1; } 
            input { grid-column: 2; } 
            button { grid-column: span 2; } 
        </style> 
    </head>
    <body>
        <form> 
            <label>Name</label><input /> 
            <label>Mail</label><input /> 
            <button>Send</button> 
        </form>
    </body>
</html>

然而这不是一个典型的HTML网页表格，因为通常我们会在表格内部使用列表，这样使用读屏软件的用户就能预先知道有多少空要填。所以HTML网页看起来更可能会是这样的：

<form>
    <ul>
        <li><label>Name</label><input /></li>
        <li><label>Mail</label><input /></li>
        <li><button>Send</button></li>
    </ul>
</form>

有了display: contents样式，就可以做出和第一个例子相同的布局，用的CSS也差不多：

ul{ 
    display: grid;
}
li{ 
    display: contents;
}
label{ 
    grid-column: 1;
}
input{ 
    grid-column: 2;
}
button { 
    grid-column: span 2; 
}

现在这样，网站转用CSS网格布局(Grid Layout)时，HTML代码不用大改，也不需要舍去一些确实有用的HTML元素，如上面例子里的列表元素，真的很不错。

6. 混合值

6.1 display: inline-block;：关于display: inline-block;的作用恐怕只要做过3天以上前端的工程师都应该知道。什么也不说了，上一张著名的图片作总结吧：
6.2 display: inline-table;：你要能理解inline-block，你就能理解inline-table。在行内显示一个表格，就像这样：
6.3 display: inline-flex;：这个就不用多说了吧？跟上面一样，在行内进行弹性布局，参考display: flex;。
6.4 display: inline-grid;：同上，在行内进行网格布局，参考display: grid;。

7. 全局值

这些值不是display属性的专利，几乎其它任意属性都可以用，列在这里凑个数。

7.1 display: inherit;：继承父元素的display属性。
7.2 display: initial;：不管父元素怎么设定，恢复到浏览器最初始时的display属性
7.3 display: unset;：unset混合了inherit和initial。如果父元素设值了，就用父元素的设定，如果父元素没设值，就用浏览器的缺省设定。直接看图最明白：

总结

以上就是在css里display的32种写法。谈了这么多，不知道你记住了多少呢？其实，单纯理解每一个display属性的取值都不难，难的是融会贯通，在恰当的地方运用恰当的值，毕竟我们的目的是为了把代码写短，而不是把代码写长。

哈哈n

关注

6
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
display的32种写法

转自：display的32种写法你知道『回』字有四种写法，但你知道display有32种写法吗？今天我们一一道来，让你一次性完全掌握display，从此再也不用对它发愁。从大的分类来讲，display的32种写法可以分为6个大类，再加上1个全局类，一共是7大类1. 外部值所谓外部值，就是说这些值只会直接影响一个元素的外部表现，而不影响元素里面的儿子级孙子级元素的表现。1.1 dis...
复制链接

扫一扫