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

CSS行块标签的显示方式

块级元素

标签:h1-h6,p,div,ul,ol,li,dd,dt
特点:
(1)如果块级元素不设置默认宽度,那么该元素的宽度等于其父元素的宽度。
(2)所有的块级元素独占一行显示.
(3)可以为块级元素设置宽度和高度

行内元素

标签:span a b font strong…
特点:
(1)所有的行内元素都在一行上显示
(2)行内元素不能设置宽度和高度

行内块元素

标签:input img
特点:
(1)可以设置宽度和高度
(2)元素在一行上显示

元素模式转换

转换块级元素
display:block
转换为行内元素
display:inline ,转为行内的话,宽高立马失效
转换为行内块元素
display:inline-block
注意:一半情况下,要把行内元素设置宽度和高度的话,我们考虑将行内元素转化为块级元素或行内块元素。不需要将行内块转化为其他的

京东的导航条

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
行内元素a标签放在块元素内,ul ,li是块元素,所有有个效果,在箭头这里,鼠标指针移到“”秒杀“”文字这里,字体就变红色,a标签被转为块元素,可以设置宽高,独占一行,但是外面是li,li加了浮动float:left样式,所以会排成一行。
在这里插入图片描述
在这里插入图片描述

http://www.lryc.cn/news/469512.html

相关文章:

  • Go 语言中的 for range 循环教程
  • 青训营 X 豆包MarsCode 技术训练营--小M的比赛胜场计算
  • 海王3纯源码
  • 【ShuQiHere】Linux 系统中的硬盘管理详解:命令与技巧
  • 数据结构之堆和二叉树的简介
  • 微信小程序上传图片添加水印
  • xshell5找不到匹配的host key算法
  • Linux中安装Tomcat
  • RV1126音视频学习(二)-----VI模块
  • 「C/C++」C++17 之 std::string_view 轻量级字符串视图
  • Linux内核-内核模块内核参数
  • 中电信翼康工程师:我在 Apache SeaTunnel 社区的贡献之旅
  • 【ESP32S3】VSCode 开发环境搭建
  • 大模型,多模态大模型面试问题基础记录24/10/24
  • 使用TimeShift备份和恢复Ubuntu Linux
  • win7现在还能用吗_哪些配置的电脑还可以安装win7系统
  • 基于GPT的智能客服落地实践
  • Sourcetree和GitLab的结合使用
  • 双十一开启极速达夜派;黑神话获泰国年度最佳游戏;AI 模型可帮助识别 17000 多种疾病的候选药物....| 网易数智日报
  • 深入理解JAVA虚拟机(一)
  • 从Excel文件中读取数据
  • 深入剖析MySQL的索引机制及其选型
  • 校园表白墙源码修复版
  • Android 内存优化——常见内存泄露及优化方案
  • Qt6.7.2中使用OpenSSL的坑
  • Mybatis-08.基础操作-删除
  • 通过FDM升级Firepower
  • 使用 Kibana 将地理空间数据导入 Elasticsearch 以供 ES|QL 使用
  • demo说明
  • 【c++篇】:从基础到实践--c++内存管理技巧与模版编程基础