显示属性

display 属性是 CSS 中最重要的属性之一，它决定了元素如何显示以及如何与其他元素交互。理解 display 属性对于创建正确的布局至关重要。

display 属性的基本值

block（块级元素）

块级元素会独占一行，可以设置宽度和高度。

.block {
  display: block;
  width: 100%;
  height: 100px;
  background: #3498db;
}

块级元素的特点：

• 独占一行
• 可以设置宽度和高度
• 宽度默认为父元素的 100%
• 可以包含其他块级元素和行内元素

常见的块级元素：

• <div>
• <p>
• <h1> 到 <h6>
• <ul> 和 <ol>
• <li>
• <table>
• <form>
• <header>
• <footer>

inline（行内元素）

行内元素不会独占一行，宽度由内容决定。

.inline {
  display: inline;
  background: #e74c3c;
  color: white;
}

行内元素的特点：

• 不会独占一行
• 宽度和高度由内容决定
• 不能设置宽度和高度
• 只能包含其他行内元素
• 垂直方向的 padding 和 margin 会被忽略

常见的行内元素：

• <span>
• <a>
• <strong>
• <em>
• <img>
• <input>
• <button>
• <label>
• <select>
• <textarea>

inline-block（行内块）

行内块元素既有块级元素的特性，又有行内元素的特性。

.inline-block {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #2ecc71;
  margin: 10px;
}

行内块元素的特点：

• 不会独占一行
• 可以设置宽度和高度
• 可以设置垂直方向的 padding 和 margin
• 宽度默认由内容决定

none（隐藏元素）

none 值会隐藏元素，元素不占用任何空间。

.hidden {
  display: none;
}

隐藏元素的特点：

• 元素完全隐藏，不占用空间
• 不会影响页面布局
• 可以通过 JavaScript 切换显示状态

display 属性的其他值

list-item

list-item 值使元素显示为列表项。

.list-item {
  display: list-item;
  list-style-type: disc;
  margin-left: 20px;
}

table 相关值

table 相关值用于创建表格布局。

.table {
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
  padding: 10px;
  border: 1px solid #ddd;
}

display 属性的实际应用

按钮样式

/* 行内块按钮 */
.button {
  display: inline-block;
  padding: 12px 24px;
  background: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.button:hover {
  background: #0056b3;
}

导航链接

/* 导航链接使用 inline-block */
.nav-link {
  display: inline-block;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
}

.nav-link:hover {
  background: rgba(255,255,255,0.1);
}

图片容器

/* 图片容器 */
.image-container {
  display: inline-block;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

卡片组件

/* 卡片使用 block */
.card {
  display: block;
  width: 300px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

display 与 visibility 的区别

display 和 visibility 都可以隐藏元素，但它们的行为不同。

/* display: none - 不占用空间 */
.hidden-display {
  display: none;
}

/* visibility: hidden - 占用空间 */
.hidden-visibility {
  visibility: hidden;
}

区别：

• display: none：元素完全隐藏，不占用空间
• visibility: hidden：元素隐藏，但占用空间
• display: none：会触发重排
• visibility: hidden：只触发重绘

display 属性的最佳实践

1. 使用合适的 display 值

/* 导航链接 */
.nav-link {
  display: inline-block;
}

/* 卡片 */
.card {
  display: block;
}

/* 图标 */
.icon {
  display: inline-block;
}

2. 避免频繁切换 display

/* 不推荐 - 频繁切换会影响性能 */
.element {
  display: none;
}

.element.show {
  display: block;
}

/* 推荐 - 使用 visibility */
.element {
  visibility: hidden;
}

.element.show {
  visibility: visible;
}

3. 使用 inline-block 创建水平布局

/* 水平排列的元素 */
.horizontal {
  font-size: 0;  /* 消除空白字符 */
}

.horizontal > div {
  display: inline-block;
  font-size: 16px;
  width: 100px;
  height: 100px;
  background: #3498db;
  margin: 5px;
}

总结

display 属性决定了元素如何显示：

1. block：块级元素，独占一行
2. inline：行内元素，不独占一行
3. inline-block：行内块，结合了 block 和 inline 的特性
4. none：隐藏元素，不占用空间
5. 其他值：list-item、table 等

记住以下几点：

• 理解不同 display 值的区别和特性
• 选择合适的 display 值创建正确的布局
• 注意 display 和 visibility 的区别
• 使用 inline-block 创建水平布局
• 避免频繁切换 display 影响性能