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样式,所以会排成一行。
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/901300.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

安卓在windows连不上fastboot问题记录

fastboot在windows连不上fastboot 前提是android studio安装 google usb driver 搜索设备管理器 插拔几次找安卓设备 在其他设备 或者串行总线设备会出现安卓 右键更新驱动 下一步下一步然后可以了

【FISCO BCOS】二十二、使用Key Manager加密区块链节点

#1024程序员节|征文# 落盘加密是对节点存储在硬盘上的内容进行加密,加密的内容包括:合约的数据、节点的私钥。具体的落盘加密介绍,可参考:落盘加密的介绍,今天我们来部署并对节点进行落盘加密。 环境&a…

高效文本编辑与导航:Vim中的三种基本模式及粘滞位的深度解析

✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢,在这里我会分享我的知识和经验。&am…

Bode图(波特图)

波特图: 通常用波特图分析信号的频率响应。 对设计滤波器的人来说,比较关注的是在特定的频率内,到底有怎样的增益和相移。根据前面分析的内容,波特图刚好是研究增益和相移。所以要想设计一个满足性能的滤波器,必须要…

react18中在列表中如何使用useCallback进行渲染优化

实现的需求:在列表中如何缓存每个子组件,父组件重新渲染,子组件不更新,下面的列子假设 Chart 组件被包裹在memo 中。你希望在 ReportList 组件重新渲染时跳过重新渲染列表中的每个 Chart。但是,你不能在循环中调用 use…

详细分析Pytorch中的masked_fill基本知识(附Demo)

目录 1. 基本知识2. Demo 1. 基本知识 基本的原理知识如下: 输入张量和掩码: masked_fill 接受两个主要参数:一个输入张量和一个布尔掩码 掩码的形状必须与输入张量相同,True 表示需要填充的位置,False 表示保持原值 …

TikTok运营对IP有什么要求?

TikTok在进行直播带货时,网络环境的配置尤为关键,网络质量直接影响到直播效果,因此选择稳定的IP地址很重要。那么,TikTok直播时该选择什么样的IP地址呢?接下来,我们来深入分析一下。 TikTok对IP地址的要求 …

HBuilder X 中Vue.js基础使用->计算属性的应用(三)

一、通过简单的计算属性&#xff1a;对两数进行加法&#xff0c;减法&#xff0c;乘法&#xff0c;除法运算 <template><div><h1>computed 计算属性</h1><el-input type"text" v-model"numOne" /> <el-input type"t…

容器化核心快速入门

概述 物理机&#xff1a;好比是独立的大船&#xff0c;独立发动机&#xff0c;独立船舱。所有资源共用。运水果的同时就不能运鱼&#xff08; 1964年&#xff09;虚拟机&#xff1a;相当于把大船进行改造&#xff0c;把大船的资源进行独立的拆分&#xff0c;独立的部分都有单独…

【Linux学习工具篇】之vim编辑器和gcc编译器

&#x1f4c3;博客主页&#xff1a; 小镇敲码人 &#x1f49a;代码仓库&#xff0c;欢迎访问 &#x1f680; 欢迎关注&#xff1a;&#x1f44d;点赞 &#x1f442;&#x1f3fd;留言 &#x1f60d;收藏 &#x1f30f; 任尔江湖满血骨&#xff0c;我自踏雪寻梅香。 万千浮云遮碧…

Jmeter使用js对入参使用MD5加密

新增前置处理器JSR223 PreProcessor 注意: 加密的js文件需要放到jmtere的bin目录下,不需要使用给包围,如下图即可(这里不是真实的加密方法,需要自己引入加密算法) 脚本中不要使用let需要使用var 可以先尝试最简单的脚本在使用复杂的脚本 load方法用来加载js文件,不同的jmet…

qt 滚动条 美化

qt QScrollBar 滚动条分为竖直与水平滚动条&#xff0c;两者设置上类似&#xff0c;但也有一些不同&#xff0c;下面主要讲述美化及注意事项。 一、竖直滚动条 竖直滚动条分为7个部分&#xff1a; sub-line、 up-arrow 、sub-page、 hanle、 add-line、 dow-arrow、 add-pag…

SpringBoot最佳实践之 - 项目中统一记录正常和异常日志

1. 前言 此篇博客是本人在实际项目开发工作中的一些总结和感悟。是在特定需求背景下&#xff0c;针对项目中统一记录日志(包括正常和错误日志)需求的实现方式之一&#xff0c;并不是普适的记录日志的解决方案。所以阅读本篇博客的朋友&#xff0c;可以参考此篇博客中记录日志的…

使用JUC包的AtomicXxxFieldUpdater实现更新的原子性

写在前面 本文一起来看下使用JUC包的AtomicXxxxFieldUpdater实现更新的原子性。代码位置如下&#xff1a; 当前有针对int&#xff0c;long&#xff0c;ref三种类型的支持。如果你需要其他类型的支持的话&#xff0c;也可以照葫芦画瓢。 1&#xff1a;例子 1.1&#xff1a;普…

构建中小企业设备管理平台:Spring Boot应用

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…

Android 开发 调节声音 SeekBar自定义样式

效果图 xml布局 mipmap/seekbar图片随意一张图都可以&#xff0c;这里我的图就不贴出来了 <SeekBarandroid:id"id/seekBar"android:layout_marginLeft"8dp"android:layout_width"377dp"android:layout_height"8dp"android:layou…

沈阳乐晟睿浩科技有限公司抖音小店领域的强者

在当今数字化浪潮的推动下&#xff0c;电子商务以其便捷性、高效性和广泛的覆盖面&#xff0c;成为了推动经济发展的新引擎。而抖音小店&#xff0c;作为短视频平台上的新兴电商形态&#xff0c;更是凭借其庞大的用户基础、精准的内容推送机制以及独特的购物体验&#xff0c;迅…

方形件组批优化问题

在中国制造 2025 目标背景之下&#xff0c;发展环境保护型、资源节约型的智能制造业已成为制造行业的当务之急。为了应对客户提出的各式各样的产品需求、订单组批难且产品质量 要求高的问题&#xff0c;使用数学模型辅助企业对定制化产品进行组批优化具有重要意义。本文通 过…

2024.7最新子比主题zibll7.9.2开心版源码+授权教程

授权教程&#xff1a; 1.进入宝塔搭建一个站点 绑定 api.zibll.com 域名 并上传 index.php 文件 2.设置伪静态 3.开启SSL证书&#xff0c;找一个能用的域名证书&#xff0c;将密钥(KEY)和证书(PEM格式)复制进去即可 4.在宝塔文件地址栏中输入 /etc 找到 hosts文件并打开&a…

hcia复习篇

计算机网络&#xff1a; 云技术&#xff1a; 云储存---将数据通过计算机网络传输并储存在第三方服务器。&#xff08;百度网盘&#xff09; 云计算---分布式计算。&#xff08;即共享硬件资源&#xff09; 计算机技术&#xff1a; 文字、图片、视频等---抽象文字。 抽象语言…