zoukankan      html  css  js  c++  java
  • 控制html元素的隐藏问题

    控制元素隐藏的方式,有display:none、visibility:hidden以及不透明度设置。

    一、display:none

    被隐藏的元素,在页面中不占位,空出的位置会被相邻的元素占用。

    <div id="div0" style="100px; height:100px;background:blue"></div>
    <div id="div1" style="100px; height:100px;background:green;display:none"></div>
    <div id="div2" style="200px; height:200px;background:red"></div>

    效果图如下:

    由图可见,div1即绿色部分空出的位子已被div2占用。

    二、visibility:hidden被隐藏的元素,在页面中不显示,但是它仍然占用原来的位置,不会给相邻其他元素机会。

    <div id="div0" style="100px; height:100px;background:blue"></div>
    <div id="div1" style="100px; height:100px;background:green;visibility:hidden"></div>
    <div id="div2" style="200px; height:200px;background:red"></div>

    效果图如下:

    由图可见,虽然div1被隐藏,变为不可见状态了,但是其原来占据的位置并未被div2占用。

    三、不透明度设置,通过设置元素的透明度也可以达到隐藏元素的目的,其作用和visibility一样。

    <div id="div0" style="100px; height:100px;background:blue"></div>
    <div id="div1" style="100px; height:100px;background:green;opacity:0;filter:alpha(opacity=0)"></div>
    <div id="div2" style="200px; height:200px;background:red"></div>

    效果图:

  • 相关阅读:
    1
    vim配置
    pyspark
    添加底部小火箭+目录
    00
    博客园代码高亮设置
    01. 枚举类型
    01. 授权问题
    Android Studio打包签名全过程
    linux 阿里云源地址
  • 原文地址:https://www.cnblogs.com/aaron-shu/p/4055480.html
Copyright © 2011-2022 走看看