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

行内元素和块级元素分别有哪些?有何区别?怎样转换?

行内元素和块级元素分别有哪些?

常见的块级元素:

p、div、form、ul、li、ol、table、h1、h2、h3、h4、h5、h6、dl、dt、dd

常见的行级元素:

span、a、img、button、input、select

有何区别?

块级元素:

  • 总是在新行上开始,就是每个块级元素独占一行,默认从上到下排列
  • 宽度缺少时是它的容器的100%,除非设置一个宽度
  • 高度、行高以及外边距和内边距都是可以设置的
  • 块级元素可以容纳其它行级元素和块级元素

行内元素:

  • 和其它元素都会在一行显示
  • 高、行高以及外边距和内边距可以设置
  • 宽度就是文字或者图片的宽度,不能改变
  • 行级元素只能容纳文本或者其它行内元素

使用行内元素需要注意的是:

  • 行内元素设置宽度width无效
  • 行内元素设置height无效,但是可以通过line-height来设置
  • 设置margin只有左右有效,上下无效
  • 设置padding只有左右有效,上下无效

怎样转换?

可以通过 display 属性对行内元素和块级元素进行切换

(主要看第 2、3、4三个值):

请添加图片描述


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

相关文章:

  • 计算机杂谈系列精讲100篇-【计算机应用】GPU 架构
  • 如何让企业报修、派单更高效!自动派单系统有什么用?
  • 负电源电压转换-TP7660H
  • wpf devexpress 使用IDataErrorInfo实现input验证
  • 鸿蒙(HarmonyOS)应用开发——容器组件(Grid组件)
  • 阿里云开源通义千问720亿参数模型,性能超越大部分商用闭源大模型
  • mysql使用--备份与恢复
  • 知识管理平台Confluence:win10安装confluence
  • XIAO ESP32S3之AI应用
  • TypeScript与JavaScript封装事件的防抖与节流
  • 如何本地搭建个人hMailServer邮件服务并实现远程发送邮件
  • pycharm中绘制一个3D曲线
  • 代数学笔记9: 群的直积,可解群,自由群,群表示
  • tmux工具--程序部署在服务器上持久化执行
  • mac安装elasticsearch
  • maven之‘settings.xml‘ has syntax errors
  • 优彩云采集器最新版免费下载,优彩云采集器免费
  • 判断上三角矩阵
  • Android RatingBar实现五星好评
  • 【LeetCode 0125】【双指针】有效回文