CSS导读 (元素显示模式 下)

(大家好,今天我们将继续来学习CSS的相关知识,大家可以在评论区进行互动答疑哦~加油!💕)


目录

3.6  元素显示模式转换

 3.7  (一个小技巧)单行文字垂直居中的代码

3.8  单行文字垂直居中的原理

3.9  小案例 侧边栏制作

3.10  一个小工具的使用snipaste


3.6  元素显示模式转换

特殊情况下,我们需要元素模式的转换,简单理解:一个模式的元素需要另外一种模式的特性,比如想要增加链接<a>的触发范围。

  • 转换为块元素:display:block; 
  • 转换为行内元素:display:inline; 
  • 转换为行内块:display:inline-block; 

(一)行内元素转换为块元素

(二)块元素转换为行内元素 

(三)行内元素转换为行内块元素

 代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS之元素显示模式转换</title><style>a {width: 150px;height: 50px;background-color: pink;/* 把行内元素a 转换为块级元素 */display: block;}div {width: 300px;height: 100px;background-color: purple;/* 把div块级元素转换为行内元素 */display: inline;}span{width: 200px;height: 30px;background-color: skyblue;display: inline-block;}</style>
</head>
<body><a href="#">我是行内元素</a><a href="#">我是行内元素</a><div>我是块级元素</div><div>我是块级元素</div><span>行内元素转换为行内块元素</span><span>行内元素转换为行内块元素</span>
</body>
</html>

 3.7  (一个小技巧)单行文字垂直居中的代码

 css没有给我们提供文字垂直居中的代码,这里我们可以使用一个小技巧来实现。 

解决方案:让文字的行高等于盒子的高度,就可以让文字在当前盒子内垂直居中。

代码: 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS之单行文字垂直居中</title><style>div{width: 200px;height: 40px;background-color: pink;line-height: 40px;}</style>
</head>
<body><div>我要居中</div>
</body>
</html>

3.8  单行文字垂直居中的原理

简单理解:行高的上空隙和下空隙把文字挤到中间了,如果行高小于盒子高度,文字会偏上,如果行高大于盒子高度,则文字偏下。

原理分析:

实例分析: 


3.9  小案例 侧边栏制作

案例的核心思路分为两步:

  1. 把链接a转换为块级元素,这样链接就可以单独占一行并且有宽度和高度。
  2. 鼠标经过a给链接设置背景颜色。
  3. 设置文字垂直居中。

第一步把链接a转换为块级元素,这样链接就可以单独占一行并且有宽度和高度

第二步鼠标经过a给链接设置背景颜色

第三步设置文字垂直居中

 代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小案例侧边栏</title><style>a{display: block;width: 230px;height: 40px;background-color: #55585a;font-size: 14px;color: #fff;text-decoration: none;text-indent: 2em;/* 文字居中 */line-height: 40px;}/* 鼠标经过链接背景变色 */a:hover{background-color: #ff6700;}</style>
</head>
<body><a href="#">手机 电话卡</a><a href="#">电视 盒子</a><a href="#">笔记本 平板</a><a href="#">出行 穿戴</a><a href="#">智能 路由器</a><a href="#">健康 儿童</a><a href="#">耳机 音响</a>
</body>
</html>

3.10  一个小工具的使用snipaste

Snipaste是一个简单但强大的截图工具,也可以让你将截图贴回到屏幕上. 常用快捷方式: 

  1. F1可以截图.同时测量大小设置箭头书写文字等。
  2. F3在桌面置顶显示。
  3. 点击图片, alt可以取色(按下shift可以切换取色模式)。
  4. 按下esc取消图片显示。


 (今日分享暂时到此为止啦!为不断努力的自己鼓鼓掌吧。今日文案分享:愿你干山暮雪海棠依旧, 不为岁月惊扰平添忧愁。) 

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

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

相关文章

学习笔记------约束的管理

此篇记录FPGA的静态时序分析&#xff0c;在学习FPGA的过程中&#xff0c;越发觉得对于时序约束只是懂了个皮毛。现在记录一下自己的学习过程。 本文摘自《VIVADO从此开始》高亚军 为什么要进行约束&#xff1f;约束的目的是什么&#xff1f; 简单来说&#xff0c;就是需要在…

提高APP安全性的必备加固手段——深度解析代码混淆技术

​ APP 加固方式 iOSAPP 加固是优化 APK 安全性的一种方法&#xff0c;常见的加固方式有混淆代码、加壳、数据加密、动态加载等。下面介绍一下 iOSAPP 加固的具体实现方式。 混淆代码&#xff1a; 使用 ProGuard 工具可以对代码进行混淆&#xff0c;使得反编译出来的代码很难…

数据结构复习指导之绪论(算法的概念以及效率的度量)

文章目录 绪论&#xff1a; 2.算法和算法评价 知识总览 2.1算法的基本概念 知识点回顾与重要考点 2.2算法效率的度量 知识总览 1.时间复杂度 2.空间复杂度 知识点回顾与重要考点 归纳总结 绪论&#xff1a; 2.算法和算法评价 知识总览 2.1算法的基本概念 算法( Al…

端口协议(爆破、未授权)

常见端口服务及攻击方向&#xff1a; 弱口令爆破 工具&#xff1a;https://github.com/vanhauser-thc/thc-hydra hydra是一个支持多协议的自动化的爆破工具。 支持的服务、协议&#xff1a; telnet ftp pop3[-ntlm] imap[-ntlm] smb smbnt http-{head|get} http-{get|post}-…

Java基础-知识点04(面试|学习)

Java基础-知识点04 Object类wait和notify需要在什么地方使用&#xff1f;说明 toString() 方法的作用和重写时的注意事项。toString() 方法在实际开发中的应用场景和作用。 continue、break 和 return 的区别1、continue&#xff1a;2、break&#xff1a;3、return&#xff1a;…

HarmonyOS NEXT星河版之实战知乎App评论功能

文章目录 一、目标完成页面二、实战2.1 定义数据2.2 mock数据2.3 封装顶部标题栏2.4 封装评论Item2.5 定义回复组件2.6 主页面 三、小结 一、目标完成页面 二、实战 2.1 定义数据 export interface ReplyItem {avatar: ResourceStr // 头像author: string // 作者id: number …

Python和Java哪个更适合后端开发?

Python和Java都是强大的后端开发语言&#xff0c;它们各自有鲜明的特点和适用场景。选择哪一个更适合后端开发&#xff0c;主要取决于具体的项目需求、团队技术栈、个人技能偏好以及长期发展考虑等因素。 下面是两者在后端开发中的优势和劣势&#xff1a; 「Python&#xff1…

【vue】defineProps 传数据 父传子

先行知识 【vue】导入组件 传值过程 App.vue <template><Header name"1234567890" url"https://www.1234567890.com" /><hr><!-- <Footer v-bind"propsWeb" /> --><Footer :"propsWeb" /><h…

ETL中如何运用好MQ消息集成

一、ETL的主要作用 ETL&#xff08;Extract, Transform, Load&#xff09;是数据仓库中的关键环节&#xff0c;其主要作用是将数据从源系统中抽取出来&#xff0c;经过转换和清洗后加载到数据仓库中。具体而言&#xff1a; Extract&#xff08;抽取&#xff09;&#xff1a;从…

Python | Leetcode Python题解之第24题两两交换链表中的节点

题目&#xff1a; 题解&#xff1a; class Solution:def swapPairs(self, head: ListNode) -> ListNode:dummyHead ListNode(0)dummyHead.next headtemp dummyHeadwhile temp.next and temp.next.next:node1 temp.nextnode2 temp.next.nexttemp.next node2node1.next…

2024年制冷设备行业现状分析

环洋咨询Global Info Research的制冷设备市场调研报告提供制冷设备市场的基本概况&#xff0c;包括定义&#xff0c;分类&#xff0c;应用和产业链结构&#xff0c;同时还讨论发展政策和计划以及制造流程和成本结构&#xff0c;分析制冷设备市场的发展现状与未来市场趋势&#…

探索分布式技术--------------注册中心zookeeper

目录 一、ZooKeeper是什么 二、ZooKeeper的工作机制 三、ZooKeeper特点 四、ZooKeeper数据结构 五、ZooKeeper应用场景 5.1统一命名服务 5.2统一配置管理 5.3统一集群管理 5.4服务器动态上下线 5.5软负载均衡 六、ZooKeeper的选举机制 6.1第一次启动选举机制 6.2非…

鸿蒙应用开发之搜索框组件

前面学习了滚动组件,现在来学习搜索框组件。 这个搜索框组件,其实比较像探索网站的输入,可以输入内容,并且带有一个搜索的按钮。不过,这个组件还是缺少了一个搜索输入历史提示,或者说是输入内容动态提示的功能,这个还需要开发人员自己来完善这个功能。 这个搜索框大体如…

深度学习入门(3)

一、感知机 感知机接收多个输入信号&#xff0c;输出一个信号。这里所说的“信号”可以想象成电流或河流那样具备“流动性”的东西。 但是&#xff0c;和实际的电 流不同的是&#xff0c;感知机的信号只有“流 / 不流”&#xff08; 1 / 0 &#xff09;两种取值。在本书中&…

Itasca pfc3d/3dec/flac3d/massflow 9.0 授权

所有 Itasca 软件都建立在每个程序基础的共同元素层之上——无论程序使用何种数值方法或元素。因此&#xff0c;无论是使用 DEM 软件&#xff08;如 3DEC 或 PFC&#xff09;&#xff0c;还是使用 FLAC3D 等连续体软件&#xff0c;都会有许多流程、实用程序和功能是所有这些软件…

2011年认证杯SPSSPRO杯数学建模B题(第二阶段)生物多样性的评估全过程文档及程序

2011年认证杯SPSSPRO杯数学建模 B题 生物多样性的评估 原题再现&#xff1a; 2010 年是联合国大会确定的国际生物多样性年。保护地球上的生物多样性已经越来越被人类社会所关注&#xff0c;相关的大规模科研和考察计划也层出不穷。为了更好地建立国际交流与专家间的合作&…

【论文速读】| CovRL:基于覆盖引导的强化学习对LLM基础变异进行JavaScript引擎模糊测试

本次分享论文为&#xff1a;CovRL: Fuzzing JavaScript Engines with Coverage-Guided Reinforcement Learning for LLM-based Mutation 基本信息 原文作者&#xff1a;Jueon Eom, Seyeon Jeong, Taekyoung Kwon 作者单位&#xff1a;延世大学、苏瑞软科技公司 关键词&#…

ubuntu或类Debian获取某些包的离线版本-包括依赖(还有一些意想不到的用途,哈哈)

前言 偶尔能碰到很特殊的情况。网址白名单&#xff0c;纯内网&#xff0c;超多依赖及一些很难描述的场景。 比如一些少见的发行版缺少某些包。这时候可以找一台类似的系统环境来下载离线包及 其依赖包&#xff0c;然后转移到内网进行安装。如果是网址白名单&#xff0c;或者纯内…

解决跨域和https不能访问的问题。

本地安装了项目,是一键安装的,安装之后还是apache的web服务器,有个视频服务用的是https的服务,要对这个项目进行二次开发,本地调用没问题,可是别人已调用就跨域。只能本地访问。 现在有两个问题:1.解决跨域问题 2.还要解决https访问的问题。 解决思路,用nginx 的ssl证…

37-代码测试(下):Go语言其他测试类型及IAM测试介绍

。 Go中的两类测试&#xff1a;单元测试和性能测试。 我就来介绍下Go 语言中的其他测试类型&#xff1a;示例测试、TestMain函数、Mock测试、Fake测试等&#xff0c; 示例测试 示例测试以Example开头&#xff0c;没有输入和返回参数&#xff0c;通常保存在example_test.go…