HTML所有元素默认分为三类，核心区别体现在排版方式、宽高设置、边距特性、默认布局，是CSS布局的基础核心。
1. 块级元素（block）
常见标签：div、p、h1-h6、ul、ol、li、section、article、header、footer、form
核心特性：
独占一行，默认从上到下垂直排列
宽度默认100%继承父级宽度
可以设置 width、height、padding、margin（上下左右全部生效）
可以嵌套块级元素、行内元素、行内块元素（p标签除外，p不能嵌套块级）
2. 行内元素（inline）
常见标签：span、a、em、strong、i、b、u、label
核心特性：
不独占一行，从左到右水平排列，自动换行
宽度高度默认由内容撑开，无法手动设置 width、height
padding、margin仅左右生效，上下无效
只能嵌套行内元素，不能嵌套块级元素
3. 行内块元素（inline-block）
常见标签：img、input、button、select、textarea
核心特性（兼顾两者优点）：
不独占一行，水平排列
可以手动设置 width、height、padding、margin（上下左右全部生效）
默认存在空白间距问题（换行、空格导致），可通过父级 font-size:0 清除
4. 三者核心区别对照表
元素类型 | 排列方式 | 宽高设置 | 边距特性 | 典型标签 |
|---|---|---|---|---|
块级元素 | 独占一行、垂直排列 | 可设置宽高 | 上下左右边距全部生效 | div、p、h系列、section |
行内元素 | 同行排列、水平布局 | 不可设置宽高 | 仅左右边距生效 | span、a、em、strong |
行内块元素 | 同行排列、水平布局 | 可设置宽高 | 上下左右边距全部生效 | img、input、button |
