【Java Web 学习 | 第三篇】CSS(2) —— 元素显示模式（display 与相关属性）
这是前端学习中非常重要且经常被面试考察的一块内容：元素的显示模式决定了它在页面上如何排版、是否独占一行、能否设置宽高、内外边距的表现等。
一、核心概念：display 属性决定了元素的“身份”
| display 值（常用） | 独占一行？ | 可设置宽高？ | 默认宽度 | 典型代表元素 | 2025年主流使用场景 |
|---|---|---|---|---|---|
block | 是 | 是 | 父元素100% | div、p、h1~h6、ul、ol、li、form、header、footer、section… | 布局容器、标题、段落、分隔区域 |
inline | 否 | 否（宽高无效） | 内容撑开 | span、a、strong、em、img、input、button（部分浏览器）… | 文字、链接、图标、小标签 |
inline-block | 否 | 是 | 内容撑开 | （需要手动设置）常见：按钮、图片、导航项、表单控件… | 最万能的“既能并排又能设置尺寸”模式 |
none | — | — | — | 用于隐藏元素 | display:none 彻底移除，不占空间 |
flex | 是（容器） | 是 | — | 弹性布局容器 | 现代主流布局（一维布局） |
grid | 是（容器） | 是 | — | 网格布局容器 | 复杂二维布局 |
inline-flex | 否 | 是 | 内容撑开 | 行内弹性容器 | 行内小范围弹性布局 |
inline-grid | 否 | 是 | 内容撑开 | 行内网格容器 | 较少用 |
二、三大经典显示模式对比（必须记住）
| 特性 | block | inline | inline-block |
|---|---|---|---|
| 独占一行？ | 是 | 否 | 否 |
| 宽度默认 | 父元素 100% | 内容宽度 | 内容宽度 |
| 高度默认 | 由内容或子元素撑开 | 由内容撑开（字体高度） | 由内容或设置的 height 决定 |
| 可设置 width/height | 是 | 否（设置无效） | 是 |
| margin（上下） | 有效 | 无效（不影响布局） | 有效 |
| margin（左右） | 有效 | 有效 | 有效 |
| padding（上下） | 有效 | 有效（但不影响行高） | 有效 |
| padding（左右） | 有效 | 有效 | 有效 |
| 可包含 block 元素？ | 可以 | 不可以（会自动转成 block） | 可以 |
| 典型使用场景 | 页面大块布局 | 文字、链接、强调 | 按钮、导航、图片列表、标签 |
三、经典代码示例（建议自己敲一遍）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>元素显示模式演示</title>
<style>
.container {
width: 800px;
margin: 20px auto;
border: 1px dashed #999;
padding: 20px;
}
/* block 示例 */
.block-demo {
background-color: #e0f7fa;
margin: 10px 0;
padding: 15px;
}
/* inline 示例 */
.inline-demo span {
background-color: #fff9c4;
margin: 0 10px;
padding: 8px 12px;
/* 尝试设置宽高：无效 */
width: 200px;
height: 60px;
}
/* inline-block 示例 */
.inline-block-demo a {
display: inline-block;
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #c8e6c9;
margin: 10px;
border-radius: 6px;
text-decoration: none;
color: #2e7d32;
}
/* 导航栏经典写法 */
.nav {
background: #f5f5f5;
padding: 10px;
}
.nav li {
display: inline-block;
margin-right: 20px;
}
</style>
</head>
<body>
<div class="container">
<h3>1. block 元素（默认独占一行，可设宽高）</h3>
<div class="block-demo">我是 block 元素 1</div>
<div class="block-demo">我是 block 元素 2</div>
<h3>2. inline 元素（不独占行，宽高设置无效）</h3>
<p>这是一段文字，里面有 <span>内联span</span> 和 <span>另一个内联span</span>，它们会并排显示。</p>
<h3>3. inline-block（最常用“伪块级行内元素”）</h3>
<div>
<a href="#">首页</a>
<a href="#">产品</a>
<a href="#">解决方案</a>
<a href="#">关于我们</a>
<a href="#">联系方式</a>
</div>
</div>
</body>
</html>四、常见面试/笔试高频问题（建议背熟）
display: inline的元素可以设置 margin-top/bottom 吗？为什么？
→ 不可以（垂直方向的 margin 不生效，但水平方向生效）- 怎么让 img 元素并排且中间有间距？
→display: inline-block+margin或用flex display: none和visibility: hidden的区别？
display: none：元素彻底消失，不占空间，不参与重排visibility: hidden：隐藏但占位，参与重排，常用于动画占位
- 如何实现横向导航栏（三种主流写法）？
- 方式1：
li { display: inline; }（最原始） - 方式2：
li { display: inline-block; }（最常用，易控制间距） - 方式3：
ul { display: flex; }（现代首选，弹性、对齐最方便）
a标签默认是什么显示模式？为什么可以设置宽高？
→ 默认inline，但现代浏览器很多场景会表现得像inline-block（特别是加了 padding、background 时）
五、2025–2026 现代推荐写法总结
| 需求 | 推荐 display 值 | 备注 |
|---|---|---|
| 普通容器、卡片 | block / flex / grid | — |
| 文字内嵌小图标/标签 | inline 或 inline-block | — |
| 按钮、导航项、图片列表 | inline-block 或 flex | inline-block 最经典，flex 更现代 |
| 完全隐藏且不占空间 | display: none | — |
| 隐藏但保留空间（动画用） | visibility: hidden | opacity: 0 也是常见选择 |
| 横向排列且弹性 | display: flex | 2025+ 主流 |
| 宫格、仪表盘式布局 | display: grid | 复杂布局首选 |
一句话总结：
block 独占一行能设宽高，inline 不占行宽高无效，inline-block 是“鱼与熊掌兼得”的万金油模式，flex 和 grid 是现代布局的王者。
下一节建议学习：CSS 盒模型（box-sizing） + margin 塌陷 + 常见居中方案，这是布局三板斧。
需要我现在就把“盒模型 + 居中方案”一起讲完吗？还是你先消化一下，有具体问题再问？
