在HTML和CSS当中运用显示隐藏

1.显示与隐藏

  1. 盒子显示:display:block;
  2. 盒子隐藏:

    display:none:隐藏该元素并且该元素所占的空间也不存在了。

    visibility:hidden:隐藏该元素但是该元素所占的内存空间还存在,即“隐身效果”。

2.圆角边框

在CSS2中添加圆角,我们不得不使用背景图像,在 CSS3中使用border-radius属性将很容易创建圆角。 border-radius属性是一个简写属性,用于设置四个border-radius属性。

语法:

border-radius:top-left top-right bottom-left bottom-right;

可能的值:

  1. 一个值:设置四个角的圆角大小;
  2. 两个值:设置左上和右下 右上和左下的圆角大小;
  3. 三个值:设置左上、右上和左下、右下的圆角大小;
  4. 四个值:设置左上、右上、右下、左下的圆角大小。

 border-radius的值可以是具体的数值也可以是百分比。

实例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width: 300px;height: 300px;background-color: blueviolet;border-radius: 50px ;}.box2{width: 300px;height: 300px;background-color: rgb(57, 203, 214);border-radius: 50% ;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>
</html>

 

3.Overflow属性

overflow属性规定当内容溢出标签框时的显示方式,包括水平方向和垂直方向。

 overflow-x只包括水平方向。

 overflow-y只包括垂直方向。

可能的值:

  1. visible 默认值。内容不会被修剪,会呈现在标签框之外。
  2. hidden 内容会被修剪,并且其余内容是不可见的。
  3. scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
  4. auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

注意:overflow属性仅适用于具有指定高度的块元素。

4.透明度属性(opacity,rgba()),透明度兼容

实现透明的CSS方法通常有以下3种方式,以下是不透明度都为80%的写法。

 CSS3的opacity:x,x的取值从0到1,如opacity:0.8;

CSS3 的rgba(red, green,blue,alpha),alpha的取值从0到1,如rgba(255,255,255,0.8) ;

IE专属滤镜 filter:Alpha(opacity=x),x的取值从0到100,如 filter:Alpha(opacity=80)。

1. opacity

1、兼容性:IE6、7 8不支持,IE9及以上版本和标准浏览器都支持。

2、使用说明:设置 opacity元素的所有后代元素会随着一起具有透明性,一般用于调整图片或者模块的整不透明度。

2. rgba()

1、兼容性:IE6、7、8不支持,IE9及以上版本和标准浏览器都支持。

2、使用说明:设置颜色的不透明度,一般用于调整 background-color、color等的不透明度。 IE6 和部分 IE7 内核的浏览器 ( 如 QQ 浏览器)会读懂 rgba,解析后颜色为透明,其实应该是 null那么使用opacity实现背景透明,文字不透明是可取的。

3.IE 专属滤镜filter:Alpha(opacity=x)

1、兼容性:仅支持IE6、7、8、9,在IE10 版本被废除。

2、使用说明:IE 浏览器专属,问题多,如下:

255,0.8); 在IE6、7中,需要激活IE 的 haslayout 属性(如:*zoom:1 或者 *overflow:hidden),让它读懂 filter:Al-

pha

0)。

在IE6、7、8中,设置了filter:Alpha的元素,父元素设置position:static(默认属性),其子元素为相对定位可让子元素不透明。

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

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

相关文章

学习笔记——数据通信基础——数据通信网络(网络工程师)

网络工程师 网络工程&#xff0c;就是围绕着网络进行的一系列的活动&#xff0c;包括∶网络规划、设计、实施、调试、排错等。网络工程设计的知识领域很宽广&#xff0c;其中路由和交换是计算机网络的基本。 网络工程师∶是在网络工程领域&#xff0c;掌握专业的网络技术&…

散户如何参与期权交易?

期权就是股票&#xff0c;唯一区别标的物上证指数&#xff0c;会看大盘吧&#xff0c;期权交易两个方向认购做多&#xff0c;认沽做空&#xff0c;双向t0交易没了&#xff0c;期权交易跟期货一样&#xff0c;对的&#xff0c;玩的也是合约&#xff0c;唯一区别没有保证金不会爆…

军工行业运维解决方案

一、引言 随着军工行业的快速发展&#xff0c;信息化建设已成为提高作战效能、保障信息安全的重要支撑。然而&#xff0c;军工行业面临着多战区、跨区域、多阵地、多数据中心的复杂运维挑战。为了满足这些挑战&#xff0c;我们提出了一套基于美信时代的军工行业运维解决方案&am…

127.0.0.1 和 localhost 以及 0.0.0.0 区别

之前用 nginx 的时候&#xff0c;发现用这几个 IP&#xff0c;都能正常访问到 nginx 的欢迎网页。一度认为这几个 IP 都是一样的。 但本质上还是有些区别的。 首先 localhost 就不叫 IP&#xff0c;它是一个域名&#xff0c;就跟 "baidu.com",是一个形式的东西&…

什么是Redis脑裂,如何解决呢

Redis 脑裂问题是指&#xff0c;在 Redis 哨兵模式或集群模式中&#xff0c;由于网络原因&#xff0c;导致主节点&#xff08;Master&#xff09;与哨兵&#xff08;Sentinel&#xff09;和从节点&#xff08;Slave&#xff09;的通讯中断&#xff0c;此时哨兵就会误以为主节点…

方均根为什么等于有效值

方均根值&#xff08;Root Mean Square&#xff0c;简称RMS&#xff09;等于有效值&#xff0c;是因为这种计算方法能够准确地反映周期性波动量&#xff08;如交流电、振动等&#xff09;的平均能量或做功能力。对于交流电而言&#xff0c;其瞬时值随时间变化&#xff0c;直接取…

IdentiFace——多模态人脸识别系统,可捕捉从情绪到性别的所有信息及其潜力

1. 概述 面部识别系统的开发极大地推动了计算机视觉领域的发展。如今&#xff0c;人们正在积极开发多模态系统&#xff0c;将多种生物识别特征高效、有效地结合起来。 本文介绍了一种名为 IdentiFace 的多模态人脸识别系统。该系统利用基于 VGG-16 架构的模型&#xff0c;将人…

【NumPy】NumPy线性代数模块详解:掌握numpy.linalg的核心功能

&#x1f9d1; 博主简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…

多年期货盈利的秘诀就是亏了就跑

不怎么看消息面&#xff0c;尤其期货&#xff0c;外汇。 正大招主账户&#xff1a;欧美4恒指26小恒12 欢迎咨询代理 详YJCFPL 坚持学习&#xff0c;吸收别人的经验&#xff0c;为我所用。 独立思考&#xff0c;培养良好的生活习惯。 我能活到现在的秘诀就是&#xff1a;亏了就赶…

Hexo最新实战:(一)Hexo7.0+GitHub Pages博客搭建

前言 很多平台都能写博客还有创作激励&#xff0c;为什么我又要搭一个&#xff1f;为什么这次要选择用Hexo框架&#xff1f; 对应的原因是流量自由和省钱&#xff0c;第一个&#xff0c;很多平台能写但不是都有收益&#xff0c;而且平台有自身的规则&#xff0c;比如会屏蔽一…

【区块链】外部应用程序与区块链进行交互

一&#xff0c;外部应用程序与区块链进行交互案例目标与流程 1.1案例目标 掌握FISCO BCOS应用环境的搭建 与使用&#xff08;FISCO BCOSWeBASE&#xff09;掌握基于Java SpringBoot的应 用程序后端项目搭建与开发。掌握应用程序后端与FISCO BCOS 链的交互。掌握应用程序前端…

『大模型笔记』量化 vs 剪枝 vs 蒸馏:为推理优化神经网络!

量化 vs 剪枝 vs 蒸馏:为推理优化神经网络! 文章目录 一. 量化 vs 剪枝 vs 蒸馏:为推理优化神经网络!1.1. 量化(Quantization)1.2. 剪枝(purning)1.3. 知识蒸馏(Knowledge Distillation,也称为模型蒸馏)1.4. 工程优化(Engineering Optimizations)1.5. 总结二. 参考…

【旅行商问题的优化】

#include<bits/stdc.h> // 包含标准库的头文件using namespace std; // 使用标准命名空间template <class Type> // 模板声明&#xff0c;Type为类型参数 class Traveling{ // 定义Traveling类friend Type Tsp(int **, int[],int, Type); // 声明友元函数Tsp publi…

WPF hc:PropertyGrid 嵌套显示

重点&#xff1a; 编写Edit特性即可&#xff1a; public class ParameterEditor : PropertyEditorBase{public override FrameworkElement CreateElement(PropertyItem propertyItem){var pg new PropertyGrid();return pg;}public override DependencyProperty GetDependen…

2024/5/22 ARMday7

按键控制LED灯亮和灭 do_irq.c #include "key_it.h" //#include "led.h" extern void printf(const char *fmt, ...); unsigned int i 0; void do_irq(void) {//获取中断号unsigned int irqno(GICC->IAR & (0x3FF));switch (irqno){case 99://处…

Playwright 元素定位

一、get_by_XXXXX 1. get_by_role&#xff1a;根据元素角色进行定位, 常用的参数有两个&#xff0c;第一个是角色名称 role&#xff0c;第二个是元素的文本 name。其他参数的解释大家可以参考源码注释。 # 获取页面名称为确定的按钮 page.get_bt_role(button, name确定) pl…

cfa三级大神复习经验分享系列(一)

教材还是Notes? 对于愚钝如我之流&#xff0c;建议大家三级一定要看教材。Note很精华很浓缩&#xff0c;我觉得看过教材再看note感觉总结的很精辟&#xff0c;但是Note是以考点列的&#xff0c;而教材像小说一样娓娓道来&#xff0c;有逻辑有情节&#xff0c;如果不follow很难…

Android MIPI屏配置

参考资料&#xff1a;RockChip发布的DRM Display Driver Development Guide手册&#xff0c;以及网上大量相关博客资料 首先要拿到《屏幕硬件规格书》和《DataSheet》&#xff0c;软件配置主要依靠DataSheet提供数据支持。 查阅DataSheet里面on sequence和off sequence说明&a…

机器学习之爬山算法(Hill Climbing Algorithm)

爬山算法(Hill Climbing Algorithm)是一种简单而常见的启发式搜索算法,通常用于解决优化问题。它的基本思想类似于登山过程中爬升到山顶的过程,即从一个起始点开始,不断尝试向邻近的点移动,直到找到一个局部最优解。 下面是爬山算法的基本工作流程: 初始化:选择一个初…

关于同一个地址用作两个不同页面时,列表操作栏按钮混淆状态

同一个地址用作两个不同页面时&#xff0c;列表页的操作栏中有好多个按钮&#xff0c;如果用了v-if&#xff0c;可能会导致按钮混淆状态如disabled等属性混乱 解决方法1&#xff1a; 将v-if换成v-show&#xff0c;用了v-show之后意味着所有按钮都在只是在页面上隐藏了 解决方…