CSS 显示：Display

文章目录

CSS 显示
隐藏元素
块和内联元素
示例
- 1，如何改变一个元素显示
- 2，如何显示元素的内联元素
- 3，如何显示元素的块元素
- 4，如何使用一个表的collapse属性

CSS 显示

CSS的显示属性有很多种，包括：

display：这个属性决定了元素如何显示。常见的值包括block（块级元素），inline（行级元素），inline-block（行内块元素），none等。
visibility：这个属性用来设置元素的可见性。可以设置为visible（默认值，元素可见），hidden（元素不可见），collapse（在表格中，元素只占据空间但不显示）等。
opacity：这个属性用来设置元素的透明度。值为0时元素完全透明，值为1时元素完全不透明。
overflow：这个属性用来设置当内容溢出元素框时发生什么。可以设置为visible（默认值，内容溢出时显示在元素框外），hidden（内容不会溢出到元素框外），scroll（总是显示滚动条），auto（如果有需要，自动显示滚动条）等。
position：这个属性用来设置元素的定位类型。可以设置为static（默认值，元素按照正常文档流定位），relative（相对定位，元素相对于其正常位置进行定位），absolute（绝对定位，元素相对于最近的已定位祖先元素进行定位），fixed（固定定位，元素相对于浏览器窗口进行定位）等。
z-index：这个属性用来设置元素的堆叠顺序。一个元素可以位于另一个元素的上方或下方。具有更高的z-index的元素会覆盖具有较低z-index的元素。

这些属性都可以在CSS中使用，以控制HTML元素的显示方式。

隐藏元素

在CSS中，有多种方法可以隐藏元素。以下是一些常用的方法：

display: none; 这种方法是常用的元素隐藏方法。被隐藏的元素不会在页面中占据位置，也不会响应绑定的监听事件。
visibility: hidden; 这种方法与display: none;不同之处在于，使用visibility: hidden;隐藏的元素仍会占据页面中的空间，但是元素不可见。
opacity: 0; 通过将元素的opacity属性设置为0，可以把元素设置为透明。注意，虽然元素本身依然占据它自己的位置并对网页的布局起作用，但是它也将响应用户交互。
z-index: -1; 通过将元素的z-index属性设置为负值，可以使元素放置在其他的元素下面并隐藏。
position: absolute; left: -999px; 通过绝对定位的方式，将元素移出屏幕，从而实现隐藏。
width: 0; height: 0; 如果不希望隐藏元素占用空间，可以设置元素的宽度和高度为0。
font-size: 0; 对于文本元素，可以设置字体大小为0，从而实现隐藏。
color: transparent; 对于文本元素，可以设置文字颜色为透明，从而实现隐藏。
visibality: hidden; 通过visibality属性，也可以将元素设置为不可见。

块和内联元素

块元素和内联元素是CSS中两种主要的元素类型，它们在布局和样式应用上有一些区别。

块元素通常用于构建页面的基本结构，它们可以独占一行并且在默认情况下总是开始于新的一行。块元素也能容纳其他块元素或内联元素。常见的块元素有div、h1-h6标题、form（只能用来容纳其他块元素）、hr、p、table、ul等。

内联元素主要用于选中文本并设置样式。它们只占自身的大小，无法设置宽高，且只能在同一行上显示。内联元素只能容纳文本或者其他内联元素，常见内联元素有a和span。

块元素和内联元素的主要区别在于它们在页面上的布局方式以及可以应用的样式。块元素通常用于构建页面的“块级”结构，而内联元素则用于调整文本或其他内联元素的样式。

示例

1，如何改变一个元素显示

你可以通过以下CSS样式改变一个元素的显示方式：

#elementId {
  display: none; /* 或者其他CSS显示属性，例如：block, inline, inline-block, visible, hidden, opacity, z-index, position, width, height, font-size, color等 */
}

在上述代码中，elementId是想要改变显示方式的元素的ID。可以根据需要选择合适的CSS显示属性。例如，如果想要隐藏一个元素，可以将display属性设置为none，这样元素就会从页面中完全消失，不占据任何空间。

注意：如果一个元素被隐藏后，还想让它占位置，可以改为使用 visibility: hidden;。

2，如何显示元素的内联元素

可以通过以下CSS样式将元素显示为内联元素：

#elementId {
  display: inline;
}

在上述代码中，elementId 是想要显示为内联元素的元素的ID。通过设置display属性为inline，元素将显示为内联元素，只占用所需的宽度，不会独占一行。

如果想要显示为内联块元素，可以设置 display 属性为 inline-block，这样元素既可以像内联元素一样只占用必要的宽度，又可以像块级元素一样设置宽度和高度。

3，如何显示元素的块元素

可以通过以下CSS样式将元素显示为块级元素：

#elementId {
  display: block;
}

在上述代码中，elementId 是想要显示为块级元素的元素的ID。通过设置display属性为block，元素将显示为块级元素，独占一行，并且可以设置宽度和高度。

4，如何使用一个表的collapse属性

在 CSS 中，border-collapse 属性用于设置表格边框的样式。使用 border-collapse: collapse; 可以将相邻的表格单元格边框合并为一个单一边框。

以下是一个使用 border-collapse 属性的示例：

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid black;
  padding: 8px;
}

在上述示例中，这样，表格中的所有单元格（<td> 和 <th>）的边框会合并为一个单一边框。然后，我们为 <td> 和 <th> 元素设置了边框样式，使其显示为黑色的 1 像素实线。

通过应用 border-collapse: collapse;，相邻单元格的边框会合并，从而创建一个更简洁、干净的表格外观。