CSS显示模式与元素转换（元素特性深度解析）
HTML所有元素默认分为三种显示模式，不同模式的元素拥有完全不同的排版特性、宽高规则、换行规则，掌握元素显示模式是精准布局的基础。CSS可以通过display属性自由切换元素显示模式，灵活适配各类布局需求，解决元素默认排版的局限性。三种基础显示模式分别为：块级元素、行内元素、行内块元素。
块级元素（display: block）：常见标签包含div、p、h1-h6、ul、li、section等。核心特性：独占一整行，自动换行，不会与其他元素同行显示；支持设置width、height、padding、margin所有尺寸和间距属性；默认宽度为父容器100%，默认高度由自身内容撑开。适用场景：页面大模块布局、区块划分、段落标题排版，是页面结构搭建的核心元素。
行内元素（display: inline）：常见标签包含span、a、em、i、strong等。核心特性：可以和其他行内、行内块元素同行显示，不会自动换行；无法设置宽高，width、height属性无效；上下padding、margin不生效，仅左右间距生效；元素尺寸完全由内部内容决定。适用场景：文本局部修饰、文字高亮、行内链接、小字标签等行内内容调整。
行内块元素（display: inline-block）：常见默认标签有img、input、button、textarea等，是结合了块级和行内优点的特殊模式。核心特性：支持同行排列，不自动换行；可以自由设置宽高、内外边距；无默认尺寸，完全自定义。适用场景：按钮、图标、输入框、小卡片等需要同行排列且自定义尺寸的元素。唯一缺点：同行行内块元素会受空白文本影响，出现微小间距，可通过父元素清零字体、浮动、flex布局规避。
常用显示模式转换实战用法：1、行内元素转块级（display: block）：让a标签、span标签独占一行、设置宽高，常用于导航按钮、修饰区块；2、块级转行内块（display: inline-block）：让div、标题等块级元素同行排列，适配简单多列布局；3、隐藏元素（display: none）：元素彻底消失，不占位、不占用页面空间，区别于visibility: hidden（隐藏但保留占位）。熟练运用display转换，可以快速解决90%的基础排版错位问题。
三类元素显示特性：1、块级元素（div/p/h1）：独占一行、可设置宽高、默认宽度100%；2、行内元素（span/a）：同行显示、不可设置宽高、宽高由内容决定；3、行内块元素（img/input）：同行显示、可设置宽高，兼具两者优点。
显示模式转换：display:block转为块级、display:inline转为行内、display:inline-block转为行内块，是布局微调的核心技巧。
