css显示模式

HTML元素默认分为块级元素、行内元素、行内块元素三种显示模式，不同模式具备专属布局特性，直接决定元素的宽高、间距、排列方式。新手想要精准控制页面布局，必须吃透显示模式特性，这是解决布局错乱、元素排列异常的核心关键。

块级元素典型代表有div、p、h1-h6、ul。核心特性是独占一行，默认宽度铺满父容器，高度由内容撑开。支持设置宽高、内外边距、边距属性，可自由控制布局尺寸，是页面布局的主力元素。其中div是最万能的块级容器，无默认样式，专门用于页面模块划分、布局包裹，是网页布局的核心载体。

行内元素典型代表有span、a、i。核心特性是同行排列，多个行内元素可并排显示，宽度和高度由内容撑开，无法直接设置宽高。上下内外边距设置无效，仅支持左右间距，常用于局部文字修饰、小范围样式调整，不适合整体布局排版。

行内块元素典型代表有img、input，是结合两者优势的特殊模式。既可以同行排列，又支持设置宽高、边距属性，无需手动转换，天生适配图片、按钮等需要并排展示且固定尺寸的元素，实用性极强。

开发者可通过 display 属性自由转换显示模式，解决布局问题。 display: block 转为块级元素，可让a标签、span标签支持宽高设置； display: inline-block 转为行内块，让div模块并排排列； display: none 隐藏元素，页面不占用空间，适合弹窗隐藏、模块切换场景。