这是一个考察 HTML 元素默认行为和 CSS display 属性知识的面试题。回答时需要清晰分类，并展示对现代布局的理解。
一、默认 display: block 的元素
这类元素在页面中独占一行，会从新行开始，并尽可能撑满其父容器的宽度。
常见示例：
- 结构化容器：
<div>,<section>,<article>,<aside>,<nav>,<header>,<footer>,<main>,<figure>,<figcaption> - 标题：
<h1>到<h6> - 段落：
<p> - 列表：
<ul>,<ol>,<li>,<dl>,<dt>,<dd> - 表单块级元素：
<form>,<fieldset>,<legend>,<textarea>,<select>(注意：<input>多为 inline 或 inline-block) - 其他：
<hr>(水平线),<pre>(预格式化文本),<blockquote>(块引用),<address>
特点：可以设置
width,height,margin,padding等盒模型属性。
二、默认 display: inline 的元素
这类元素在行内排列，不会独占一行，宽度和高度由其内容决定。
常见示例：
- 文本级元素：
<span>,<a>,<strong>,<em>,<b>,<i>,<u>,<s>,<small>,<cite>,<code>,<var>,<samp>,<kbd>,<sub>,<sup>,<abbr>,<time>,<mark> - 图片：
<img>(注意：<img>实际默认是inline，但常被视为inline-block因为它可以设置宽高) - 表单内联元素：
<input>,<label>,<button>,<select>(部分状态),<textarea>(部分状态) - 其他：
<br>(换行符),<wbr>(可选断字点),<data>,<output>
特点：不能直接设置
width和height。margin和padding只在水平方向有效，垂直方向可能表现异常。
三、重要的补充：display: inline-block
虽然问题没问，但这是关键的第三种类型，结合了 block 和 inline 的特性。
默认 inline-block 的元素：
<img>(图像)<input>(表单输入框)<button>(按钮)<select>(下拉框)<textarea>(文本域)
特点：在行内排列，但可以设置
width,height,margin,padding等所有盒模型属性。常用于创建并排的按钮、导航项等。
四、其他重要的 display 取值
除了基础的 block, inline, inline-block，现代 CSS 提供了强大的布局模型：
1. Flexbox 布局
flex：使元素成为弹性容器，其子元素成为 flex 项目，可进行一维（行或列）灵活布局。inline-flex：类似于flex，但容器本身表现为行内元素。
2. Grid 布局
grid：使元素成为网格容器，其子元素成为网格项目，可进行二维（行和列）复杂布局。inline-grid：类似于grid，但容器本身表现为行内元素。
3. 表格相关
table：像<table>一样显示。table-row：像<tr>一样显示。table-cell：像<td>或<th>一样显示。table-caption,table-column,table-header-group等。- 用途：实现等高列、复杂对齐等，但语义上应优先使用真正的
<table>。
4. 列表相关
list-item：像<li>一样显示，包含::marker(项目符号)。
5. 定位相关
none：元素不显示，不占据空间（与visibility: hidden不同）。
6. 现代布局与显示
contents：元素本身不产生盒子，但其子元素会成为其父元素的子元素。可用于“扁平化”DOM 结构。flow-root：创建一个新的块级格式化上下文（BFC），常用于清除浮动，替代overflow: hidden等 hack 方法。
五、面试加分点
<img>的争议：明确指出<img>默认是inline，但由于它可以设置宽高，行为类似inline-block。在实际布局中常被当作inline-block使用。display: nonevsvisibility: hidden：能区分前者不占空间，后者占空间但不可见。- BFC (块级格式化上下文)：提到
flow-root或flex/grid容器会创建 BFC，解决外边距塌陷、清除浮动等问题。 - 响应式设计：
flex和grid是现代响应式布局的核心。 - 可访问性：改变
display可能影响可访问性树（Accessibility Tree），例如将div设为button的display但不加role="button"是不正确的。
总结回答示例
默认
display: block的元素有<div>,<p>,<h1>-<h6>,<ul>,<li>等，它们独占一行。默认display: inline的元素有<span>,<a>,<strong>,<em>,<img>等，它们在行内排列，不能直接设置宽高。此外，<input>,<button>等是inline-block。其他重要的
display取值包括：
flex/inline-flex：弹性布局容器。grid/inline-grid：网格布局容器。table/table-row/table-cell：模拟表格显示。none：元素不显示且不占空间。flow-root：创建 BFC，用于清除浮动。现代布局中，
flex和grid是构建复杂、响应式界面的首选。
THE END
