首页 > 其他分享 >定位、opacity透明度属性、visibility和display隐藏元素

定位、opacity透明度属性、visibility和display隐藏元素

时间:2023-03-20 19:56:08浏览次数:41  
标签:opacity 定位 元素 visibility display 属性

定位、opacity透明度属性、visibility和display隐藏元素

1.定位

position(确定的是移动的基准)

  • static,默认值。静态的。(不让动)

  • relative,相对。相对于自身的位置来移动

  • absolute,绝对定位position的值不是static的最近的祖辈元素。如果到最后都没有找到那么根据初始容纳块来进行定位。

    页面的第一屏。

    最小权限。。。。。

  • fixed,固定定位,相对于视口来定位。

2.opacity属性

opacity属性:指定了一个元素的透明度,当这个属性应用在元素上时,会将这个元素的所有(内容、背景色、边框)进行透明。

取值是从0~1的范围。0为完全透明,1为完全不透明。也可以使用小数。

3.使用visibility、display隐藏元素

visibility:value隐藏元素,

visibility:hiddendisplay:none的区别:visibility:hidden依然占据布局位置,display:none不占据位置。

标签:opacity,定位,元素,visibility,display,属性
From: https://www.cnblogs.com/chichi0002/p/17237508.html

相关文章

  • 【framework】DisplayContent简介
    1前言​DisplayContent用于管理屏幕,一块屏幕对应一个DisplayContent对象,虽然手机只有一个显示屏,但是可以创建多个DisplayContent对象,如投屏时,可以创建一个虚拟......
  • 深入理解Display类的使用
     熟悉了MIDlet类的使用以后,下面来熟悉一下Display类的使用,这个类也是进行J2ME编程中经常要使用到的类之一。      Display类有两个最主要的作用:1、 获得屏幕的属......
  • CSS Display
    CSSDisplay-块和内联元素块元素是一个元素,占用了全部宽度,在前后都是换行符。块元素的例子:<h1><p><div>内联元素只需要必要的宽度,不强制换行。内联元素的例子:......
  • display/float/clear
    displayinline:将元素变为行内元素。不会独占一行,排列自左向右。可以通过display:inline将一个块元素变为行内元素。block:将元素变为块元素。独占一行,排列......
  • 如何使用 jQuery 更改 CSS display none 或 block 属性?
    如何使用jQuery更改CSSdisplaynone或block属性?解答http://www.stackoverflow.ink/posts/ru-he-shi-yong-jquery-geng-gai-css-display-none-huo-block-......
  • 【FPGA】Verilog:实现十六进制七段数码管显示 | 7-Segment Display
    写在前面:本章主要内容为理解七点数码管显示的概念,并使用Verilog实现。生成输入信号后通过仿真确认各门的动作,通过FPGA检查在Verilog中实现的电路的操作。Ⅰ.前置知识......
  • SmallDesktopDisplay V1.4.3 学习记录 程序基本流程
    SmallDesktopDisplayV1.4.3学习记录声明:原作者:Misaka;修改:微车游;再次修改:丘山鹤项目地址:https://github.com/SmallDesktopDisplay-team/SmallDesktopDisplay本文引用......
  • TouchableOpacity无效
    错误代码如下:<TouchableOpacityonPress={this.handleConfirmPress}activeOpacity={0.6}><Textstyle={styles.buttonText}>确定</Text></TouchableOpacity>没问......
  • 使用 display:inline-block 会产生什么问题?有什么解决方法?
    1.产生的问题描述两个display为inline-block元素放到一起会产生一段空白。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Com......
  • Spring整合MyBatis及Junit4.11报错:No tests found matching [{ExactMatcher:fDisplayN
    发生缘由复习Spring整合MyBatis及Junit运行环境VSCode版本:1.72.0(usersetup)jdk版本:jdk-8电脑系统:win10spring-context:5.2.10.RELEASEjunit:4.11spring-test:5.......