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

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.kler.cn/a/373493.html

相关文章:

  • linux之网络子系统- TCP连接建立过程 三次握手四次挥手
  • 【GO学习笔记 go基础】编译器下载安装+Go设置代理加速+项目调试+基础语法+go.mod项目配置+接口(interface)
  • 未来生活中的AI电脑是怎样的
  • 若依框架部署到服务器后头像资源访问404
  • 输出特殊图案,请在c环境中运行
  • 练习LabVIEW第二十九题
  • 无人机之目标检测算法篇
  • 全自动采集、即时传输:RFID技术为BD数字化装备场尽力!
  • 嵌入式C语言字符串具体实现
  • linux离线安装Ollama并完成大模型配置(无网络)
  • 快速上手 Rust——实用示例
  • (五)Web前端开发进阶2——AJAX
  • int类型的长度为什么不统一?int类型和硬件寄存器有多统一?数据类型长度是编译器决定的?
  • 微服务之间的横向关系与微服务与数据层之间的纵向关系
  • 牛客网 2024Java 最新面试宝典(附答案解析)正式开源
  • linux学习笔记 Ubuntu下的守护进程supervisor安装与多项目部署
  • MySQL查看某个数据库里面每张表的字符集和字符排序集
  • QT QDialog::exec()调用时清除部件所有焦点
  • django5入门【04】Django框架配置文件说明:settings.py
  • 计算机网络:网络层 —— IPv4 数据报的首部格式
  • 开源数据库 - mysql - 组织结构(与oracle的区别)
  • idea连接数据库出现错误的解决方式
  • D3.js 入门指南
  • Media | Android手机投屏方案Mircast、Scrcpy、DLNA实现方式对比
  • Proteus基本元件英文
  • 一文搞懂JDBC全流程(含MySQL安装和JDK下载)