css样式隐藏元素的方法,你不知道的css隐藏元素的方法
css隐藏元素是网页编写常用的方式,根据我的经验总结了以下几种css隐藏元素的方法.
记录
opacity
opacity属性的隐藏方法主要是将元素透明度opacity设置为0,从而在视觉上就隐藏了元素,但是元素本身依然占据的着原有空间。
浏览器支持来说 IE8以以及更早的版本需要使用filter属性代替,如: filter: Alpha(opacity=80)。
语法: opacity: value|inherit;
value: 透明值。可取值有 0.0 (全透明)和 1.0(不透明)。inherit:从父元素集成opacity属性的值。其规定使用的CSS版本为 CSS3
JavaScript上的opacity使用方法: object.style.opacity=80。
使用示例:
.hide {opacity: 0;}
display
display属性的隐藏方法主要是将元素display值设置为none,将其不可见,连盒子模型也不生成,甚至连也不占用原有空间,使用该属性为none时用户对该元素的操作将不可用。
其规定使用的CSS版本为 CSS1。
JavaScript上的display隐藏时方法: object.style.display="none"。
JavaScript上的display显示时方法: object.style.display="除none的其他值"
display的属性值包含有: "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。
使用示例:
.hide {
display: none;
}
如果使用jQuery对 带有display: none;的元素进行显示/隐藏使用: $('.element').show() / $('element').hide();
position
position属性的隐藏方法主要是将元素定位出可视区域,从而达到隐藏效果。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
该属性的值包含有: absolute,fixed,releative,static,inherit。
其规定使用的CSS版本为 CSS2。
JavaScript上的absolute隐藏时方法: object.style.position="absolute" ,object.style.top="-99999px",object.style.left="-99999px"。
使用示例:
.hide {position: absolute;top: -99999px;left: -99999px;}
visibility
visibility属性的隐藏方法主要是在使用动画效果时使用,将该值设置为 hidden将隐藏元素及其子孙元素,如,我们需要鼠标移动到元素后显示子元素,可在元素 的hover样式设置 元素(或其子孙元素)的visibility的值 为visible即可。
该属性的值包含有:visible,hidden,collapse,inherit。
其规定使用的CSS版本为 CSS2。
JavaScript上的absolute隐藏时方法: object.style.visibility="hidden"。
使用示例:
.hide {visibility: hidden;}.show {visibility: visible;}
overflow
overflow属性的隐藏方法主要是, 使用超出隐藏的方法。
使用示例:
.overflow {
overflow: hidden;
}
举报/反馈
css样式隐藏元素的方法,你不知道的css隐藏元素的方法相关推荐
- 前端开发审查元素时CSS样式有个横线(该CSS样式定义后无效) 的解决办法
问题概述 关于这个问题,博主是在前端开发,样式调试的时候遇到的, 进行盒模型,CSS Debugger调试时,遇到样式设值后不可用的情况! 如下图: 解决办法 左看右看,上看下看,最终发现是前面在编码 ...
- 11种常用css样式学习大结局滚动条与显示隐藏
滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...
- php html5 css样式,怎么在html页面写css样式表
本教程操作环境:windows7系统.html5和css3版,该方法适用于所有品牌电脑. 在html页面写css样式表 1.首先可以直接把css代码写在现有的HTML标签元素的开始标签里面,并且css ...
- 在HTML中 表示内嵌CSS样式的标记,html怎么加css样式
html怎么加css样式?下面本篇文章就来给大家介绍一下在HTML中添加CSS样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1.行内式(使用style属性,在HTML标 ...
- html css文本框按钮,css样式之区分input是按钮还是文本框的方法
当你看到这个html标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框?一个复选框?--对,对,对,它们都对.也许你可能想不到,这个小小的input竟然可以创造出10个不同的东西,下面是个列表 ...
- html中引入css样式表的三种方式,css引用的几种方式是什么?
HTML怎么引用CSS样式?css引用的几种方式是什么?下面本篇文章就来给大家介绍一下在HTML中引用CSS样式的几种方法,希望对大家有所帮助. 1.行内式 在HTML标签中,使用style属性设置C ...
- php不显示css样式,thinkphp加载不了css样式怎么解决
thinkphp加载不了css样式怎么解决 解决方法: 1.项目入口文件index.php<?php define('APP_NAME','APP'); define('APP_PATH','. ...
- tomcat部署php项目 css样式丢失_webpack 打包编译有些CSS样式莫名消失?
点击右上方红色按钮关注"web秀",让你真正秀起来 相信很多小伙伴已经遇到过了,在使用webpack构建项目(npm run build),部署项目后,会发现有些CSS样式丢失了, ...
- html刷新css样式,让IE浏览器即时刷新CSS样式_HTML与CSS教程_电脑知识学习_培训之家...
让IE浏览器即时刷新CSS样式为http://www.pxzj8.com整理发布,类型为HTML与CSS教程,本站还有更多关于html与css教程,css教程,html网页设计教程,css视频教程,c ...
最新文章
- SpringBoot(一)_快速实战搭建项目
- 分贝(BD)的含义以及关系(有助于深刻理解)
- dmn是大脑中哪个区域_DMN中的函数式编程:感觉就像再次重读我的大学课程一样...
- 浅析jQuery中常用的元素查找方法总结
- Javascript 给页面元素添加事件函数探讨
- openstack单元測试用组件一览
- Spring Cloud Consul
- 概率论基础——概率论公理
- C语言小案例_OA大典故障案例摘录【第1395篇】故障案例: 输稿器卡纸 合集 | 理光黑白复印机 彩色复印机...
- php扑克牌随机发,PHP实现随机发放扑克牌
- 两个向量叉乘表示什么意思_为什么向量积(叉乘)的这两个概念是这样的?
- C++实现身份证校验和归属地查询
- 330tsl是什么意思_19款探岳330tsl两区豪华型怎么样?
- 白杨SEO:微信视频号怎么玩?推广、涨粉、上热门及赚钱技巧大全
- Android Sdk热修复实践之旅
- Openfire 系统架构
- 宇视网络视频录像机添加摄像机常规方法
- AISHELL-1 语音识别实战
- nginx常见502错误提示原因和解决方法
- Android高工:细说 Android 多线程,探究原理知其所以然
热门文章
- Windows环境下编译OpenOCD
- SpringBoot字典翻译
- Python之ini配置文件详解
- 微型计算机主板usb电源损坏,硬盘盒也能带来灾难?修复主板烧毁的USB线路
- win10家庭版调出组策略_Win10关机不顺畅 - 仍提示有程序运行
- cookie在flask中的应用、flask-login模块的使用(login_user、@login_required、@login_manager.user_loader)current_user
- html制作花样链接卡,挂钩弹片连接式手机壳的制作方法
- 处理 wait millis 60009, active 50 ,maxactive 200 异常 过程
- i5 8250u java_i5 8250u属于什么级别
- [附源码]计算机毕业设计Python的在线作业批改系统(程序+源码+LW文档)