重学前端系列
说到HTML分类,其实HTML分类标准有很多种。本文介绍按默认样式分类。

块级元素 block

顾名思义,所谓的块级元素就是占据一块区域,占据整行,有自己的宽高等尺寸。

块级元素的特点:

  • 块级元素会独占一行;
  • 高度,行高,外边距和内边距都可以单独设置;
  • 宽度默认是容器的100%;
  • 可以容纳内联元素和其他的块级元素。

块级元素列表:

 <address>//定义地址 
 <article> //文章内容
 <aside> //伴随内容
 <caption>//定义表格标题 
 <dd>    //定义列表中定义条目 
 <div>     //定义文档中的分区或节 
 <dl>    //定义列表 
 <dt>     //定义列表中的项目
 <figcaption> //图文信息组标题
 <fieldset> //定义一个框架集 
 <form> //创建 HTML 表单
 <figure> //图文信息组
 <h1>    //定义最大的标题
 <h2>    // 定义副标题
 <h3>     //定义标题
 <h4>     //定义标题
 <h5>     //定义标题
 <h6>     //定义最小的标题
 <hr>     //创建一条水平线
 <legend>    //元素为 fieldset 元素定义标题
 <li>     //标签定义列表项目
 <noframes>    //为那些不支持框架的浏览器显示文本,于 frameset 元素内部
 <noscript>    //定义在脚本未被执行时的替代内容
 <ol>     //定义有序列表
 <ul>    //定义无序列表
 <p>     //标签定义段落
 <pre>     //定义预格式化的文本
 <table>     //标签定义 HTML 表格
 <tbody>     //标签表格主体(正文)
 <td>    //表格中的标准单元格
 <tfoot>     //定义表格的页脚(脚注或表注)
 <th>    //定义表头单元格
 <thead>    //标签定义表格的表头
 <tr>     //定义表格中的行
 <output> //表单输出
 <audio> //音频播放
 <footer> //区段尾或页尾 <blockquote> //块引用
 <canvas> //绘制图形
 <section> //一个页面区段
 <header> //区段头或页头
 <hgroup> //标题组
 <video> //视频
MDN 参考链接:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Block-level_elements

行内元素 inline

inline有时也被称为内联元素,这种元素不一定有规则形状,也不会独占一行,会与其他元素和谐的挤在一起,没有自己的宽高,仅仅依靠自己的字体大小或者是图像大小来支撑结构,不能设置宽高对齐等属性。

行内元素的特点:

  • 和相邻的行内元素在一行上;
  • 高度和宽度无效,但是水平方向上的padding和margin可以设置,垂直方向上的无效;
  • 默认的宽度就是它本身的宽度;
  • 行内元素只能容纳纯文本或者是其他的行内元素(a标签除外)。

注意事项:

  • 只有文字才能组成段落,因此类似<p>,<h1>~<h6>,<dt>等里面不能放块级元素,因为它们都是文字块级标签,里面不能再存放其他的块级标签;
  • 链接里面不能再存放链接。

行内元素列表:

b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea
MDN 参考链接:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Inline_elements

行内块级元素 inline-block

这种元素也被称为内联块级元素,和inline元素一样与其他元素堆在一行内,和谐共处,对外表现看起来像一个inline元素,对内表现为block,可以设置宽高等尺寸。也可以在一行中放置多个行内块级元素.

行内块级元素的特点:

  • 和相邻的行内元素(行内块)在一行上,但是中间会有空白的间隙;
  • 默认的宽度就是本身内容的宽度;
  • 高度,行高,内边距和外边距都可以设置。

注意事项:
在行内块级元素中有几个特殊的标签,<img/>,<input/>,<td/>,可以设置它们的宽度高度以及对齐属性.

元素类型转换display

  • display:block;定义元素为块级元素;
  • display : inline;定义元素为行内元素;
  • display:inline-block;定义元素为行内块级元素。

总结

不管块级元素还是行内元素,区别主要是三个方面:

  • 排列方式:块级元素会独占一行,而内联元素和内联块元素则会在一行内显示;
  • 宽高边距设置:块级元素和内联块级元素可以设置 width、height属性,而内联元素设置无效;
  • 默认宽度:块级元素的 width 默认为100%,而内联元素则是根据其自身的内容或子元素来决定其宽度。
最后修改日期:2020-03-12

留言

撰写回覆或留言

发布留言必须填写的电子邮件地址不会公开。