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.rhkb.cn/news/456820.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

海外云手机怎样助力亚马逊店铺运营?

随着全球化的发展,越来越多的企业开始重视海外市场的拓展,尤其是出海企业和B2B外贸企业。亚马逊作为全球最大的电商平台之一,成为了许多企业争夺国际市场的重点战场。本文将深入分析海外云手机在优化亚马逊店铺引流中的作用和优势&#xff0c…

怿星科技薛春宇丨智能汽车软件研发工具链国产化的挑战和探索

2024年7月25日,由上海良益企业管理咨询有限公司主办的“2024域控制器技术论坛“在上海成功举办,十位嘉宾做了精彩分享。“整零有道”将陆续刊出部分演讲的文字实录,以飨读者。 本期刊出怿星科技副总经理薛春宇的演讲实录:智能汽车…

如何用 obdiag 排查 OceanBase数据库的卡合并问题——《OceanBase诊断系列》14

1. 背景 卡合并在OceanBase中是一个复杂的问题,其产生可能源于多种因素。目前,对于卡合并的明确界定尚不存在统一标准,一方面,我们界定超过36小时未完成合并为合并超时,此时RS会记录ERROR日志;另一方面&am…

ArkUI自定义TabBar组件

在ArkUI中的Tabs,通过页签进行内容视图切换的容器组件,每个页签对应一个内容视图。其中内容是图TabContent作为Tabs的自组件,通过给TabContent设置tabBar属性来自定义导航栏样式。现在我们就根据UI设计的效果图来实现下图效果: 根…

Python | Leetcode Python题解之第508题出现次数最多的子树元素和

题目: 题解: class Solution:def findFrequentTreeSum(self, root: TreeNode) -> List[int]:cnt Counter()def dfs(node: TreeNode) -> int:if node is None:return 0sum node.val dfs(node.left) dfs(node.right)cnt[sum] 1return sumdfs(r…

设计模式(二)工厂模式详解

设计模式(二)工厂模式详解 简单工厂模式指由一个工厂对象来创建实例,适用于工厂类负责创建对象较少的情况。例子:Spring 中的 BeanFactory 使用简单工厂模式,产生 Bean 对象。 工厂模式简介 定义:工厂模式是一种创建…

AnaTraf | 全面掌握网络健康状态:全流量的分布式网络性能监测系统

AnaTraf 网络性能监控系统NPM | 全流量回溯分析 | 网络故障排除工具AnaTraf网络流量分析仪是一款基于全流量,能够实时监控网络流量和历史流量回溯分析的网络性能监控与诊断系统(NPMD)。通过对网络各个关键节点的监测,收集网络性能…

【计算机网络 - 基础问题】每日 3 题(五十七)

✍个人博客:https://blog.csdn.net/Newin2020?typeblog 📣专栏地址:http://t.csdnimg.cn/fYaBd 📚专栏简介:在这个专栏中,我将会分享 C 面试中常见的面试题给大家~ ❤️如果有收获的话,欢迎点赞…

代谢组数据分析(二十):通过WGCNA识别核心代谢物

禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍识别核心基因加载R包导入数据数据预处理检查数据完整性计算软阈值soft根据软阈值构建接矩阵和拓扑重叠矩阵聚类并构建网络拓扑重叠热图查看具体模块的代谢物表达热图识别表型相关模…

sharpkeys-键盘部分按键不好用,用其它不常用按键代替

sharpkeys-键盘部分按键不好用,用其它不常用按键代替 文章目录

linux网络编程5——Posix API和网络协议栈,使用TCP实现P2P通信

文章目录 Posix API和网络协议栈,使用TCP实现P2P通信1. socket()2. bind()3. listen()4. connect()5. accept()6. read()/write(), recv()/send()7. 内核tcp数据传输7.1 TCP流量控制7.2 TCP拥塞控制——慢启动/拥塞避免/快速恢复/快速重传 8. shutdown()9. close()9…

Python游戏开发超详细第二课/一个小游戏等制作过程(入门级篇共2节)

直播内容,这里都用大多用照片代替了哈,因为在写一遍很累,哥哥姐姐理解一下抱歉抱歉 一个是我懒的写一遍,但是刚学的兄弟姐妹可不许学我偷懒哈 二防止有人偷懒,直接复制粘贴代码,所以为了方便帮助你们学习&a…

基于docker 部署redis

1、拉取镜像 docker pull redis:latest如果拉取失败可以尝试下配置镜像源,具体参考如下,目前暂可以使用 Docker切换镜像源-CSDN博客 2、创建配置文件 mkdir /usr/local/redis/conf vim redis.conf bind 0.0.0.0#protected-mode no port 6379 tcp-b…

新手直播方案

简介 新手直播方案 ,低成本方案 手机/电脑 直接直播手机软件电脑直播手机采集卡麦电脑直播多摄像机 机位多路采集卡 多路麦加电脑(高成本方案) 直播推流方案 需要摄像头 方案一 :手机 电脑同步下载 网络摄像头 软件&#xff08…

【南方科技大学】CS315 Computer Security 【Lab6 IoT Security and Wireless Exploitation】

目录 Introduction (Part 1: OS Security for IoT )Software RequirementsStarting the Lab 6 Virtual MachineSetting up the Zephyr Development EnvironmentDownload the Zephyr Source CodeInstalling Requirements and DependenciesSetting the Project’s Environment Va…

【linux】服务器Ubuntu20.04安装cuda11.8教程

【linux】服务器Ubuntu20.04安装cuda11.8教程 文章目录 【linux】服务器Ubuntu20.04安装cuda11.8教程到官网找到对应版本下载链接终端操作cudnn安装到官网下载下载后解压进入解压后的目录:将头文件复制到 /usr/local/cuda/include/ 目录:将库文件复制到 …

利用客户端导入有关联的业务数据(DBeaver+sql)

前言 最近有点坑,麻辣烫的活落手上了,上个迭代除了自己的开发任务,还有处理接手的工作。然后节后问题又多,还有前1个迭代没有测试的模块本迭代测试,烦死了。 这次这个数据处理的活,以后希望可以交出…

mac电脑设置chrome浏览器语言切换为日语英语等不生效问题

在chrome中设置了语言,并且已经置顶了,但是不生效,在windows上直接有设置当前语言为chrome显示语言,但是mac上没有。 解决办法 在系统里面有一个单独给chrome设置语言的: 单独给它设定成指定的语言,然后重…

川渝地区计算机考研择校分析

C哥专业提供——计软考研院校选择分析专业课备考指南规划 添加图片注释,不超过 140 字(可选) 根据最新数据分析,5所高校计算机专业2025年考研难度从高到低预计为: 电子科技大学 >> 四川大学 > 重庆大学 ≈ 西南交通大学 > 西南…

Vision-Language Models for Vision Tasks: A Survey阅读笔记

虽然LLM的文章还没都看完,但是终究是开始看起来了VLM,首当其冲,当然是做一片文献综述啦。这篇文章比较早了,2024年2月份出的last version。 文章链接:https://arxiv.org/abs/2304.00685 GitHub链接:GitHu…