当前位置: 首页 > article >正文

前端:块级元素和行内元素

在HTML和CSS中,元素根据其显示类型(display type)被分为行内元素(inline elements)和块级元素(block-level elements)。以下是一些常见的行内和块级元素的列表:

行内元素(Inline Elements)

行内元素在页面上与其他内容同行显示,通常不会独占一行。

  • <span>
  • <a>(当设置为 display: inline;display: inline-block; 时)
  • <img>
  • <br>
  • <i>
  • <b>
  • <u>
  • <small>
  • <sub>
  • <sup>
  • <label>
  • <input>
  • <textarea>
  • <button>
  • <select>
  • <option>

块级元素(Block-Level Elements)

块级元素在页面上通常独占一行,并且可以设置宽度和高度

  • <div>
  • <p>
  • <h1><h6>(标题元素)
  • <blockquote>
  • <li>
  • <ul>
  • <ol>
  • <hr>
  • <pre>
  • <address>
  • <article>
  • <section>
  • <header>
  • <footer>
  • <table>

既可以是行内也可以是块级元素(根据上下文)

一些元素既可以表现为行内元素也可以表现为块级元素,这取决于它们的上下文或CSS样式。

  • <a>(链接)可以是行内的,也可以是块级的,取决于 display 属性的设置。
  • <div> 默认是块级元素,但可以通过设置 display: inline;display: inline-block; 来表现为行内元素。
  • <span> 默认是行内元素,但可以通过设置 display: block; 来表现为块级元素。

注意事项

  • 行内元素不能包含块级元素,但块级元素可以包含行内元素
  • display 属性可以覆盖元素的默认显示类型,允许你自定义元素的行为。
  • 一些元素,如 <input><img><br>,虽然在大多数情况下表现为行内元素,但它们具有特殊的布局行为,可能不完全遵循行内元素的规则。

了解这些基本的行内和块级元素有助于你更好地控制页面布局和元素的显示方式。


http://www.kler.cn/a/394026.html

相关文章:

  • 「Mac玩转仓颉内测版12」PTA刷题篇3 - L1-003 个位数统计
  • Java结合ElasticSearch根据查询关键字,高亮显示全文数据。
  • Leecode热题100-35.搜索插入位置
  • kafka面试题解答(四)
  • 树形dp总结
  • 【数据结构】交换排序——冒泡排序 和 快速排序
  • ESLint 使用教程(四):ESLint 有哪些执行时机?
  • 在卷积神经网络中真正占用内存的是什么
  • Oracle ADB 导入 BANK_GRAPH 的学习数据
  • Spring Boot编程训练系统:设计与实现要点
  • 使用python-Spark使用的场景案例具体代码分析
  • TR3:Pytorch复现Transformer
  • 12306中如何知道用户使用的哪种登录方式?(用户名、邮箱、手机号)
  • 力扣-Mysql-3328-查找每个州的城市 II(中等)
  • 【Android】View—基础知识,滑动,弹性滑动
  • 从前端react动画引发到计算机底层的思考
  • faiss 提供了多种索引类型
  • 开源音乐分离器Audio Decomposition:可实现盲源音频分离,无需外部乐器分离库,从头开始制作。将音乐转换为五线谱的程序
  • AutoHotKey自动热键AHK-正则表达式
  • 蓝队基础4 -- 安全运营与监控
  • 15分钟学 Go 第 53 天 :社区资源与学习材料
  • vscode vite+vue3项目启动调试
  • 解决VsCode无法跳转问题
  • Jmeter基础篇(24)Jmeter目录下有哪些文件夹是可以删除,且不影响使用的呢?
  • 小试银河麒麟系统OCR软件
  • 股指期货套利交易详解