re:从0开始的CSS之旅 14. 显示模式的切换

1. 两个属性

display 属性可以用于转换元素的显示模式
可选值:
block 转换为块元素
inline 转换为行内元素
inline-block 转换为行内块元素
none 不显示元素,并且不占用元素的位置
visibility 属性用于设置元素是否显示
可选值:
visible 显示元素(默认值)
hidden 隐藏元素,但是占用元素的位置

示例如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>display model changing</title>div {width: 200px;height: 200px;/* 显示模式的转换 *//* display: inline; */}.box1 {background-color: #c7edcc;/* display: none; */visibility: hidden;}.box2 {background-color: #fde6e0;}span {width: 200px;height: 200px;background-color: #dce2f1;display: block;}
</head><body><div class="box1">111</div><div class="box2">222</div><span>我是span</span>
</body></html>

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

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

相关文章

文档类图像的智能识别,文档分类自定义分类器

文档类图像的智能识别是利用人工智能技术对文档图像进行自动识别和信息提取的过程。在实际应用中&#xff0c;文档分类是文档类图像识别的一个重要环节&#xff0c;而自定义分类器则可以提高文档分类的准确性和适应性。本文将介绍文档分类自定义分类器的相关概念和方法。 …

springboot/ssm知名作家信息管理系统Java文学作品展示管理系统

springboot/ssm知名作家信息管理系统Java文学作品展示管理系统 开发语言&#xff1a;Java 框架&#xff1a;springboot&#xff08;可改ssm&#xff09; vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.…

下一代块存储重新定义任务关键型存储架构

HPE 宣布全面推出基于 HPE Alletra Storage MP 构建的 HPE GreenLake for Block Storage 第 3 版&#xff0c;提供业界首款分解式横向扩展块存储&#xff0c;并提供 100% 数据可用性保证。这种独特的块存储产品由共享一切存储架构提供支持&#xff0c;并通过 HPE GreenLake 云平…

智能门锁代码实现之连接硬件的步骤

准备硬件和开发环境&#xff1a;确保你拥有所需的硬件&#xff08;如微控制器、门锁控制电路、通信接口等&#xff09;&#xff0c;并设置好 C 语言的开发环境。对于 Arduino 等开源硬件平台&#xff0c;你可能需要安装特定的 IDE&#xff08;集成开发环境&#xff09;和驱动程…

(算法3)二分查找

朴素二分查找 最直接的二分查找&#xff0c;有序&#xff0c;查找数组中的某个元素 这种方法是有局限性的&#xff1a;只可以查找升序的数组&#xff0c;且要查找的元素是一个 注意&#xff1a;mid(中点&#xff09;的计算应该是&#xff1a;left(right-left)/2 (个数是偶数时…

接口测试06 -- pytest接口自动化封装Loggin实战

1. 接口关键字封装 1.1 基本概念 接口关键字封装是指:将接口测试过程中常用的操作、验证封装成可复用的关键字(或称为函数、方法),以提高测试代码的可维护性和可复用性。 1.2 常见的接口关键字封装方式 1. 发送请求:封装一个函数,接受参数如请求方法、URL、请求头、请求…

Sketch 99.1 for macOS

Sketch 99.1 for macOS 概述 这个程序是对矢量绘图的创新性和焕然一新的看法。它特意采用了极简主义的设计&#xff0c;基于一个大小无限、图层自由的绘图空间&#xff0c;没有调色板、面板、菜单、窗口和控件。 此外&#xff0c;它提供了强大的矢量绘图和文本工具&#xff0c;…

django通过指定用户手机号查询外键所关联的数据,倒序查询

django通过指定用户手机号查询外键所关联的数据 在Django中&#xff0c;可以通过使用filter方法和双下划线语法来查询外键所关联的数据。以下是一种常见的方法&#xff1a; from your_app.models import User, ForeignKeyModel# 假设User模型有一个名为phone的字段&#xff…

基于Spring Boot的美容院管理系统设计与实现,计算机毕业设计(带源码+论文)

源码获取地址&#xff1a; 码呢-一个专注于技术分享的博客平台一个专注于技术分享的博客平台,大家以共同学习,乐于分享,拥抱开源的价值观进行学习交流http://www.xmbiao.cn/resource-details/1757434902285987841

洛谷数组P1319压缩技术

做题思路&#xff1a; 这里表示输入的第一个数字N为N*N的方阵&#xff0c;后面的数字表示连续输入几个1或者0&#xff0c;定义result表示实际输出的数字0或1&#xff08;result输出0或1&#xff0c;可以用绝对值abs我们初始化result为0&#xff0c;我们将它-1后再取绝对值就可以…

二、ClickHouse简介

ClickHouse简介 前言一、行式存储二、DBMS功能三、多样化引擎四、高吞吐写入能力五、数据分区与线程级并行六、场景七、特定版本 前言 ClickHouse 是俄罗斯的 Yandex 于 2016 年开源的列式存储数据库&#xff08;DBMS&#xff09;&#xff0c;使用 C 语言编写&#xff0c;主要…

[NSSCTF]-Web:[SWPUCTF 2021 新生赛]easyrce解析

先看网页 代码审计&#xff1a; error_reporting(0); &#xff1a;关闭报错&#xff0c;代码的错误将不会显示 highlight_file(__FILE__); &#xff1a;将当前文件的源代码显示出来 eval($_GET[url]); &#xff1a;将url的值作为php代码执行 解题&#xff1a; 题目既然允许…

速盾:cdn集群防御空间dns服务器

在当今数字化时代&#xff0c;网络安全和性能成为了企业关注的焦点。速盾的CDN集群防御空间DNS服务器技术为网站提供了更高水平的安全性和性能优化。本文将深入探讨这一技术的关键特点和优势。 1. 集群防御&#xff1a; 速盾的CDN集群防御通过分布在全球的节点集群&#xff0c;…

c++恶魔轮盘制造第1期输赢

小常识&#xff0c;恶魔叫DEALER&#xff0c;上帝叫God. 赢了很简单 void sheng() { cout<<"你获胜了&#xff01;";MessageBox(NULL,TEXT("你的钱~~~~~~给你"),TEXT("DEALER"),MB_OK);system("pause");system("cls"…

P5732 【深基5.习7】杨辉三角 python解法

# 【深基5.习7】杨辉三角 ## 题目描述 给出 n<20&#xff0c;输出杨辉三角的前 n 行。 如果你不知道什么是杨辉三角&#xff0c;可以观察样例找找规律。 ## 输入格式 ## 输出格式 ## 样例 #1 ### 样例输入 #1 6 ### 样例输出 #1 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5…

片上网络NoC(4)——直连拓扑

目录 一、前言 二、直连拓扑 三、总结 一、前言 本文中&#xff0c;我们将继续介绍片上网络中拓扑相关的内容&#xff0c;主要介绍直连拓扑&#xff0c;在此之前&#xff0c;我们已经介绍过了拓扑的指标&#xff0c;这将是继续阅读本文的基础&#xff0c;还没有了解相关内容…

算法刷题:盛水最多的容器

盛水最多的容器 .习题链接题目题目解析算法原理我的答案 . 习题链接 盛水最多的容器 题目 题目解析 VH*W h为左右两边低的一边,w为左右两边之间的距离 算法原理 定义两个指针 left0,rightn-1; left从左往右对数组进行遍历,right从右往左进行遍历 遍历的过程中,每一次都需要…

Hive的小文件问题

目录 一、小文件产生的原因 二、小文件的危害 三、小文件的解决方案 3.1 小文件的预防 3.1.1 减少Map数量 3.1.2 减少Reduce的数量 3.2 已存在的小文件合并 3.2.1 方式一&#xff1a;insert overwrite (推荐) 3.2.2 方式二&#xff1a;concatenate 3.2.3 方式三&#xff…

假期作业 2月12日

分支、循环练习 1、选择题 1.1、以下程序的输出结果是________。 main() { int k11,k22,k33,x15; if(!k1) x--; else if(k2) if(k3) x4; else x3; printf(“x%d\n”,x); } A x4 B x15 C x14 D x3 1.2、有以下程序&#xff0c;while循环执行________次。 int …

Servo的并发模型介绍

Servo是一个由Mozilla Research开发的实验性浏览器引擎&#xff0c;旨在为未来的网页和应用程序提供高性能的渲染。Servo的并发模型是其核心特点之一&#xff0c;它利用现代多核处理器的优势&#xff0c;通过异步编程和并行处理来提高渲染效率和响应性。以下是对Servo并发模型的…