【Java Web学习 | 第三篇】CSS(2) - 元素显示模式2026最新版恭喜你完成 CSS(1) 基础语法现在进入元素显示模式Display Mode这是 CSS 布局中最核心、最容易混淆的概念之一。理解block块级、inline行内、inline-block行内块以及现代的flex / grid能帮你彻底解决“为什么这个元素不换行”、“宽度为什么无效”、“垂直居中怎么这么难”等问题。作为 Java Web 后端开发者掌握显示模式后你就能快速调整前后端联调页面、修复样式 bug并在后续集成 Vue 时轻松控制组件布局。1. 什么是元素显示模式每个 HTML 元素都有默认的display属性值决定了它在页面中的“表现形式”外部显示类型元素本身如何参与布局独占一行还是同行显示内部显示类型子元素如何排列普通流、Flex、Grid 等display属性是控制这一切的核心MDN 标准。2. 三种经典显示模式对比必背显示模式默认元素示例是否独占一行是否可设置 width/height是否可设置 padding/margin上下典型应用场景备注blockdiv、p、h1、ul、li、form是可以可以容器、区块、标题、段落最常用inlinespan、a、strong、em、img替换元素略有不同否不可以宽度由内容决定左右可以上下无效文本、链接、强调文字常用于行内文本inline-blockbutton、input部分、img否可以全部可以按钮、导航项、小图标、图片“万金油”模式关键记忆口诀block独占一行像“砖块”一样堆叠可随意设置尺寸。inline像“文字”一样流动只占内容大小不能设宽高上下外边距无效。inline-block兼具两者优点 ——同行显示 可设宽高最实用。3. 代码示例直接复制运行创建一个display-demo.html文件结合上一篇文章的 CSS!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleCSS 元素显示模式演示/titlestyle*{box-sizing:border-box;margin:0;padding:0;}body{font-family:Microsoft YaHei,Arial,sans-serif;padding:20px;background:#f8f9fa;}.box{background:#007bff;color:white;padding:15px;margin:10px;border:3px solid #0056b3;}/* block 示例 */.block-demo{display:block;width:200px;height:80px;}/* inline 示例 */.inline-demo{display:inline;background:#28a745;padding:10px 15px;}/* inline-block 示例最常用 */.inline-block-demo{display:inline-block;width:120px;height:80px;text-align:center;line-height:80px;vertical-align:top;/* 解决 inline-block 垂直对齐问题 */}/* 对比容器 */.container{background:#fff;padding:20px;margin:20px 0;border:1px solid #ddd;}/style/headbodyh1CSS 元素显示模式演示/h1divclasscontainerh21. display: block块级/h2divclassbox block-demoBlock 1 - 独占一行可设宽高/divdivclassbox block-demoBlock 2 - 自动换行/div/divdivclasscontainerh22. display: inline行内/h2p这是一段文字里面有spanclassinline-demoinline 元素/span和另一个spanclassinline-demoinline 元素/span它们同行显示但无法设置固定宽度。/p/divdivclasscontainerh23. display: inline-block行内块 - 推荐/h2divclassinline-block-demoItem 1/divdivclassinline-block-demoItem 2/divdivclassinline-block-demoItem 3/divp注意inline-block 元素之间可能有小间隙换行符引起解决办法父元素 font-size:0 或 flex。/p/divdivclasscontainerh24. display: none隐藏元素/h2divclassboxstyledisplay:none;这个元素完全不占空间/divp与 visibility: hidden 不同none 会彻底移除元素不占用任何空间。/p/div/body/html运行建议用 VS Code Live Server 打开F12 开发者工具 → Elements 面板修改 display 值实时观察变化。4. 常见问题与最佳实践2026 经验inline-block 间隙问题原因HTML 换行符被当作空格。解决父元素font-size: 0;子元素再设回字体大小或直接改用display: flex;现代推荐垂直对齐问题inline / inline-block 默认按基线对齐。解决vertical-align: top / middle / bottom;为什么给 span 设置 width 无效因为它是 inline。改成display: inline-block;或display: block;即可。现代布局建议不再过度依赖 inline-block水平排列多个元素 →Flexbox下一篇文章重点复杂二维布局 →Grid简单按钮/导航 → inline-block 仍可快速使用display: none vs visibility: hiddennone元素完全消失不占空间不渲染。hidden元素隐藏但仍占空间。5. 小练习立即动手把上一篇文章的导航栏链接改成display: inline-block添加固定宽度和圆角做出横向导航效果。创建 4 个卡片用inline-block实现一行显示 3 个剩余空间自动换行。在表单中给label和input组合使用inline-block让它们整齐排列。用display: none实现一个“展开/收起”面板配合简单 JS后续会学。把练习代码保存浏览器测试并用 DevTools 修改 display 值观察差异。下一篇文章预告《【Java Web学习 | 第四篇】CSS(3) - 现代布局Flexbox Grid与响应式设计》我们将学习 Flexbox一维布局神器和 CSS Grid二维布局神器彻底告别“浮动布局”时代让页面在手机和电脑上自动适配。有问题随时问想要inline-block 间隙完整解决示例需要display 对比互动演示代码更多盒子或直接进入Flexbox 快速上手回复“我要练习答案”或“下一篇 Flexbox”我立刻给你完整代码和解析元素显示模式是 CSS 布局的“开关”掌握后后续内容会非常顺畅。继续加油你的 Java Web 全栈之路已经走过重要一步
【Java Web学习 | 第三篇】CSS(2) - 元素显示模式
【Java Web学习 | 第三篇】CSS(2) - 元素显示模式2026最新版恭喜你完成 CSS(1) 基础语法现在进入元素显示模式Display Mode这是 CSS 布局中最核心、最容易混淆的概念之一。理解block块级、inline行内、inline-block行内块以及现代的flex / grid能帮你彻底解决“为什么这个元素不换行”、“宽度为什么无效”、“垂直居中怎么这么难”等问题。作为 Java Web 后端开发者掌握显示模式后你就能快速调整前后端联调页面、修复样式 bug并在后续集成 Vue 时轻松控制组件布局。1. 什么是元素显示模式每个 HTML 元素都有默认的display属性值决定了它在页面中的“表现形式”外部显示类型元素本身如何参与布局独占一行还是同行显示内部显示类型子元素如何排列普通流、Flex、Grid 等display属性是控制这一切的核心MDN 标准。2. 三种经典显示模式对比必背显示模式默认元素示例是否独占一行是否可设置 width/height是否可设置 padding/margin上下典型应用场景备注blockdiv、p、h1、ul、li、form是可以可以容器、区块、标题、段落最常用inlinespan、a、strong、em、img替换元素略有不同否不可以宽度由内容决定左右可以上下无效文本、链接、强调文字常用于行内文本inline-blockbutton、input部分、img否可以全部可以按钮、导航项、小图标、图片“万金油”模式关键记忆口诀block独占一行像“砖块”一样堆叠可随意设置尺寸。inline像“文字”一样流动只占内容大小不能设宽高上下外边距无效。inline-block兼具两者优点 ——同行显示 可设宽高最实用。3. 代码示例直接复制运行创建一个display-demo.html文件结合上一篇文章的 CSS!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleCSS 元素显示模式演示/titlestyle*{box-sizing:border-box;margin:0;padding:0;}body{font-family:Microsoft YaHei,Arial,sans-serif;padding:20px;background:#f8f9fa;}.box{background:#007bff;color:white;padding:15px;margin:10px;border:3px solid #0056b3;}/* block 示例 */.block-demo{display:block;width:200px;height:80px;}/* inline 示例 */.inline-demo{display:inline;background:#28a745;padding:10px 15px;}/* inline-block 示例最常用 */.inline-block-demo{display:inline-block;width:120px;height:80px;text-align:center;line-height:80px;vertical-align:top;/* 解决 inline-block 垂直对齐问题 */}/* 对比容器 */.container{background:#fff;padding:20px;margin:20px 0;border:1px solid #ddd;}/style/headbodyh1CSS 元素显示模式演示/h1divclasscontainerh21. display: block块级/h2divclassbox block-demoBlock 1 - 独占一行可设宽高/divdivclassbox block-demoBlock 2 - 自动换行/div/divdivclasscontainerh22. display: inline行内/h2p这是一段文字里面有spanclassinline-demoinline 元素/span和另一个spanclassinline-demoinline 元素/span它们同行显示但无法设置固定宽度。/p/divdivclasscontainerh23. display: inline-block行内块 - 推荐/h2divclassinline-block-demoItem 1/divdivclassinline-block-demoItem 2/divdivclassinline-block-demoItem 3/divp注意inline-block 元素之间可能有小间隙换行符引起解决办法父元素 font-size:0 或 flex。/p/divdivclasscontainerh24. display: none隐藏元素/h2divclassboxstyledisplay:none;这个元素完全不占空间/divp与 visibility: hidden 不同none 会彻底移除元素不占用任何空间。/p/div/body/html运行建议用 VS Code Live Server 打开F12 开发者工具 → Elements 面板修改 display 值实时观察变化。4. 常见问题与最佳实践2026 经验inline-block 间隙问题原因HTML 换行符被当作空格。解决父元素font-size: 0;子元素再设回字体大小或直接改用display: flex;现代推荐垂直对齐问题inline / inline-block 默认按基线对齐。解决vertical-align: top / middle / bottom;为什么给 span 设置 width 无效因为它是 inline。改成display: inline-block;或display: block;即可。现代布局建议不再过度依赖 inline-block水平排列多个元素 →Flexbox下一篇文章重点复杂二维布局 →Grid简单按钮/导航 → inline-block 仍可快速使用display: none vs visibility: hiddennone元素完全消失不占空间不渲染。hidden元素隐藏但仍占空间。5. 小练习立即动手把上一篇文章的导航栏链接改成display: inline-block添加固定宽度和圆角做出横向导航效果。创建 4 个卡片用inline-block实现一行显示 3 个剩余空间自动换行。在表单中给label和input组合使用inline-block让它们整齐排列。用display: none实现一个“展开/收起”面板配合简单 JS后续会学。把练习代码保存浏览器测试并用 DevTools 修改 display 值观察差异。下一篇文章预告《【Java Web学习 | 第四篇】CSS(3) - 现代布局Flexbox Grid与响应式设计》我们将学习 Flexbox一维布局神器和 CSS Grid二维布局神器彻底告别“浮动布局”时代让页面在手机和电脑上自动适配。有问题随时问想要inline-block 间隙完整解决示例需要display 对比互动演示代码更多盒子或直接进入Flexbox 快速上手回复“我要练习答案”或“下一篇 Flexbox”我立刻给你完整代码和解析元素显示模式是 CSS 布局的“开关”掌握后后续内容会非常顺畅。继续加油你的 Java Web 全栈之路已经走过重要一步
