文章目录

display
- list-item【无效果，懵逼】
- run-in【都不支持，忽略】
- initial
- content
- table
visibility
隐藏元素(display:none/visibility:hidden/visibility:collapse)
- 详解visibility:collapse
改变一个元素显示

display

display 属性规定元素应该生成的框的类型。

一般常用的就是前四个！其他菜鸟其实也没用过 ⊙皿⊙

行内元素、块元素、行内块元素详见：
重学前端概括元素（行内元素,块元素,行内块元素）和属性 / 大小写不敏感 / 详解标题标签 [em和px、源css] / 详解分割线hr标签 / 初见border / 详解auto（第二天）

注释：
CSS2 中有值 compact 和 marker，不过由于缺乏广泛的支持，已经从 CSS2.1 中去除了。（所以并没有列出）

list-item【无效果，懵逼】

菜鸟试了一下，完全和block一个效果（不会像列表一样出现点）！

一脸懵逼，完全不知道为什么要出现这个，不少博客主都说会出现点，我就想知道，难道是我浏览器坏了？还是他们看着就随口一说？而且浏览量最少的都有10000+，而菜鸟每一篇博客都会反复修改，生怕出错(╥╯^╰╥)，结果浏览量低得可怜 (ﾉ･ｪ･)ﾉ

不信？那我给大家看代码和结果：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><span style="display: list-item;">this <br>is p1</span><span style="display: list-item;">this is p2</span><br /><p style="display: list-item;">this <br>is p1</p><p style="display: list-item;">this is p2</p>
</body></html>

运行结果：

goole：

Firefox：

2020/8/16补：

菜鸟发现 Firefox下，有一个属性值可以产生列表的效果，inline list-item

实例：

<p style="display: inline list-item;">this is p</p>
<p style="display: inline list-item;">this is p</p>
<p style="display: inline list-item;">this is p</p>
<p style="display: inline list-item;">this is p</p>

运行结果：

感觉可能挺有用，但如果就只有Firefox支持，似乎也没什么用！

run-in【都不支持，忽略】

几乎没有浏览器支持，反正goole、火狐、微软的都不支持！

initial

上面的表格没有列出来，但是菜鸟这里添加一下，initial 关键字用于设置 CSS 属性为它的默认值。

菜鸟发现，元素默认的display，居然都是inline！

content

display: contents样式规则是什么？

把一个元素从边界框树型结构(box tree)中移去，但内容保留 (无法设置margin、padding) 。详细要求里有准确定义：

元素本身不产生任何边界框，而元素的子元素与伪元素仍然生成边界框，元素文字照常显示。为了同时照顾边界框与布局，处理这个元素时，要想象这个元素不在元素树型结构里，而只有 内容留下，这包括元素在元文档中的子元素与伪元素，比如::before和::after这两个伪元素，如平常一样，前者仍然在元素子元素之前生成，后者在之后生成。

实例：

<div style="display: contents;background: magenta;border: solid thick black;color: cyan;font: 30px/1 Monospace;margin: 30px;padding: 30px;"><span style="background: blue;border: solid;">foobar</span>
</div>

运行结果：

注意：

display: contents样式规则使div元素不产生任何边界框，因此元素的背景、边框和填充部分都不会渲染。然而，继承的属性如颜色(color)和字体(font)却能照常影响到span这个子元素。

感谢：

本文转载@chaussen发布于众成翻译的《CSS的display: contents样式规则即将来临》一文，如需转载，烦请注明原文出处：
http://zcfy.cc/article/quote-display-contents-quote-is-coming-regos-everyday-life

table

目前，在大多数开发环境中，已经基本不用table元素来做网页布局了，取而代之的是div+css，那么为什么不用table系表格元素呢？

用DIV+CSS编写出来的文件k数比用table写出来的要小，不信你在页面中放1000个table和1000个div比比看哪个文件大
table必须在页面完全加载后才显示，没有加载完毕前，table为一片空白，也就是说，需要页面完毕才显示，而div是逐行显示，不需要页面完全加载完毕，就可以一边加载一边显示
非表格内容用table来装，不符合标签语义化要求，不利于 SEO
table的嵌套性太多，用DIV代码会比较简洁

但是有的项目中又需要类似表格的布局怎么办呢？可以用display:table来解决

实例：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>模拟表格</title>
</head>
<body><style type="text/css" rel="stylesheet">.table {display: table;border: 1px solid #cccccc;margin: 5px;padding:100px;}.row {display: table-row;border: 1px solid #cccccc;/*display: table-row时margin、padding同时失效*/}.cell {display: table-cell;border: 1px solid #cccccc;padding: 5px;/*display: table-cell时margin会失效*/}
</style>
<div class="table"><div class="row"><div class="cell">张三</div><div class="cell">李四</div><div class="cell">王五</div></div><div class="row"><div class="cell">张三</div><div class="cell">李四</div><div class="cell">王五</div></div>
</div>
</body>
</html>

运行结果：

visibility

visibility 属性规定元素是否可见。

提示：
即使不可见的元素也会占据页面上的空间，请使用 “display” 属性来创建不占据页面空间的不可见元素。

隐藏元素(display:none/visibility:hidden/visibility:collapse)

隐藏一个元素可以通过把display属性设置为 “none”，或把visibility属性设置为 “hidden”。

注意：

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

详解visibility:collapse

visibility 还可能取值为 collapse ，当设置元素 visibility:collapse 后，一般的元素的表现与 visibility: hidden 一样，即其会占用空间。

实例：

<h1>this is h1</h1>
<h1 style="visibility:collapse">this is a 隐藏 h1</h1>
<p>this is a p</p>

运行结果：

但如果该元素是与 table 相关的元素，就会有所区别！

实例：

<table cellspacing="0" border="2px" style="
    /*border-collapse: collapse;*/
"><tr style="
        /* visibility: collapse; */
        /* display: none; */
        /* visibility: hidden; */
    "><td style="
            /* visibility: collapse; */
            /* display: none; */
            /* visibility: hidden; */
        ">啊啊啊啊</td><td>不不不不</td><td>辰辰辰辰</td></tr><tr><td>1111</td><td>2222</td><td>3333</td></tr>
</table>

运行结果：

当 border-collapse: collapse; 时，如果是作用于一整行，则其会表现得像display:none; 不占空间！但是和display:none; 还是有区别，区别在于visibility:collapse; 虽然消失，但是上一行的 宽度、行宽 不变，不会影响下面一行的大小；而display:none; ，上一行的 宽度、行宽 改变，会影响到下一行！如图：

tr上使用visibility:collapse;

tr上使用display:none;

tr上使用visibility:hidden;

注意：

diaplay的优先级大于visibility，同时出现时，display决定样式

当 border-collapse: separate; 时，情况和上面一致，只有visibility:hidden;会产生区别，如图：

tr上使用visibility:hidden;

当 border-collapse: collapse; 时，如果只作用于一行中的某一个空格（单元格），则表现为visibility:hidden; 占有原来的空间！这里和 displa:none; 的区别就很大，因为 displa:none; 不占空间，后面的内容会向前移动，然后最后一行的大小就会变化！如图：

td上使用visibility:collapse;

td上使用display:none;

td上使用visibility:hidden;

当 border-collapse: separate; 时，效果如下图：

td上使用visibility:collapse;

td上使用display:none;

td上使用visibility:hidden;

上面运行结果全是谷歌浏览器/微软浏览器的运行结果，Firefox的运行结果有少许区别，如图：

1、当 border-collapse: collapse; 时，tr上使用visibility:hidden;
2、当只作用于，一行中的某一个空格（单元格） 时，都是会保留边框的，只是边框样式不太一样

现在有不少博客都是这样写的：（X）

CSS-Tricks的Almanac建议说不要使用这个值，因为浏览器的不统一。

当设置元素 visibility: collapse 后，一般的元素的表现与 visibility: hidden 一样，也即其会占用空间。但如果该元素是与 table 相关的元素，例如 table row、table column、table column group、table column group 等，其表现却跟 display: none 一样，也即其占用的空间会释放。

据我的观察在不同浏览器下，对 visibility: collapse 的处理方式不同：

visibility: collapse 的上述特性仅在 Firefox 下起作用。

在 IE 即使设置了 visibility: collapse，还是会显示元素。

在 Chrome 下，即使会将元素隐藏，但无论是否是与 table 相关的元素，visibility: collapse 与 visibility: hidden 没有什么区别，即仍会占用空间。

但是菜鸟发现根本就不是这么回事，不知道是博主错了还是怎么着！

改变一个元素显示

使用display可以使元素在不同类型之中相互转换，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。

实例：

<p style="display: inline;">this is p use inline</p>
<span style="display: block;">this is span use block<div style="width: 300px;height: 100px;background-color: aqua;">this is div in span</div>
</span>

由此运行结果可以看出，将行内元素变为块元素后，其拥有块元素的性质！

同理，如果你写成这样：

<p style="display: inline;">this is p use inline
<div style="width: 300px;height: 100px;background-color: red;">this is div in inline-p</div>
</p>
<span style="display: block;">this is span use block<div style="width: 300px;height: 100px;background-color: aqua;">this is div in block-span</div>
</span>

那么，浏览器会自动把p补全，变为两个p，而div还是块元素！

CSS display(显示)详解与 visibility（可见性）详解[第七天]相关推荐

java中display1,CSS Display(显示)
CSS Display(显示) display属性指定由元素生成的框的类型,通常用到display对应值有block.none.inline这三个值. CSS显示属性 CSS规范定义了所有元素的默认显 ...
CSS Display(显示) 与 Visibility（可见性）
转自:http://www.pinlue.com/article/2020/06/0112/0810666151130.html
html display 显示,CSS display显示
显示或隐藏我们可以通过使用visibility属性或display属性来显示或隐藏元素. 要隐藏元素,请将display属性设置为"none"或将visibility属性设置为& ...
Css display 详解
Css display 详解 display :none display :block display :inline display :inline-block display :inherit d ...
css元素的显示与隐藏 display显示隐藏 +visibility显示隐藏 +overflow溢出显示隐藏
css元素的显示与隐藏 display显示隐藏元素 visibility显示隐藏元素 overflow溢出显示隐藏总结 display显示隐藏元素 display 设置或检索对象是否及如何显示. d ...
inline-block是html5,详解CSS display:inline-block的应用
本文详细描述了display:inline-block的基础知识,产生的问题和解决方法以及其常见的应用场景,加深了对inline-block应用的进一步理解. 基础知识 display:inline- ...
详解CSS display:inline-block的应用（转）
详解CSS display:inline-block的应用阅读目录基础知识 inline-block的问题 inline-block的应用总结本文详细描述了display:inline-blo ...
4.元素的显示与隐藏-display属性、visibility可见性、overflow溢出
01-display属性 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
css display：flex详解
页面布局的时候经常需要给块级子元素居中,目前发现最方便直接的是父级元素使用display:flex属性, css display:flex 属性 6 2018.09.04 16:03:53 字数 90 ...

CSS display(显示)详解与 visibility（可见性）详解[第七天]

文章目录

display

list-item【无效果，懵逼】

run-in【都不支持，忽略】

initial

content

table

visibility

隐藏元素(display:none/visibility:hidden/visibility:collapse)

详解visibility:collapse

改变一个元素显示

CSS display(显示)详解与 visibility（可见性）详解[第七天]相关推荐

最新文章

热门文章

CSS display(显示)详解 与 visibility（可见性）详解[第七天]

文章目录

display

list-item【无效果，懵逼】

run-in【都不支持，忽略】

initial

content

table

visibility

隐藏元素(display:none/visibility:hidden/visibility:collapse)

详解visibility:collapse

改变一个元素显示

CSS display(显示)详解 与 visibility（可见性）详解[第七天]相关推荐

最新文章

热门文章

CSS display(显示)详解与 visibility（可见性）详解[第七天]

CSS display(显示)详解与 visibility（可见性）详解[第七天]相关推荐