您的位置：首页 > 网站优化 > css  >  css的四种隐藏方式介绍

css的四种隐藏方式介绍

 更新时间：2017年1月22日 11:03  点击：2333
小编推荐的这篇文章介绍了css的四种隐藏方式，有需要的同学赶快来看看吧

1.opacity:0只是把元素隐藏起来了 ，但是还是占有布局，所以还是对布局有影响

<divclass="div1">
snda:opacity:0只是把元素隐藏起来了 ，但是还是占有布局，所以还是对布局有影响
</div>
<p>ppskdkad</p>
.div1{
opacity:0;
width:200px;
height:200px;
border:1pxsolidred;
}

2.visibility:hidden还是只是把元素隐藏了，但是还是占有布局

<divclass="div2">
这是第二个div visibility:hidden还是只是把元素隐藏了，但是还是占有布局
</div>
<p>看看效果</p>
.div2{
visibility:hidden;
width:200px;
height:200px;
border:1pxsolidred;
}

3.display:none不会影响到布局

<divclass="div3">
这是第三个DIV display:none不会影响到布局
</div>
<p>不信你看</p>
.div3{
display:none;
width:200px;
height:200px;
border:1pxsolidred;
}

4.position:absolute不会影响到布局

<divclass="div4">
这个是第四个div 我觉得也不会影响到布局 但是到底会不会 一起来看看吧 果然这个也不会影响到布局
</div>
<p>看看</p>v
.div4{
position:absolute;
top:-9999px;
left:-9999px;
width:200px;
height:200px;
border:1pxsolidred;
}
[!--infotagslink--]

相关文章

  • php中网页添加到桌面快捷方式方法

    我们经常会在网站中看到可以直接把网站以快捷方式保存到自己的电脑中，然后只要点击就可以实现进入网了，那么php中怎么把网页添加到桌面快捷方式呢。 功能简单，直接上...2016-11-25

  • PHP用DOM方式处理HTML之《Simple HTML DOM》

    近经常需要采集一些网上的数据，发现一个PHP处理HTML的利器 simple html dom,看了一下文档，使用非常方便，关键是能够用CSS选择器来访问DOM树，和jquery相似，实在是难得的利器...2016-11-25

  • js控制页面控件隐藏显示的两种方法介绍

    javascript控制页面控件隐藏显示的两种方法，方法的不同之处在于控件隐藏后是否还在页面上占位 方法一： 复制代码 代码如下: document.all["panelsms"].style.visibility="hidden"; document.all["panelsms"].style.visi...2013-10-13

  • jQuery实现广告显示和隐藏动画

    这篇文章主要为大家详细介绍了jQuery实现广告显示和隐藏动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-07-05

  • C#隐式运行CMD命令（隐藏命令窗口）

    这篇文章主要介绍了C#隐式运行CMD命令（隐藏命令窗口）,本文实现在winform窗口中运行CMD命令,需要的朋友可以参考下...2020-06-25

  • 基于JavaScript实现文字超出部分隐藏

    这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01

  • 基于JavaScript实现表单密码的隐藏和显示出来

    为了网站的安全性，很多朋友都把密码设的比较复杂，但是如何密码不能明显示，不知道输的是对是错，为了安全起见可以把密码显示的，那么基于js代码如何实现的呢？下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示，需要的朋友参考下...2016-03-03

  • ps中怎么设置垂直罗马对齐方式？垂直罗马对齐方式设置方法

    photoshop的直排文字工具，打出的字特别是英文字母，默认排列侧向的，如何调整为正向排列呢？下面我们就来看看标准的罗马对齐方式应该怎么设置。 1、在PS中点击“工具面...2017-01-22

  • jQuery 隐藏和显示 input 默认值示例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht...2014-06-07

  • 浅析Promise的介绍及基本用法

    Promise是异步编程的一种解决方案，在ES6中Promise被列为了正式规范，统一了用法，原生提供了Promise对象。接下来通过本文给大家介绍Promise的介绍及基本用法，感兴趣的朋友一起看看吧...2021-10-21

  • jquery插件实现鼠标隐藏

    这篇文章主要为大家详细介绍了jquery插件实现鼠标隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-05-14

  • javascript点击按钮实现隐藏显示切换效果

    这篇文章主要介绍了javascript点击按钮实现隐藏显示切换效果，以一个完整的实例为大家分析了js点击按钮实现隐藏显示切换的功能，感兴趣的小伙伴们可以参考一下...2016-02-05

  • javascript 判断页面访问方式电脑或者移动端

    这篇文章主要介绍了 判断页面访问方式电脑或者移动端的相关资料,这里提供了三种方法，需要的朋友可以参考下...2016-10-03

  • PHP中print_r、var_export、var_dump用法介绍

    文章详细的介绍了关于PHP中print_r、var_export、var_dump区别比较以及这几个在php不同的应用中的用法，有需要的朋友可以参考一下 可以看出print_r跟var_export都...2016-11-25

  • Framewrok7 视图介绍（views、view）使用介绍

    下面我们来看一篇关于Framewrok7 视图介绍（views、view）使用介绍吧，希望这篇文章能够帮助到各位朋友。 一、Views 与View的介绍 1，Views (<div class="views">) （1）Vi...2016-10-02

  • js控制TR的显示隐藏

    在很多现实的场景中，有的文本框我们希望在选择“是”的按钮之后才出现，这就需要js控制TR的隐藏和显示，如何控制，本文为大家揭晓...2016-03-07

  • JavaScript实现下拉菜单的显示隐藏

    这篇文章主要为大家详细介绍了JavaScript实现下拉菜单的显示隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-30

  • AI中的元素怎么隐藏和锁定？AI隐藏和锁定元素的方法

    AI里如何将一些需要保留的元素隐藏？比如页面中有颜色的中心线和文字，暂时性的隐藏起来，等做完所有东西，在要导出的时候再让其出现。请看下面的教程。 1、打开AI软件并...2017-01-22

  • c#实现隐藏与显示任务栏的方法详解

    本篇文章是对c#中任务栏隐藏与显示的实现方法进行了详细的分析介绍，需要的朋友参考下...2020-06-25

  • Monolog PHP日志类库使用详解介绍

    PHP日志类库在低版本中我们都没有看到了但在高版本的php中就有了，下面我们来看一篇关于PHP日志类库使用详解介绍吧． Monolog遵循PSR3的接口规范，可以很轻易的替换...2016-11-25