1、什么是行内元素，什么是行内块元素，什么是块级元素

行内元素的特点：

不独占一行，相邻元素会在同一行显示，直到一行排不下才换行。

宽度和高度由内容本身决定，无法通过width，height手动设置（设置无效）。

上下的margin和padding仅在水平方向有效，垂直方向不影响布局（不会推开上下元素）。

常见的行内元素：

<span>常用作文本容器，无默认样式

<a>链接标签，可嵌套文本或其他行内元素

<strong>文本加粗

<em>文本斜体

<code>表示代码片段，默认等宽字体

<br>换行符（单标签）

<img>其实默认是inline-block,但常被误认为行内元素（见下方说明）

行内块元素的特点：

不独占一行，相邻元素在同一行显示（同行为内元素）

可以通过width，height手动设置宽高（同块级元素）

水平和垂直方向的margin，padding都有效，会影响布局

常见的行内块元素为：

<img>:图片标签，默认display：inline-block（可设置宽高，且不独占一行）

<input>表单输入框（文本框，按钮等）

<button>按钮元素

<textarea>多行文本输入框

<select>下拉选择框

块级元素的特点：

块级元素是一类默认以块形式展示的元素，其核心特点是独占一行空间，并会在前后自动换行，常用于构建页面的整体结构布局（如布局，分区等）

块级元素的主要特性：

独占一行，默认情况下，块级元素会占据其父元素的整个宽度（除非手动设置width），且前后元素会被强制换行，即一个块级元素单独占一行。

可设置宽高，可以通过width和heightcss属性手动指定宽度和高度（默认宽度为父元素的100%，高度由内容撑开）

margin和padding全方向有效：水平和垂直方向的margin和padding都会生效，且会影响布局

可嵌套其他元素

常见的块级元素:

<div>最常用的通用块级容器，无默认样式，用于布局分区

<h1>-<h6>标题元素

<p>段落元素，用于文本段落，默认由上下外边距，不能嵌套块级元素

<ul>/<ol>无序列表/有序列表，内部可包含<li>

<li>列表项，属于会计元素，通常嵌套在<ul>或<ol>中

/* 将行内元素 <span> 转为块级元素 */
span { display: block; }/* 将块级元素 <div> 转为行内块元素 */
div { display: inline-block; }