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

HTML 块级元素与行内元素有哪些以及注意、总结

行内元素和块级元素是HTML中的两种元素类型,它们在页面中的显示方式和行为有所不同。

块级元素(Block-level Elements):

常见的块级元素有div、p、h1-h6、ul、ol、li、table、form等。

块级元素会独占一行,即使没有设置宽度,也会自动填充父容器的宽度。

块级元素可以设置宽度、高度、内外边距等属性。

块级元素可以包含其他块级元素和行内元素。

行内元素(Inline Elements):

常见的行内元素有span、a、img、strong、em、input、label等。

行内元素不会独占一行,它会在同一行内根据内容的大小自动排列。

行内元素的宽度和高度由内容决定,不能直接设置宽度和高度属性。

行内元素的内外边距只影响元素自身的排列,不会改变其他元素的位置。

行内元素不能包含块级元素,只能包含其他行内元素或文本内容。

需要注意的是,HTML5中的一些元素可以根据上下文的不同表现出块级元素或行内元素的特性。例如,a标签在默认情况下是行内元素,但如果给a标签设置display: block;属性,它就会变成块级元素。

总结:

行内元素和块级元素在页面布局和样式设置上有着不同的表现。块级元素会独占一行,可以设置宽度、高度和内外边距,可以包含其他块级元素和行内元素;行内元素在同一行内根据内容大小排列,不能设置宽度和高度,内外边距只影响元素自身的排列,只能包含其他行内元素或文本内容。


http://www.kler.cn/news/160963.html

相关文章:

  • EasyExcel如何读取全部Sheet页数据方法
  • leetcode刷题:611.有效三角形的个数(双指针实现)
  • C++中单引号‘‘和双引号““的区别
  • Linux内核上游提交完整流程及示例
  • 多人聊天室
  • Python实现广义线性回归模型(statsmodels GLM算法)项目实战
  • Oracle 查询语句限制只选择最前面几行,和最后面几行的实现方式。
  • GAN:WGAN前作
  • 【玩转TableAgent 数据智能分析】-- 数据分析不再是专业人士的专利
  • 如何使用Net2FTP轻松部署本地Web文件管理器并远程访问管理内网资源?
  • [⑦ADRV902x]: JESD204学习笔记
  • 【Spark基础】-- 宽窄依赖
  • 【学习笔记】插值之拉格朗日插值(Lagrange)
  • springboot中@Builder注解的详细用法实例,跟数据库结合。
  • Leetcode226. 翻转二叉树
  • Python语言基础知识(一)
  • 第三方实验室LIMS管理系统源码,asp.net LIMS源码
  • java实现Modbus通信
  • 文心一言大模型应用开发入门
  • 外汇市场中的多头和空头究竟是什么?如何通过K线图来辨别它们呢?
  • 快速排序并不难
  • 0008Java程序设计-ssm校友录网站小程序
  • docker安装配置prometheus+node_export+grafana
  • 香港科技大学广州|机器人与自主系统学域博士招生宣讲会—北京专场!!!(暨全额奖学金政策)
  • 【微信小程序开发】小程序的事件处理和交互逻辑(最详细)
  • 前端数据加密相关问题
  • LLM之RAG实战(一):使用Mistral-7b, LangChain, ChromaDB搭建自己的WEB聊天界面
  • Qt之基于QMediaPlayer的音视频播放器(支持常见音视频格式)
  • k8s之Pod常用命令详解、镜像拉取策略(imagePullPolicy)
  • 学生成绩管理系统(Java)