CSS Display-优快云博客

本文链接：https://blog.youkuaiyun.com/u013960094/article/details/45824787

本文深入探讨了HTML元素的隐藏方法及其对页面布局的影响，包括使用display属性和visibility属性的区别，并展示了如何通过display属性改变元素的显示方式，如使元素成为行内元素、块级元素或行内块级元素。此外，文章还介绍了table元素的collapse属性，以及其在表格布局中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Display and Visibility

Hiding an element

两种方法实现元素的隐藏：

h1.hidden {display:none;}
h2.hidden {visibility:hidden;}

区别：

display:none it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there:

visibility:hidden It will still take up the same space as before. The element will be hidden, but still affect the layout.

前者就好像元素不在那个地方，后者仍然占据着相同的空间，影响页面布局。

Change the way an element displayed

li {display:inline;}
span {display:block;}
div {display:inline-block;}

三个语句分别实现:
1. 使块级元素占满一行宽度显示，直到不得不换行。
2. 使行内级元素强制换行。
3. 使元素成为一个行内级别的封装块级元素的容器。The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box

注意：Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display:block is not allowed to have other block elements inside of it.

设置一个元素的display性质，只是改变了元素显示的方式，而不会改变元素的类型。因此，一个 display: block 的行内级元素不允许在它里面放置其他块级元素。