欢迎访问覃师宁博客!

html中常见块级元素与内联元素的区别与转换

在前端开发过程中,块级元素与内联元素的区别与转换是必须要掌握的内容。因为如果不熟悉html中哪些元素是块级元素,哪些元素是内联元素,写入css时难免会遇到这样那么的问题。

常见的块级元素(block):

  • <div>最常用的块级元素
  • <h1>-<h6>标题标签
  • <p>段落标签
  • <ul>无序列表标签
  • <ol>有序列表标签
  • <li>定义列表项目标签
  • <form>创建表单元素标签

其他块状元素:

  • <address>定义地址标签
  • <caption>定义表格标题标签
  • <dd>定义列表中定义条目标签
  • <dl>定义列表标签
  • <dt>定义列表中的项目标签
  • <fieldset>定义一个框架集标签
  • <hr>水平线标签
  • <legend>给fieldset元素定义标题标签
  • <noframes>为那些不支持框架的浏览器显示文本,放置于frameset标签内
  • <noscript>为那些不支持脚本的浏览器显示文本
  • <pre>定义预格式化文本
  • <table>定义表格
  • <tbody>定义表格主体
  • <td>表格中的标准单元格
  • <tr>表格中的行
  • <tfoot>表格中的页脚
  • <th>定义表头单元格
  • <thead>定义表格的表头

常见的内联元素(行内元素)(inline):

  • <a>a标签定义超链接或者锚点
  • <img>向网页中嵌入一张图像
  • <span>组合文档中的行内元素
  • <strong>语气更强的强调内容
  • <input>输入框

其他内联元素:

  • <abbr>表示一个缩写形式
  • <acronym>表示只取title中首字母的缩写形式
  • <b>字体加粗
  • <bdo>可覆盖默认的文本方向
  • <big>大号字体加粗
  • <br>换行
  • <cite>引用进行定义
  • <code>定义代码文本
  • <dfn>定义一个定义项目
  • <em>定义为强调的内容
  • <i>斜体文本效果
  • <kbd>定义键盘文本
  • <label>为input进行标记/标注
  • <q>定义短的引用
  • <s>表示不准确不相关,却不应当给予删除的内容
  • <samp>定义样本文本
  • <select>定义单选或者多选菜单
  • <small>呈现小号字体效果
  • <sub>定义下标文本
  • <sup>定义上标文本
  • <textarea>多行文本输入控件
  • <tt>打字机或者等宽的文本效果
  • <var>定义变量

TIPS:<input>和<img>都是行内元素,但是它们是可以设置宽和高的。

块级元素与内联元素的区别

块状元素:

1、块级元素会独占一行,默认情况下宽度自动填满其父元素宽度 

2、块级元素可以设置宽高 

3、块级元素可以设置margin,padding

内联元素:

1、内联元素(inline)不会独占一行,相邻的内联元素会排在同一行。其宽度随内容的变化而变化。 

2、内联元素不可以设置宽高 

3、内联元素可以设置但只在水平方向有效:margin-left、margin-right、padding-left、padding-right

4、代码换行,盒子之间会产生间距

5、子元素是内联元素,父元素可以用 text - align 属性设置子元素水平对齐方式

html中常见块级元素与内联元素的区别与转换

块级元素与内联元素之间的转换

块级元素与内联元素之间用display标签进行转换

display属性主要是设置元素的类型及隐藏的,常用的属性有:

  • display:none 元素隐藏而且不占位置
  • display:block 元素以块级元素显示
  • display:inline 元素以内联元素显示
  • display:inline - block 元素以内联块元素显示

也就是说块级元素可以通过display:inline 元素以内联元素显示、或者display:inline - block 元素以内联块元素显示

而内联元素可以通过display:block 元素以块元素显示

    猜你喜欢

    无相关信息

文章评论

人参与,共有 0 条评论

为了响应国家网信办《网站要对跟帖评论审核管理规定》,网站评论将审核后发表