CSS|12 display属性

news2025/1/1 15:45:40

display

display显示的意思,用来进行 行内元素与块级元素之间的相互转换!将隐藏的元素显示或者是将显示的元素进行隐藏。

display这个属性的取值:

  1. inline 行内
    当我们将一个行内元素的display属性的值设置为inline以后,那么这个元素就会从块级元素转换为行内元素。
  2. block 块级
    当我们将一个行内元素的display属性的值设置为block以后,那么这个元素就会被转换为块级元素。
  3. none 无
    不显示

注意:
如果说将行内元素转换为了块级元素,那么这个元素它就会拥有块级元素的特点。
如果说将块级元素转换为了行内元素,那么这个元素它就会拥有行内元素的特点。

将一个显示的元素隐藏、将一个隐藏的元素显示:
display:none 将一个显示的元素进行隐藏
display:block 将一个隐藏的元素进行显示
上述两个功能主要是JavaScript来使用

案例一:span行内元素显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display</title>
    <style type="text/css">
        span{
            width: 100px;
            height: 100px;
            background-color: #f00;
            /*显示没有100像素*/
        }    
    </style>
</head>
<body>
    <span>看看</span>
    <span>看看</span>
</body>
</html>

在这里插入图片描述

案例二:加display:block,span变块级元素显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display-block</title>
    <style type="text/css">
        span{
            width: 100px;
            height: 100px;
            background-color: #f00;
            /*使用display属性*/
            /*将行内元素转换为块级元素*/
            display: block;
            margin-bottom: 20px;
            /*加了display: block; 显示有100像素了*/

        }    
    </style>
</head>
<body>
    <!-- span是行内元素 -->
    <span>看看</span>
    <span>看看</span>
</body>
</html>

在这里插入图片描述

案例三:将块级元素转换为行内元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>将块级元素转换为行内元素</title>
    <style type="text/css">
        h2{
            width: 100px;
            height: 100px;
            background-color: #f00;
            /*display这个属性:将一个块级元素转换为行内元素*/
            display: inline;
        }
    </style>
</head>
<body>
    <!-- h2是块级元素 -->
    <h2>看看</h2>
    <h2>听听</h2>
</body>
</html>

在这里插入图片描述

案例四:将显示的元素隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>将显示的元素隐藏</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: #f00;
            /*将显示的元素隐藏*/
            display: none;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这里插入图片描述

案例五:display属性的综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display属性的综合案例</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        } 
        body{
            background-image: url(../../lesson_02/img/bg.png)
        }
        ul{
            /*去除无序列表前面的项目符号*/
            list-style: none;
        }
        .nav{
            width: 960px;
            height: 40px;
            margin: 100px auto; 
        }
        .nav ul li{
            float: left;
            width: 120px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #FFA500;
        }
        .nav ul li a:link, .nav ul li a:visited{
            text-decoration: none;
            color: white;
        }

        .nav ul li a:hover{
            background-color: #0f0;
        }

        .nav ul li a{
            width: 120px;
            height: 40px;
            /*将行内元素改成块级元素后,鼠标hover到a标签后的背景颜色就正常显示了*/
            display: block;
        }

    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="">网站栏目</a></li>
            <li><a href="">网站栏目</a></li>
            <li><a href="">网站栏目</a></li>
            <li><a href="">网站栏目</a></li>
            <li><a href="">网站栏目</a></li>
            <li><a href="">网站栏目</a></li>
            <li><a href="">网站栏目</a></li>
            <li><a href="">网站栏目</a></li>
        </ul>
    </div>
</body>
</html>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

启动打印服务提示:Http端口已被使用,请修改

分销AV 10.0.0及其以上版本启动打印服务提示&#xff1a;Http端口已被使用&#xff0c;请修改。该如何处理&#xff1f; 一、先将打印服务退出,电脑桌面右下角任我打印服务操作退出。 二、到打印管理器安装目录\print下找到CONFIG文件&#xff0c;用记事本打开后&#xff0c;将…

workman服务端开发模式-应用开发-gateway长链接端工作原理

一、长链接的工作原理 Register类其实也是基于基础的Worker开发的。Gateway进程和BusinessWorker进程启动后分别向Register进程注册自己的通讯地址&#xff0c;Gateway进程和BusinessWorker通过Register进程得到通讯地址后&#xff0c;就可以建立起连接并通讯了。而Register进程…

Docker挂载

目录 数据卷挂载 本地目录挂载 数据卷挂载 宿主机默认的存放所有容器数据卷的目录&#xff1a;/var/lib/docker/volumes nginx容器静态资源的目录&#xff1a;/usr/share/nginx/html 修改宿主机的内容&#xff0c;进入到容器查看信息&#xff0c;也同步修改 容器与数据卷的挂…

【计算机毕设】基于Python预制菜可视化数据分析预测推荐系统(完整系统源码+数据库+详细部署教程)✅

目录 【计算机毕设】基于Python预制菜可视化数据分析预测推荐系统&#xff08;完整系统源码数据库详细部署教程&#xff09;✅源码获取方式在文章末尾 一、项目背景 二、研究目的 三、项目意义 四、项目功能 五、项目创新点 六、开发技术介绍 七、数据库设计 八、项目…

Windows系统如何配置远程音频

场景 RemoteFx 是 Windows RDP 桌面协议升级版&#xff0c;RDP 8.0起可以使用 RemoteFx 来使用 USB 重定向&#xff0c;将本地 USB 设备通过 RDP 的数据通道重定向到远程桌面&#xff0c;解决云端机器无法使用 USB 设备的问题。 客户端&#xff1a;Windows 10 操作系统 服务…

【HAL库】STM32CubeMX开发----STM32F407----Time定时器中断实验

STM32CubeMX 下载和安装 详细教程 【HAL库】STM32CubeMX开发----STM32F407----目录 前言 本次实验以 STM32F407VET6 芯片为MCU&#xff0c;使用 25MHz 外部时钟源。 实现定时器TIM3中断&#xff0c;每1s进一次中断。 定时器计算公式如下&#xff1a; arr 是自动装载值&#x…

rabbitMq举例

新来个技术总监&#xff0c;把 RabbitMQ 讲的那叫一个透彻&#xff0c;佩服&#xff01; 生产者 代码举例 public String sendMsg(final String exchangeName,final String routingKey,final String msg) {} /*** 发送消息* param exchangeName exchangeName* param routin…

基于 uniapp 开发 android 播放 webrtc 流

一、播放rtsp协议流 如果 webrtc 流以 rtsp 协议返回&#xff0c;流地址如&#xff1a;rtsp://127.0.0.1:5115/session.mpg&#xff0c;uniapp的 <video> 编译到android上直接就能播放&#xff0c;但通常会有2-3秒的延迟。 二、播放webrtc协议流 如果 webrtc 流以 webrt…

Meta重磅发布Llama 3.3 70B:开源AI模型的新里程碑

在人工智能领域&#xff0c;Meta的最新动作再次引起了全球的关注。今天&#xff0c;我们见证了Meta发布的Llama 3.3 70B模型&#xff0c;这是一个开源的人工智能模型&#xff0c;它不仅令人印象深刻&#xff0c;而且在性能上达到了一个新的高度。 一&#xff0c;技术突破&#…

游戏AI实现-寻路算法(DFS)

​深度优先搜索算法&#xff08;英语&#xff1a;Depth-First-Search&#xff0c;缩写为DFS&#xff09;是一种用于遍历或搜索树或图的算法。 寻路地图搭建&#xff1a; 游戏AI实现-寻路地图搭建-CSDN博客 算法过程&#xff1a;遍历方向为从竖直向上沿顺时针方向 1.首先将开…

概率论得学习和整理30: 用EXCEL 描述泊松分布 poisson distribution

目录 1 泊松分布的基本内容 1.1 泊松分布的关键点 1.1.1 属于离散分布 1.1.2 泊松分布的特点&#xff1a;每个子区间内概率相等 &#xff0c; λ就是平均概率 1.2 核心参数 1.3 pmf公式 1.4 期望和方差 2 例1&#xff1a;用EXCEL计算泊松分布的概率 3 比较λ不同值时…

八、测试-性能测试

文章目录 前言一、性能测试介绍1. 简介2. 流程3. 指标4. 测试方案5. 性能评估6. 常见性能问题及解决对策 二、测试工具1. Jmeter简介2. Jmeter常见测试框架 三、Jmeter录制脚本1. 基本2. 增强3. 脚本参数化4. 断言5. 关联6. JDBC请求 四、分布式测试五、性能测试报告 前言 性能…

Open-Source Test Automation Tools for Windows Desktop Apps 2022

Do you have a Windows desktop application that needs to be tested to verify if all the different features work seamlessly and according to documentation? We suggest you use test automation—or at least try it in combination with manual testing. Test auto…

【小沐学GIS】基于C++绘制三维数字地球Earth(OpenGL、glfw、glut、QT)第三期

&#x1f37a;三维数字地球系列相关文章如下&#x1f37a;&#xff1a;1【小沐学GIS】基于C绘制三维数字地球Earth&#xff08;456:OpenGL、glfw、glut&#xff09;第一期2【小沐学GIS】基于C绘制三维数字地球Earth&#xff08;456:OpenGL、glfw、glut&#xff09;第二期3【小沐…

【论文笔记】Editing Models with Task Arithmetic

&#x1f34e;个人主页&#xff1a;小嗷犬的个人主页 &#x1f34a;个人网站&#xff1a;小嗷犬的技术小站 &#x1f96d;个人信条&#xff1a;为天地立心&#xff0c;为生民立命&#xff0c;为往圣继绝学&#xff0c;为万世开太平。 基本信息 标题: Editing Models with Task…

c++ [eigen库配置和使用]

实验环境 eigen 3.40 下载链接 https://gitlab.com/libeigen/eigen/-/archive/3.4.0/eigen-3.4.0.zip Visual Studio 2022配置 解压eigen后&#xff0c;在项目中配置包含目录 代码示例 加头文件 #include <Eigen/Dense> using namespace Eigen;矩阵运算 MatrixXd …

SpringBoot完整技术汇总

SpringBoot 注意&#xff1a;SpringBoot技术示例中的项目均已上传至Gitee&#xff0c;均可通过此处自行下载 SpringBoot是由Pivotal团队提供的全新框架&#xff0c;其设计目的是用来简化Spring应用的初始搭建以及开发过程 Spring程序与SpringBoot程序对比如下 Spring程序配置…

windows 使用python共享网络给另外一个网卡

# -*- coding: utf-8 -*- import subprocessdef open_share(to_shared_adapter, from_shared_adapter):"""打开以太网的网络共享:return: None"""powershell_script f"""# Register the HNetCfg library (once)# regsvr32 hnetc…

redis集群 服务器更换ip,怎么办,怎么更换redis集群的ip

redis集群 服务器更换ip&#xff0c;怎么办&#xff0c;怎么更换redis集群的ip 1、安装redis三主三从集群2、正常状态的redis集群3、更改redis集群服务器的ip 重启服务器 集群会down4、更改redis集群服务器的ip 重启服务器 集群down的原因5、更改redis集群服务器的ip后&#xf…

Linux入门攻坚——42、Nginx及web站点架构模式

对于lvs集群&#xff0c;是一个四层路由的集群&#xff0c;Director无需启用对端口的监控&#xff0c;直接将报文转发给后端业务服务器RealServer。 使用Nginx也可以实现集群功能&#xff0c;Nginx实现反向代理&#xff0c;实现的是七层上的转发&#xff0c;要求Nginx本身就是…