块级元素默认display: block，独占一行、可设宽高及完整边距，常见如div、p、h1–h6、ul、ol、li、header、footer；行内元素默认display: inline，同行排列、宽高由内容决定、垂直margin无效，常见如span、a、strong、em、img、input。
哪些HTML标签默认是display: block
浏览器对每个HTML元素都有默认的display值，块级元素的默认值就是block。这不是靠猜或记忆，而是由HTML规范明确定义的——你查MDN或WHATWG HTML标准都能验证。
常见且高频使用的默认块级元素包括：
-
div、p、h1–h6 -
ul、ol、li、dl、dt、dd -
blockquote、pre、hr、address -
form、table、fieldset、noscript - HTML5语义化标签：
header、footer、nav、main、section、article、aside、figure
注意：hr和br常被混淆——hr是块级（HTML5明确为display: block），而br是行内元素，只起换行作用，不占布局空间。
input、img、button是不是块级元素？
不是。它们默认不是block，而是inline或inline-block：
-
input和button默认是inline（但属于“替换元素”，可设宽高，行为接近inline-block） -
img默认是inline，但因是替换元素，在多数浏览器中表现得像inline-block（能设宽高、上下margin生效）
所以别凭“能设width”就判断它是块级——关键看默认display值和是否自动换行。比如把两个input写在一行，它们真会并排，不会像div那样强制断行。
为什么span里面不能直接放div？
因为span是默认inline元素，而HTML规范禁止在行内元素中嵌套块级元素（如div、p、h1等）。这种嵌套虽可能被浏览器“容错渲染”，但：
- 会触发HTML解析警告（DevTools Console里可见）
- 在XHTML或严格模式下直接报错
- 可能导致意外的换行、折叠或样式失效（比如
span的line-height突然被div撑开）
正确做法：要么改用div包裹，要么给span加display: block或inline-block，再确认子元素是否语义合规。
用CSS强行改display会不会出问题？
一般不会，但要注意三点：
- 改变
display只影响视觉渲染，不改变语义。比如把h1设成inline，它仍是标题级语义，对SEO和屏幕阅读器无影响，但布局上就失去“独占一行”的天然保障 - 某些元素有隐式限制：例如
table相关标签（tr、td）设block后，内部结构可能断裂，表格逻辑失效 - 表单控件如
select、textarea设inline后，虽然能并排，但vertical-align容易错位，需手动调line-height或vertical-align: top/middle
真正容易被忽略的，是把“能设宽高”和“是块级”划等号——这会导致你在调试布局时反复怀疑CSS，其实根源在元素默认行为和语义约束上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
