• css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么)


    css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么)

    一、总结

    一句话总结:使用的时候直接在元素的样式中设置display和visibility属性即可。推荐使用display,因为他是不占位隐藏。

    1、display和visibility的区别?

    占位隐藏和不占为隐藏
    如何显示。(block显示,inline也可以显示,none隐藏)

    2、display有哪三个属性?

    block显示,inline也可以显示,none隐藏

    3、display的显示隐藏属性和visibility的显示隐藏属性的区别是什么?

    display3,visibility才两个,并且写法不同,visibility是显示:visible和隐藏:hidden。

    显示和隐藏:
    1.display
    显示:block|inline
    隐藏:none

    2.visibility
    显示:visible
    隐藏:hidden

    二、如何控制元素的显示和隐藏(display和visibility的区别是什么)

    1、相关知识

    显示和隐藏:
    1.display
    显示:block|inline
    隐藏:none

    2.visibility
    显示:visible
    隐藏:hidden

    2、代码

    display显示时要注意块和行

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>index</title>
     6     <style>
     7         *{
     8             font-family: 微软雅黑;
     9             margin:0px;
    10         }
    11         
    12         .line1{
    13             display:none;
    14             /*visibility:hidden;*/
    15         }    
    16 
    17     </style>
    18     <script src="jquery.min.js"></script>
    19 </head>
    20 <body>
    21     <span class='line1'>aaaaaaaaaaaaaaaaaaaaaaa</span>
    22     <span class='line2'>bbbbbbbbbbbbbbbbbbbbbbb</span>
    23     <span class='line3'>ccccccccccccccccccccccc</span>
    24     <button>显示1</button>
    25     <button>显示2</button>
    26     <button>显示3</button>
    27 </body>
    28 <script>
    29     $('button').eq(0).click(function(){
    30         $('.line1').css({'display':'inline'});
    31     })
    32 </script>
    33 </html>
     
  • 相关阅读:
    华为机试:字符串翻转
    华为机试:数字颠倒
    华为机试:字符个数统计
    华为机试:提取不重复的整数
    华为机试:取近视值
    华为机试:进制转换
    华为机试:字符串分隔
    华为机试:明明的随机数
    华为机试:字符串最后一个单词的长度
    网易:相反数
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9261515.html
Copyright © 2020-2023  润新知