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. c# winform 技术提升

    http://www.cnblogs.com/junjie94wan/category/303961.html http://www.cnblogs.com/springyangwc/archive/ ...

  2. 洛谷 P1827 美国血统 American Heritage

    P1827 美国血统 American Heritage 题目描述 农夫约翰非常认真地对待他的奶牛们的血统.然而他不是一个真正优秀的记帐员.他把他的奶牛 们的家谱作成二叉树,并且把二叉树以更线性的“树 ...

  3. 经验之谈—让你看明确block

    事实上我感觉不常常使用block的朋友.对block应该是比較陌生的,那么如今我们来扒开block的真面目,看看block的本质 普通的局部变量.block内部仅仅会引用它初始的值(block定义那一 ...

  4. email之TO、CC、BCC意义

    CC 英文全称是 Carbon Copy(抄送); BCC英文全称是 Blind CarbonCopy(暗抄送). 两者的差别在于在BCC栏中的收件人能够看到全部的收件人名(TO,CC,BCC),而在 ...

  5. 用openssl生成含有中文信息的证书

    openssl 支持 ASCII 和 UTF-8 两种编码,应该可以制作中文证书. 在生成证书签发申请时,当输入中文则 openssl 报错,这是因为当前输入的字符是 ANSI 本地编码格式,超出了 ...

  6. windows 2016 配置 VNC 服务

    windows 2016 配置 VNC 服务 下载windows版 https://www.realvnc.com/download/vnc/ 安装时勾选 vncserver 进入 "C:\ ...

  7. R 语言下常用第三方库的说明

    1. doBy 官方文档见 CRAN - Package doBy doBy 主要适用于以下操作: 1) Facilities for groupwise computations of summar ...

  8. 关于EJB--实体Bean的BMP和CMP选择

    EJB有两种主要类型BMP(Bean managed persistence )和CMP(Container managed persistence ),这两种类型各有优缺点. BMP是在Bean中完 ...

  9. SPOJ 3899. Finding Fractions 连分数

    连分数乱搞,我反正是一眼没看出结果 某巨巨把这题讲解的比较详细 : http://blog.csdn.net/gogdizzy/article/details/8727386 令k = [a/b] 然 ...

  10. django 简单会议室预约（4）

    基本的配置已经完成了,来看看最重要的views.py 先看看简单的注册登录功能,在django里有一个专门的模块用来验证用户信息 :所以只需要调用就好了: #-*-coding:utf-8 -*- f ...