前端Wiki/CSS/进阶/传统布局

文档流与display

默认情况下，元素按标准文档流排列：块级元素（div、p、h1 等）独占一行、自上而下；行内元素（span、a、strong 等）在一行内从左到右排，排满换行。这个基本规则决定了一切布局的起点。

display 属性可以改变元素的参与方式：

block：块级，独占一行，可设宽高。
inline：行内，不换行，设置宽高无效。
inline-block：兼具两者——像行内一样并排，又能设宽高，适合做按钮组、标签。
none：彻底移除，不占空间（区别于 visibility:hidden，后者只是隐身但仍占位）。

Flex 与 Grid 出现后，布局重心已经转移，但 display 的这四个基础值仍是日常高频操作，必须熟练。

本节要点块级独占一行、行内不设宽高；inline-block 能并排又能定宽高；display:none 移除占位，visibility:hidden 只隐藏不腾位。

CSS

<style>
  .btn {
    display: inline-block;  /* 并排 + 可设宽高 */
    width: 90px; height: 36px;
    line-height: 36px;
    text-align: center;
    background: #4a9eff; color: #fff;
    margin-right: 8px;
  }
  .hide { display: none; }  /* 不占任何空间 */
</style>
<a class="btn">按钮一</a>
<a class="btn">按钮二</a>
<span class="hide">看不见的元素</span>

🔗 相关词条span flex grid div 标签元素

📚 推荐阅读

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

移动前端开发经验指南万象云档

Element Plus v2.2 组件库教程万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读