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显示时要注意块和行

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

             margin:0px;

         }

         .line1{

             display:none;

             /*visibility:hidden;*/

         }    

     </style>

     <script src="jquery.min.js"></script>

 </head>

 <body>

     <span class='line1'>aaaaaaaaaaaaaaaaaaaaaaa</span>

     <span class='line2'>bbbbbbbbbbbbbbbbbbbbbbb</span>

     <span class='line3'>ccccccccccccccccccccccc</span>

     <button>显示1</button>

     <button>显示2</button>

     <button>显示3</button>

 </body>

 <script>

     $('button').eq(0).click(function(){

         $('.line1').css({'display':'inline'});

     })

 </script>

 </html>
 

css3-10 如何控制元素的显示和隐藏（display和visibility的区别是什么）的更多相关文章

  1. 控制HTML元素的显示与隐藏——display和visibility

    有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现.通过下面的例子了解display和visibility的区别,简单的例子代 ...

  2. 微信小程序点击控制元素的显示与隐藏

    微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view cla ...

  3. legend3---19、要更多的从服务器端控制元素的显示和隐藏，而不要是页面端

    legend3---19.要更多的从服务器端控制元素的显示和隐藏,而不要是页面端 一.总结 一句话总结: 这样可以控制很多页面端的非法操作 1.html标签中data方式的数据,修改之后在标签上只显示 ...

  4. jquery控制css的display(控制元素的显示与隐藏)

    使用jquery控制div的显示与隐藏: $("#div的id").show()表示display:block, $("#div的id").hide()表示di ...

  5. jquery控制元素的显示与隐藏

    比如要控制div的显示与隐藏,一句话就搞定了.$("#id").show()表示display:block,$("#id").hide()表示display:n ...

  6. react中控制元素的显示与隐藏

    1.通过 state 变量来控制是否渲染元素 类似于 vue 的 v-if 方法是通过变量来控制是否加载元素的,如果变量为false,内容就直接不会渲染的. class Demo extends Re ...

  7. jQuery判断当前元素显示状态并控制元素的显示与隐藏

    1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible');   //true为显示,false为隐藏 $("#id") ...

  8. JS控制元素的显示和隐藏

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...

  9. js控制元素的显示与隐藏

    <body class="easyui-layout"> <div id = "centerId" data-options="re ...

随机推荐

  1. logwatch日志监控

    1. 介绍 在维护Linux服务器时,经常需要查看系统中各种服务的日志,以检查服务器的运行状态. 如登陆历史.邮件.软件安装等日志.系统管理员一个个去检查会十分不方便:且大多时候,这会是一种被动的检查 ...

  2. 【Codeforces Round #457 (Div. 2) A】 Jamie and Alarm Snooze

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 暴力往前走x分钟就好. 直到出现7为止. [代码] #include <bits/stdc++.h> using nam ...

  3. WPF通用框架 数据库结构

    前言 由於技術轉型, 目前大部分工作都是WPF為主, 但是趨於如今想在網絡上找一套能夠滿意的WPF權限管理框架太難, 因為WinForm那時候是有一套改寫過的權限框架, 所以數據庫設計這塊已經有了一個 ...

  4. 【编程】概念的理解 —— socket

    socket:A socket is something into which something is plugged or fitted (also called a receptacle). A ...

  5. Servlet简单注解方式使用

    我们是用Servlet进行跳转的时候都需要去web.xml中进行配置,分繁琐. 那么今天就学习下使用注解方式配置servlet一样好使 package com.shxt.servlet; import ...

  6. COGS 163 [USACO Mat07] 牛语

    COGS 163 [USACO Mat07] 牛语 输入文件:latin.in   输出文件:latin.out   简单对比 时间限制:1 s   内存限制:128 MB 奶牛们听说猪发明了一种秘密 ...

  7. SSO单点登录学习总结（2）——基于Cookie+fliter单点登录实例

    1.使用Cookie解决单点登录 技术点: 1.设置Cookie的路径为setPath("/").即Tomcat的目录下都有效 2.设置Cookie的域setDomain(&quo ...

  8. 一起talk C栗子吧（第九十 三回：C语言实例--进程间通信之临界资源）

    各位看官们.大家好,前面章回中咱们说的是使用信号和管道进行进程间通信的样例.这一回咱们说的样例是:进程间通信之临界资源.闲话休提,言归正转.让我们一起talk C栗子吧! 我们首先介绍一下,什么是临界 ...

  9. ajax中的POST和GET传值

    ajax中的POST和GET传值 转自:http://www.cnblogs.com/jtome/archive/2008/12/04/1347864.html Ajax中我们经常用到get和post ...

  10. 96.udp通信

    运行截图 客户端 创建客户端套接字,用于创建UDP通信 SOCKET socket_client; 创建UDP通信 socket_client = socket(AF_INET, SOCK_DGRAM ...