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. RLF。HRLF解释

  2. umask---默认权限掩码

  3. Android中级第十讲--相机录像和查看系统相册图片

    博客出自:http://blog.csdn.net/liuxian13183,转载注明出处! All Rights Reserved ! 录像比较简单,开始录制: myCamera.unlock(); ...

  4. SQL优化工具SQLAdvisor使用（转）

    一.简介 在数据库运维过程中,优化SQL是业务团队与DBA团队的日常任务.例行SQL优化,不仅可以提升程序性能,还能够降低线上故障的概率. 目前常用的SQL优化方式包括但不限于:业务层优化.SQL逻辑 ...

  5. 程序猿的量化交易之路（14）--Cointrader数据表（2）

    Cointrader表结构 转载须注明出处:http://blog.csdn.net/minimicall?viewmode=contents,http://cloudtrader.top 设置(se ...

  6. actionBar-双行字体大小修改

    <style name="BackupRestore.Theme.Person" parent="@style/BackupRestore.Theme"& ...

  7. java创建节点和单向链表

    package datastructure; public class Node { private Object data; private Node next; public Node() { t ...

  8. [Node & Testing] Intergration Testing with Node Express

    We have express app: import _ from 'lodash' import faker from 'faker' import express from 'express' ...

  9. Font Awesome 图标如何使用

    Font Awesome 图标如何使用 一.总结 一句话总结:Font Awesome字体图标非常好用,直接引入font-awesome.css,然后就可以直接使用了,使用的时候是用的i标签. 1.字 ...

  10. 12. ZooKeeper之Java客户端API使用—创建会话。

    转自:https://blog.csdn.net/en_joker/article/details/78686649 客户端可以通过创建一个ZooKeeper(org.apache.zookeeper ...