CSS技巧：display:none和visibility:hidden的恩怨

接受采访时被问到：“告诉我display:none和visibility:hidden的区别”？回答后显示：没什么不在原来的位置，但是visibility：hidden保持原来的位置，面试官在笑吗？其实还不止这些！在这篇文章中，我们将一起深入探讨他们的恩怨情仇，以便我们在下次采访中给出更好的答案！

Deeperdisplay:none

我们都知道，当一个元素设置为display:none时，上将 UI不会显示该元素，并且该元素不会定位状态。 ，但我们仍然可以使用 JavaScript 操作这个元素。但这是为什么呢？这包括浏览器的渲染原理：浏览器解析HTML标签创建DOM树，解析CSS创建CSSOM树，然后综合DOM树和CSSOM标签创建渲染树。这些元素对应于渲染树中的 0 个或多个图块，然后对应于盒模型中的浏览器数据布局和渲染界面。设置为 display:none 的元素不会在渲染树中创建相应的盒模型，因此后续的布局和渲染工作自然与之无关。至于DOM操作，还是可以的。但除了以上信息点之外，还有以下8点需要我们注意： 1.初始默认值显示：none。事实上， display:none 的元素自带了许多原生浏览器元素，例如 link、le、script 、对话框。 通过[类型=hidden] 等

2。 hidden 布尔属性是 HTML5 中的新增功能，允许开发人员自定义元素隐藏

/* 兼容原生不支持hidden属性的浏览器  */
[hidden]{
  display: none;
}

<span hidden>Hide and Seek: You can't see me!</span>
复制代码

3。父元素是display:none，子元素也是没办法转义

.hidden{
  display: none;
}
.visible{
  display: block;
}

*** START ***
<div class="hidden">
  I'm parent!
  <div class="visible"> I'm son! </div>
</div>
*** END ***
复制代码

，浏览器直接显示为

*** START ***
*** END ***
复制代码

4。无法集中注意力。没有盒子，我们如何获得焦点？ _^连tab键都没有办法

<!-- 真心不会获得焦点 -->
<input type="hidden">
<div tabindex="1" style="display:none">hidden</div>
复制代码

5。它无法使用，因为它无法对任何事件做出反应，无论是捕获、击中目标还是冒泡阶段。由于 display:none 元素根本不渲染在用户界面中，它们甚至不占用一像素，所以自然无法用鼠标单击它们。击中且元素无法获得焦点，它不能成为键盘事件的目标；当主元素没有显示时，子元素的显示应该是空的，这样该元素就没有机会妨碍事件的捕获或冒泡步骤。路径，因此具有 display:none 的元素无法响应事件。

6。不要拖延提交表格。即使我们看不到元素 display:none，提交表单时仍然会发送隐藏输入元素的值。

<form>
  <input type="hidden" name="id">
  <input type="text" name="gguid" style="display:none">
</form>
复制代码

7。 CSS 计数器会覆盖元素

.start{
  counter-reset: son 0;
}
.son{
  counter-increment: son 1;
}
.son::before{
  content: counter(son) ". ";
}

<div class="start">
  <div class="son">son1</div>
  <div class="son" style="display:none">son2</div>
  <div class="son">son3</div>
</div>
复制代码

/ display:none。结果是：

1. son1
2. son3
复制代码

8。 Transition 对屏幕 的更改不感兴趣。请参阅 CSS 了解更多信息。魔法殿堂：转变太有趣了

9。当屏幕改变时回流开始。抛开display:none，我们看display:block，表示该元素位于BFC，❙表示位于IFC。换句话说，display用于设置元素所属的布局上下文。如果display值改变了，说明元素的布局方式发生了改变，如果没有触发回流才奇怪！

深入了解visibility

visibility有两种不同的作用

1. 用于隐藏表格行和列❙用于有效值隐藏4无布局1.可见无话可说，它只出现在用户界面中。 2. hidden 使元素在屏幕上不可见，但保持元素原来的位置。 3.collapse 用于表格子元素（如tr、tbody、colcol） ）。 display:none是一样的，用在其他元素中时，效果与visibility:hidden相同。但由于各个浏览器的实现含义不同，所以一般不使用该值。 4.inherit继承父元素visibility的值。

   显示：无和visibility：hidden

   上面我们已经列出了8个需要注意的点，那么：♶♶我们只需要不是明确把visibility一一列出反对吗？ 1、主元素为visibility:hidden，子元素可设置为visibility:visible，并生效和2:❙结果。 显示：没有任何 无法获得焦点，例如

   3。它可以对冒泡阶段的事件做出反应，因为元素设置为 visibility:hidden 且其子元素可以为 visibility:visible ，因此隐藏元素可以位于路径事件气泡。因此，在下面的代码中，当鼠标移动到.visible时，.hidden对应

   div{
     border: solid 2px blue;
   }
   .visible{
     visibility: visible;
   }
   .hidden{
     visibility: hidden;
   }
   .hidden:hover{
     visibility: visible;
   }
   <div class="hidden">
     I'm Parent.
     <div class="visible">
       I'm Son.
     </div>
   </div>
   复制代码

   4。与 display:none 类似，它不会阻止提交表单

   5。 CSS 计数器不会跳过

   6 的更改。过渡visibility有效

   7。visibility的改变不会引发回流。由于当元素布局从visible设置为hidden时，与元素布局相关的属性并没有改变，因此不会触发回流。它只是默默地等待浏览器计时以及其他渲染更改。重新绘制界面。

   作者：胖子约翰
来源：掘金