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. CMDB学习之二数据采集

    首先也要调用插件的方式,来写采集数据插件,在src目录下创建一个插件 plugins ,然后在plugins下创建disk.py ,memory.py, network.py等等 src plugin ...

  2. 制作U盘启动盘将Ubuntu 12.04升级为14.04的方法

    1 介绍 在周六的下午,我决定想高速浏览一下书籍[1].看看这个关于Ubuntu的圣经到底在讲什么东东. 感觉讲的不错,当我看到介绍文件标记语言-TeX和LaTeX的时候,该书作者推荐在Ubuntu上 ...

  3. TextView-显示自己添加的字体样式

    1.首先要把我们的字体放到相应的目录下 如果我们仅仅是想要验证一个字体,我们可以直接 我们的字体push到 手机 /system/fonts/ 目录下面 2.在代码中进行设置 import andro ...

  4. Bean复制的几种框架性能比较（Apache BeanUtils、PropertyUtils,Spring BeanUtils,Cglib BeanCopier）

    转自:http://www.cnblogs.com/kaka/archive/2013/03/06/2945514.html 比较的是四种复制的方式,分别为Apache的BeanUtils和Prope ...

  5. 68.qq号索引结构体写入内存,并实现快速排序

    //两个步骤,第一步读取文件,并且初始化索引结构体,把初始化的索引结构体写入到文件,第二步,读取这个文件到索引结构体 //并对这个结构体进行快速排序,得到顺序的索引,再写入文件 #define _CR ...

  6. golang 逐行读取文件

    package main import ( "bufio" "fmt" "io" "os" ) func main() ...

  7. linux又一次编译安装gd，添加freetype支持,解决验证码不显示问题，Fatal error: Call to undefined function imagettftext()

    问题: Fatal error: Call to undefined function Think\imagettftext() in /var/www/webreg/ThinkPHP/Library ...

  8. 全球可信并且唯一免费的HTTPS(SSL)证书颁发机构：StartSSL

    全球可信并且唯一免费的HTTPS(SSL)证书颁发机构:StartSSL http://blog.s135.com/startssl/ 购买权威机构的证书一年大概得七八千元,其实这是不值得的,所以一直 ...

  9. docker第一章

    简介 Docker 是 Docker.Inc 公司开源的一个基于 LXC技术之上构建的Container容器引擎, 源代码托管在 GitHub 上, 基于Go语言并遵从Apache2.0协议开源. D ...

  10. transform属性实现翻转效果

    transform:perspective(800px) rotateY(180deg);//翻转180度,透视800px; transition-delay: 0.3s;//过程时间 opacity ...