CSS属性：显示与可见性 [英] CSS Properties: Display vs. Visibility

问题描述

显示与可见性属性之间有什么区别？

What is difference between Display vs. Visibility properties?

推荐答案

$ c>属性只告诉浏览器是否显示一个元素。它是可见的（可见 - 你可以看到它）或不可见（隐藏 - 你看不到它）

The visibility property only tells the browser whether to show an element or not. It's either visible (visible - you can see it), or invisible (hidden - you can't see it).

display 属性告诉浏览器如何如果是 - 是否应显示为 inline 元素（即它与文本和其他内联元素流动）或块 -level元素（即它具有可以设置的高度和宽度属性，它是可漂移的等等），或者一个 inline-block （ list-item ， table ， -row ， table-cell ， flex 等）。

The display property tells the browser how to draw and show an element, if at all - whether it should be displayed as an inline element (i.e. it flows with text and other inline elements) or a block-level element (i.e. it has height and width properties that you can set, it's floatable, etc), or an inline-block (i.e. it acts like a block box but is laid inline instead) and some others (list-item, table, table-row, table-cell, flex, etc).

当你设置一个元素到 display：block ，但也 hidden ，浏览器仍然将其视为块元素，除非你只是看不到它。种类似于如何在一个看不见的盒子顶部堆叠一个红色的盒子：红色的盒子看起来像是漂浮在半空中，但实际上它坐在一个你看不见的实体盒子之上。

When you set an element to display: block but also set visibility: hidden, the browser still treats it as a block element, except you just don't see it. Kind of like how you stack a red box on top of an invisible box: the red box looks like it's floating in mid-air when in reality it's sitting on top of a physical box that you can't see.

换句话说，这意味着 display 的元素不是 none 将仍然影响页面中的元素的流动，而不管它们是否可见。包含 display：none 的元素的框将表现为该元素从未存在（虽然它保留在DOM中）。

In other words, this means elements with display that isn't none will still affect the flow of elements in a page, regardless of whether they are visible or not. Boxes surrounding an element with display: none will behave as if that element was never there (although it remains in the DOM).

这篇关于CSS属性：显示与可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！