布局基础：HTML元素分类与转换规则

梳理HTML行内元素、块级元素、空元素的特性与代表标签，掌握display属性实现元素类型转换，夯实页面布局底层基础。

想要精通网页布局，必须先理解HTML元素的默认显示特性。所有HTML标签可统一划分为行内元素、块级元素、空元素三大类，不同类型的元素布局规则完全不同，熟练区分特性是灵活排版页面的前提。

块级元素是页面布局的核心容器，默认独占一整行，自动换行，支持自定义宽高、内外边距、边框样式，可嵌套其他标签和文本。常用标签包含div、h1-h6、p、ul、form等，多用于页面模块划分、标题展示、正文排版，其中div是最通用的布局容器，广泛用于页面结构搭建。

行内元素又称内联元素，默认横向排列，多个标签可以同行显示，宽高由内容自适应，无法直接自定义宽高和上下边距。常用标签有span、a、strong、em、input等，多用于文本局部修饰、行内按钮、文字高亮等场景。

空元素为自闭合标签，无结束标记，内部无法嵌套内容，主要用于实现特定功能，常见的有br换行标签、hr分割线标签、img图片标签，是页面基础功能的重要组成部分。

默认的元素特性无法适配所有布局场景，通过CSS display属性可以灵活转换元素类型，三个核心属性值实用性极强：display:block 将元素转为块级，实现独占一行、自定义宽高；display:inline 转为行内元素，实现同行排列；display:inline-block结合两者优势，既可以同行排列，又能设置宽高边距，是导航、多列布局的常用属性。