HTML 块级元素和行内元素的区别

区别

块级元素	行内元素
自己独占一行	可以和其他元素在一行
高度、宽度都是可控的	高度、宽度以及内边距都是不可控的
宽度没有设置时，默认为100%	宽高就是内容的高度，不可以改变
块级元素中可以包含块级元素和行内元素	行内元素只能行内元素，不能包含块级元素

若想将块级元素改为行内块元素，则需要加样式 display: inline-block;
若想将行内元素改为块级元素，则需要加样式 display:block;

---

块级元素

• <div>…</div>
• <address>…</adderss>
• <center>…</center> 地址文字
• <h1>…</h1> 标题一级
• <h2>…</h2> 标题二级
• <h3>…</h3> 标题三级
• <h4>…</h4> 标题四级
• <h5>…</h5> 标题五级
• <h6>…</h6> 标题六级
• <hr> 水平分割线
• <p>…</p> 段落
• <pre>…</pre> 预格式化
• <blockquote>…</blockquote> 段落缩进 前后5个字符
• <marquee>…</marquee> 滚动文本
• <ul>…</ul> 无序列表
• <ol>…</ol> 有序列表
• <dl>…</dl> 定义列表
• <table>…</table> 表格
• <form>…</form> 表单

行内元素

• <span>…</span>
• <a>…</a> 链接
• <br> 换行
• <b>…</b> 加粗
• <strong>…</strong> 加粗
• <img > 图片
• ^… 上标
• _… 下标
• <i>…</i> 斜体
• <em>…</em> 斜体
• <del>…</del> 删除线
• <u>…</u> 下划线
• <input>…</input> 文本框
• <textarea>…</textarea> 多行文本
• <select>…</select> 下拉列表