关于opacity和visibility的信息

visibility 属性和opacity 属性

1、visibility 属性

visible

默认值。元素是可见的。

hidden

元素是不可见的。

collapse

当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。

inherit

规定应该从父元素继承 visibility 属性的值。

2、opacity 属性

value

规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。

inherit

应该从父元素继承 opacity 属性的值。

RGBA和OPACITY的透明效果有什么不同？

1.背景介绍

1.什么是RGBA？

rgb大家都熟悉，RGB色彩模式（也翻译为“红绿蓝”，比较少用）是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。那现在我们所说的grba又是什么呢？说得简单一点就是在grb的基础上加进了一个通道alpha。

其实他就是来定义透明度的。a的取值范围是0-1之间，不可以是负值，r、g、b三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。

我们平时用的较多的是16进制颜色，例如黑色#000000;白色#FFFFFF，这些是16进制表示的颜色，如果使用RGB颜色表示就是 rgb(0, 0, 0)与rgb(255,255,255)，其实本质上是一样的，只是一个是16进制表示的，一个是二进制表示的(RGB颜色)。

用rgba改变大娃字体颜色

用rgba改变大娃边框颜色

用rgba改变大娃字体阴影颜色

用rgba改变大娃边框阴影颜色

其实我是一个dome

透明度还支持透明渐变。这对于制作一些特殊的效果是相当有用的，例如，当堆叠多个背景时。这里是两个背景的结合：一张图片，一个原谅绿到透明的线性渐变。

加了这个渐变属性

2.什么是OPACITY？

也是一个css3属性，该属性用于设置元素的不透明度级别，所有的浏览器都支持这个属性。

opacity 中文翻译为：不透明度。语法：opacity：value | inherit ;

取值说明: value 不透明度，从0.0(完全透明)到1.0（完全不透明）。

3.什么是DISPLAY：NONE

将元素与其子元素从普通文档流中移除。这时文档的渲染就像元素从来没有存在过一样，也就是说它所占据的空间被折叠了。元素的内容也会被屏幕阅读所忽略。隐藏起来。

4.什么是VISIBLITY

w3school上给的定义 定义和用法 visibility 属性规定元素是否可见。 提示：即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。

二.知识剖析

1.RGBA与OPACITY的区别

opacity会继承父元素的opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。简单来说就是opacity作用于元素和元素所有内容的透明

rgba相对于opacity还是技高一筹的，当然只要是涉及颜色的，都可以用rgba来设置。

三.常见问题

DISPLAY 和VISIBILITY有什么区别?

四.解决方案

1.主要在于visibility:hidden占据空间，无法点击，另一个display:none;不占据空间，无法点击。有一句话是这么说的，display：none会真的把你弄没，而visibility：hidden则仅仅是为你披上一件隐身衣而已，你还在原来的地方呆着。设置透明值(opcity)，占据空间，可以点击。 该方法并非真正意义上的隐藏，只是将元素设为透明，但是只适用于文字类的元素，不适用于input，因为即使看不到，可以点击相应input。

2.就是displayde回流与渲染visibility没有这个影响前端性能的问题。回流则是重新使该页面渲染一次，从而影响性能。

3.株连性,所谓“株连性”，就是如果祖先元素遭遇某祸害，则其子子孙孙无一例外也要遭殃。display:none就是“株连性”明显的声明：一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事.我们给一个父元素应用visibility:hidden，则其子孙后代也都会全部不可见。如果子孙元素应用了visibility:visible，那么这个子孙元素又会刘谦般地显现出来。

对比总结： display:none是个相当惨无人道的声明，子孙后代全部搞死（株连性），而且连块安葬的地方都不留（不留空间），导致全体民众哗然（渲染与回流）。 visibility:hidden则具有人道主义关怀，虽然不得已搞死子孙，但是子孙可以通过一定手段避免（伪株连性），而且死后全尸，墓地俱全（占据空间），国内民众比较淡然（无渲染与回流）。

五.编码实战

六.扩展思考

什么是渐变

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。

详见dome

7.参考文献

参考一： handongopqwe的专栏

参考二： CSS3 Gradient

参考三： 张云的博客

8.更多讨论

更多讨论：大家有没有其他实现透明或隐藏的方法?

某些情况下可以使用left:-100000px来达到同样效果。

position: relative;效果类似于visibility:hidden;还占着位置，不愿离开。

position: absolute;效果类似于display:none;消失的很远，还不占地方。

opacity ：0 和 visbility :hidden 之间有什么区别

visibility：hidden则仅仅是为你披上一件隐身衣而已，你还在原来的地方呆着。设置透明值(opcity)，占据空间，可以点击。 该方法并非真正意义上的隐藏，只是将元素设为透明，但是只适用于文字类的元素，不适用于input，因为即使看不到，可以点击相应input。

鸣谢

感谢何华飒、王相博师兄，此教程是在他们之前技术分享的基础上完善而成

感谢大家观看

BY : 何华飒| 王相博 | 王姝丽

PPT链接

视频链接

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

我们下周再见！

------------------------------------------------------------------------------------------------------------------------

技能树.IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧~

我的邀请链接：

Web前端工程师应该知道的CSS隐藏页面元素的方法

今天小编要跟大家分享的文章是关于Web前端工程师应该知道的CSS隐藏页面元素的方法。用CSS隐藏页面元素有许多种方法。你可以将opacity

设为0、将visibility设为hidden、将display设为none或者将position设为absolute

然后将位置设到不可见区域。

你有没有想过，为什么我们要有这么多技术来隐藏元素，而它们看起来都实现的是同样的效果?每一种方法实际上与其他方法之间都有一些细微的不同，这些

不同决定了在一个特定的场合下使用哪一个方法。这篇教程将覆盖到那些你需要记住的细小不同点，让你根据不同情况选择上面这些方法中适合的方法来隐藏元素。正在从事web前端工作的小伙伴们来和小编一起学习一下吧！

一、opacity

opacity属性的意思是设置一个元素的透明度。它不是为改变元素的边界框(boundingbox)而设计的。这意味着将opacity设为0

只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互。

.hide{

opacity:0;}

如果你打算使用opacity

属性在读屏软件中隐藏元素，很不幸，你并不能如愿。元素和它所有的内容会被读屏软件阅读，就像网页上的其他元素那样。换句话说，元素的行为就和它们不透明时一致。

我还要提醒一句，opacity属性可以用来实现一些效果很棒的动画。任何opacity属性值小于1

的元素也会创建一个新的堆叠上下文(stackingcontext)。

看下面的例子：

看@SitePoint提供的例子“用opacity隐藏元素”

当你的鼠标移到被隐藏的第2个的区块上，元素状态平滑地从完全透明过渡到完全不透明。区块也将cursor属性设置为了

pointer，这说明了用户可以与它交互。

二、visibility

第二个要说的属性是visibility。将它的值设为hidden将隐藏我们的元素。如同opacity

属性，被隐藏的元素依然会对我们的网页布局起作用。与opacity唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏。

这个属性也能够实现动画效果，只要它的初始和结束状态不一样。这确保了visibility

状态切换之间的过渡动画可以是时间平滑的(事实上可以用这一点来用hidden实现元素的延迟显示和隐藏——译者注)。

.hide{

visibility:hidden;}

下面的例子演示了visibility与opacity有怎样的不同：

看@SitePoint提供的例子“用visibility隐藏元素”

注意，如果一个元素的visibility被设置为hidden，同时想要显示它的某个子孙元素，只要将那个元素的visibility显式设置为

visible即可(就如例子里面的.o-hidep——译者注)。尝试只hover在隐藏元素上，不要hover在p

标签里的数字上，你会发现你的鼠标光标没有变成手指头的样子。此时，你点击鼠标，你的click事件也不会被触发。

而在标签里面的

标签则依然可以捕获所有的鼠标事件。一旦你的鼠标移动到文字上，

本身变得可见并且事件注册也随之生效。

三、display

display属性依照词义真正隐藏元素。将display属性设为none

确保元素不可见并且连盒模型也不生成。使用这个属性，被隐藏的元素不占据任何空间。不仅如此，一旦display设为none

任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。

任何这个元素的子孙元素也会被同时隐藏。为这个属性添加过渡动画是无效的，它的任何不同状态值之间的切换总是会立即生效。

不过请注意，通过DOM依然可以访问到这个元素。因此你可以通过DOM来操作它，就像操作其他的元素。

.hide{

display:none;}

看下面的例子：

@SitePoint提供的例子“用display隐藏元素”

你将看到第二个块元素内有一个

元素，它自己的display属性被设置成block，但是它依然不可见。这是

visibility:hidden和display:none的另一个不同之处。在前一个例子里，将任何子孙元素visibility显式设置成

visible可以让它变得可见，但是display不吃这一套，不管自身的display值是什么，只要祖先元素的display是

one，它们就都不可见。

现在，将鼠标移到第一个块元素上面几次，然后点击它。这个操作将让第二个块元素显现出来，它其中的数字将是一个大于0

的数。这是因为，元素即使被这样设置成对用户隐藏，还是可以通过JavaScript来进行操作。

四、position

假设有一个元素你想要与它交互，但是你又不想让它影响你的网页布局，没有合适的属性可以处理这种情况(opacity和visibility影响布局，

display不影响布局但又无法直接交互——译者注)。在这种情况下，你只能考虑将元素移出可视区域。这个办法既不会影响布局，有能让元素保持可以操作。下面是采用这

种办法的CSS：

.hide{

position:absolute;

top:-9999px;

left:-9999px;}

下面的例子阐明了怎样通过绝对定位的方式隐藏元素，并让它和前面的那个例子效果一样：

看@SitePoint提供的例子“用position属性隐藏元素”

这种方法的主要原理是通过将元素的top和left

设置成足够大的负数，使它在屏幕上不可见。采用这个技术的一个好处(或者潜在的缺点)是用它隐藏的元素的内容可以被读屏软件读取。这完全可以理解，是因为你只是将元素移到可视区域外面让用户无法看到它。

你得避免使用这个方法去隐藏任何可以获得焦点的元素，因为如果那么做，当用户让那个元素获得焦点时，会导致一个不可预料的焦点切换。这个方法在创建

自定义复选框和单选按钮时经常被使用。(用DOM模拟复选框和单选按钮，但用这个方法隐藏真正的checkbox和radio

元素来“接收”焦点切换——译者注)

五、clip-path

隐藏元素的另一种方法是通过剪裁它们来实现。在以前，这可以通过clip属性来实现，但是这个属性被废弃了，换成一个更好的属性叫做

clip-path。NitishKumar最近在SitePoint发表了“介绍clicp-path

属性”这篇文章，通过阅读它可以了解这个属性的更多高级用法。

记住，clip-path属性还没有在IE或者Edge下被完全支持。如果要在你的clip-path中使用外部的SVG

文件，浏览器支持度还要更低。使用clip-path属性来隐藏元素的代码看起来如下：

.hide{

clip-path:polygon(0px0px,0px0px,0px0px,0px0px);}

下面是一个实际使用它的例子：

看@SitePoint提供的例子“用clip-path属性隐藏元素”

如果你把鼠标悬停在第一个元素上，它依然可以影响第二个元素，尽管第二个元素已经通过clip-path隐藏了。如果你点击它，它会移除用来隐藏的

class，让我们的元素从那个位置显现出来。被隐藏元素中的文字仍然能够通过读屏软件读取，许多WordPress站点使用clip-path或者之前的

clip来实现专门为读屏软件提供的文字。

虽然我们的元素自身不再显示，它也依然占据本该占据的矩形大小，它周围的元素的行为就如同它可见时一样。记住用户交互例如鼠标悬停或者点击在剪裁区

域之外也不可能生效。在我们的例子里，剪裁区大小为零，这意味着用户将不能与隐藏的元素直接交互。此外，这个属性能够使用各种过渡动画来实现不同的效果。

结论

在这篇教程里，我们看了5种不同的通过CSS

隐藏元素的方法。每一种方法都与其他几种有一点区别。知道你想要实现什么有助于你决定采用哪一个属性，随着时间推移，你就能根据实际需求本能地选择最佳方式了。

以上就是小编今天为大家分享的关于Web前端工程师应该知道的CSS

隐藏页面元素的方法的文章，希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助，想要了解更多web前端相关知识记得关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利！

回答于?2022-10-28

详情

该链接由问题回答方推荐

官方电话

在线客服

官方服务

官方网站

领学习资料

计算机培训

设计培训

编程培训

css已经设置了单选隐藏怎么在设置一个

只是一点提示，如果你仍然想要使用所有浏览器对无线电和复选框的本机支持，比如用↑和↓键在它们之间移动，将css设置为position:fixed;opacity:0，这将保留所有功能但保持输入隐藏，不会占用任何布局空间。我花了最后3个小时搞清楚这一点，但它确实有效！

答案 1 :(得分：15)

除了Nathan Lee的回答

input[type="radio"]:checked{

visibility:hidden;

}

是指定已选中单选按钮的选项

input[type="radio"][value="text"]:checked{

visibility:hidden;

}

是一个指定已选中单选按钮的选项，其值等于'text'(示例中为'none')

答案 2 :(得分：6)

尝试visibility:hidden;这会有效。

HTML：

CSS：

input.checked[type="radio"]{visibility:hidden;}

我希望这就是你要找的东西。

答案 3 :(得分：5)

如果你想多次隐藏一个复选框/收音机，那就是制作一个自定义的复选框/收音机。

如果您希望能够专注于输入的标签，请使用opacity：0;位置：绝对的;宽度：0;这使得输入在不占用空间的情况下不可见。

如果你使用display：none;或能见度：隐藏;它会有类似的效果，但目前最常用的浏览器(MSIE11，Edge，Chrome 60.0.3112.101，Firefox 55)不允许使用键盘来关注元素，这使得它不易访问。

＆＃13;

＆＃13;

.opacity {

position: absolute;

opacity: 0;

width: 0;/* for internet explorer */

}

.visibility {

visibility: hidden;

}

.nodisplay {

display: none;

}

input[type=checkbox]+label {

font-weight: normal;

}

input[type=checkbox]:checked+label {

font-weight: bold;

}

input[type=checkbox]:focus+label {

border: 1px dotted #000;

}＆＃13;

Press space to (un)check

Press space to (un)check

Press space to (un)check

Press space to (un)check

Press space to (un)check

Press space to (un)check

＆＃13;＆＃13;＆＃13;

答案 4 :(得分：1)

尝试使用:checked选择器：

input[type="radio"]:checked {

display: none;

}

答案 5 :(得分：1)

如果您使用过{display：none;}并且仍然看到一个空格(如3px左右)，那么很可能您的html中的元素之间有空格或换行符，有时会导致渲染器在这些元素之间显示一些像素。

这确实存在问题，如果没有这方面的知识就很难确定问题，但是一旦你知道，你有两个简单的解决方案：

要么删除html中代码之间的空白区域。 (不幸的是，这会使你的html变得更加混乱，所以第二种选择可能会更好。)

或者，在您的css中，将父容器中的font-size设置为0px。

例如：#parent{font-size:0px;}然后再次为#parent *{font-size:initial;}的父级的所有孩子初始化它。

醇

#parent{

font-size:0px;

display:block;

}

#parent *{

font-size:initial;

}

.tab-label {

display:inline-block;

background: #eee;

border: 1px solid;

}

[name="tab-group-1"] {

display: none;

}

Tab One

Tab Two

Tab Three

答案 6 :(得分：0)

除了其他答案中提到的问题(特别是可访问性问题)之外，display: none的一个警告是，当无线电输入为required时，它还会影响浏览器显示的警告，并且用户没有检查它。

另一方面，opacity: 0和visibility: hidden的一个警告是，单选按钮仍会占用一些空间(而AFAICS width: 0px无效)可能是问题(例如，是否对齐，或者您的单选按钮是否位于

标签内，并且您希望上的:hover背景颜色发生变化，在这种情况下，标签必须覆盖{ {1}}。

一种解决方法是将单选按钮的

设置为position。

fixed

input[type=radio] {

opacity: 10;

position: fixed;

}

input[type=radio]+label {

background-color: #eee;

padding: 1em;

}

如摘要所示(使用

radio1

radio2而不是0只是为了了解我们在说什么)，使用opacity: 10的单选按钮不再影响标签。

相关资源：纯css3单选框和复选框样式美化效果_css单选框美化-其它代码类资源...

打开CSDN，阅读体验更佳

...菜单、文本域、字段集_陌一一的博客_css单选框和复选框

cols控制的是文本域的列能输入几个字符宽度,rows控制的是行能输入几行,因为这个能输入多少个字符受字体大小和字体类型影响,所以我们一般不这么设置行和列,我们一般是用css设置,还有一个属性是placeholder,就是文本域提示符,属性值不是真...

继续访问

使用纯CSS实现内容的显示隐藏(可用于响应式手机端菜单栏的显示)

initial-scale=1.0" 纯CSS实现点击显示隐藏 /* 在手机端正常的操作是默认隐藏,点击菜单的时候显示 */ div { display: none; } /* 当单选框被选中的时候显示兄弟元素div */ #btn:checked~div { display: block; } /* 设...

继续访问

【jQuery/CSS】显示或隐藏元素

1. CSS分别有display、visibility两个样式可以用于隐藏或显示HTML元素 1) display样式有多个类型的值可选择，默认值为inline，隐藏后会释放元素所占用的页面空间（详见：点击打开链接） style="display: none;" document.getElementById("div1").style.display="none";//隐藏

继续访问

js input radio点击事件

html代码： input type="radio" name="myname" value="1" /1 input type="radio" name="myname" value="2" /2 js代码： // 点击事件change $('input[type=radio][name=myname]').change(function (...

继续访问

CSS修改html单选框radio样式_AuGnIk的博客_单选框样式修改

采用剪切的方式,让剪切后的尺寸为零,以此隐藏原来的单选框。 3、用伪元素作为新的单选框: /* 未被选中的单选框样式 空心圆圈*/input[type="radio"] + label::before{content:'';display:inline-block;vertical-align:middle;width...

继续访问

CSS 隐藏+对齐+表单篇_believealone的博客

同组的设置相同的name value属性 选框的值 checked属性 让某个单选框默认处于选中态 1.6 多选框 type=checkbox value属性 表示选框的值 多选框因为可能会同时选择多个值, 所以name属性需要注意: 可以name值不同 如果name值想要起成相同...

继续访问

最新发布 前端 -- 单选框内容影响复选框的隐藏与显示 附代码

在网页中这类问题比较常见通过选择一个复选框或者下拉框的内容来改变另外一个复选框或者下拉框的内容（一个选项影响另外一个选项）以下内容主要做一个知识点的探讨，类似功能大同小异。......

继续访问

我在使用Css控制 button 按钮显示与隐藏遇到的问题。

Css :hover选择器遇到的一些问题

继续访问

纯css控制文字显示隐藏_啊呀阿荼的博客_css点击显示隐藏...

纯css控制文字显示隐藏 用到css 伪类 :checked :checked选择器匹配每个已被选中的 input 元素(只用于单选按钮和复选框)。 html 更多 收起 文字文字文字文字文字文字

继续访问

单选框radio控制div的显示和隐藏_知否技术的博客

css({"display":"none"}); $("input[type=radio][name='dateType']").change(function(){ var v = $(this).val(); if (v =="1"){ $("#limit").hide(800); }else{ $("#limit").show(800); } });...

继续访问

CSS 实现div显示或隐藏的三种方法（display 和 visibility的区别）

一、使用CSS的 display 属性来隐藏或显示div： display 属性规定元素应该 生成的框的类型，可以通过 display：none 来隐藏某一元素。 style="display: none;" document.getElementById("typediv1").style.display="none";//隐藏 document.getElementById("typediv1...

继续访问

按钮、元素的显示/隐藏

Eayui的按钮显示/隐藏 这种写法是不占用原有位置 // 隐藏 $('#saveBtn').hide(); // 显示 $('#saveBtn').show(); display：元素的位置不被占用 //display 不占用位置 // 隐藏 $("#saveBtn").css("display", "none") // 显示 $("#saveBtn").css("display", ""); // diaplay 原始写法 //隐藏 document.getElement

继续访问

点击一个单选框时另外一个单选框里的内容属性隐藏掉_使用纯CSS制作一个...

首先,我们先了解下什么是 CSS Checkbox Hack ? CSS Checkbox Hack 允许你通过复选框(Checkbox)是否选中(或单选按钮radio buttons)来控制某些特定的样式。这里运用的是:checked 伪类选择器,其意思就是”如果选中了表单(复选框、单选按钮...

继续访问

单选框样式/自定义单选框/改变单选框border颜色/css单选框

1、首先将原先的单选框隐藏掉。 2、利用label:before 在label的前面加一个元素来模拟单选框的样式。 3、利用:checked css选择器将选中的单选框单独设置样式。 4、具体样式自根据项目手动设置比较灵活。

继续访问

css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display：none；的区别 、遮罩层效果、 三级菜单制作、选项卡制作——css3知识点总结

一、css3新增选择器 1、兄弟选择器 相邻兄弟选择器 E + F { } 紧挨选择器E后的那个兄弟选择器F /* 相邻兄弟选择器，该代码意思是选择紧邻div后的那一个span元素，且只有第一个span会被选中。 */ div+span{ color: pink; } 通用兄弟选择器 E ~ F{ } 选择器E后的所有的兄弟选择器F /* 通用兄弟选择器，选择所有div元素后面的span元素 */ /* 一对.

继续访问

用 CSS 隐藏页面元素的 5 种方法

用 CSS 隐藏页面元素有许多种方法。你可以将 opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none 或者将 position 设为absolute 然后将位置设到不可见区域。 你有没有想过，为什么我们要有这么多技术来隐藏元素，而它们看起来都实现的是同样的效果？每一种方法实际上与其他方法之间都有一些细微的不同，这些不同决定了在一个特定的场

继续访问

css 隐藏元素的方法

占据位置，会被子继承，设置visibilityvisible可以显示子元素，重绘，不会触发绑定事件。占据位置，会被子继承，但是设置opacity1,子元素不会显示，会触发绑定事件。不占据位置，触发回流，不会被子元素继承，不会触发绑定事件。绝对定位，使它偏移可视区域。...

继续访问

热门推荐 单选框radio控制div的显示和隐藏

通过鼠标单击单选框的动作，实现某个div或多个div的显示和隐藏。实例如下： function divClick(){ var show=""; var apm = document.getElementsByName("AdPrintMode"); for(var i=0;iapm.length;i++){

继续访问

css去除单选按钮的圆点,CSS3带圆点游动动画的自定义单选框

CSS语言：CSSSCSS确定.checkable-group {background: white;border: 2px solid black;border-radius: 16px;margin: 0 auto;position: relative;width: 80%;}label {border-bottom: 1px solid black;display: block;paddin...

继续访问

html css 隐藏和显示按钮

html 隐藏和显示按钮 !DOCTYPE html html lang="en" head meta charset="UTF-8" titleTitle/title /head body div !--display:block:显示按钮--

继续访问

去掉radio单选按钮的默认样式

在实际项目中radio单选按钮的默认样式是很讨厌的 很多地方用了跟主色调不一样很突兀 我在网上查了查自己改了一个 dd label input type="radio" checked="checked" name="classId" class="radio" value="1" 商品咨

继续访问

关于单选框的css和css控制显隐

label class="edf-line" for="z" input type="radio" name="pay-radio" value="2" id="z" class="st-one" i class="checkbox_ico"/i ...

继续访问

两个单选按钮,点击其中一个隐藏或显示其他的div

HTML代码 div class="am-u-sm-9 am-u-end" input type="radio" onClick="return diva()" class="tpl-form-input" name="article[activity_publish]" value="1" checked="checked";手动发布 i...

继续访问

css 隐藏按钮_CSS3隐藏的社交按钮

css 隐藏按钮 Today we'll be looking at some very simple techniques using CSS3 transforms to make social link buttons. Usually you'll see these links all over a site sitting there making a site look ugly. ...

继续访问

css 单选框隐藏

css设置按钮隐藏

写评论

评论

收藏

点赞

踩

分享

web前端入门到实战：元素显示隐藏的9种思路

在网页制作中，元素的显示隐藏是非常常见的需求。本文将介绍元素显示隐藏的9种思路

对于元素显隐来说，最常见就是display:none | display:block，但是使用这种方法有个问题，元素的display属性在隐藏前并不都是block，还有可能是inline、inline-block等

注意：如果要适用于任何元素需要提前储存元素的display值

visibility:hidden与display:none作为隐藏元素的两种方式，常常被人们拿来比较。其实区别很简单，前者不脱离文档流，保留隐藏之前元素占据的物理区域；而后者则脱离文档流，如果重新显示则需要页面的重新绘制。还有一点区别却很少人提到，如果父级设置display:none;子级设置display:block也不会显示；而如果父级设置visibility:hidden;子级设置visibility:visible时子级会显示出来

注意：visilibity可应用transition属性。因为visibility是离散步骤，在0到1数字范围之内，0表示隐藏，1表示显示。visibility:hidden可以看成visibility:0；visibility:visible可以看成visibility:1。于是，visibility应用transition等同于0~1之间的过渡效果。实际上，只要visibility的值大于0就是显示的。由于这个现象，我们可以利用transition实现元素的延时显示隐藏

可能有些人不太熟悉，HTML有个hidden全局属性，专门用于显示隐藏元素，与display:none的作用类似，元素隐藏时脱离文档流，无法接受javascript事件

注意：IE10-不支持test.hidden='hidden'写法，只支持test.setAttribute('hidden','hidden')写法

对于元素显隐，opacity的使用频率也挺多。opacity的好处是，即使opacity为0的元素，仍然可以接受javascript事件，这是display:none和visiblity:hidden所不具备的。

CSS中有一个属性是overflow，overflow:hidden代表着溢出隐藏。我们可以利用父级的overflow:hidden配合父级的height:0或width:0来实现元素的显隐

注意：当设置overflow的元素在绝对定位元素和其包含块之间的时候，overflow属性会失效

CSS裁剪clip这个属性平时用的不多，当clip:rect(top,right,bottom,left)中的top=bottom，或者left=right时，可实现元素的隐藏效果，效果类似于visibility:hidden

注意：clip属性只能应用在绝对定位元素上

CSS变形transform是一些效果的集合，主要是移动、旋转、缩放和倾斜这四种基本操作，还可以通过设置matrix矩阵来实现更复杂的效果。通过不同的变形函数可以实现元素显隐效果

注意：IE9-浏览器不支持，safari3.1-8、android2.1-4.4.4、IOS3.2-8.4都需要添加前缀

【1】scale

transform:scale(0)时，元素被隐藏

【2】rotate

transform:rotateX(90deg)时，元素被隐藏

【3】skew

transform:skew(90deg)时，元素被隐藏

利用定位元素可以覆盖普通流元素的特性。为元素的before伪元素设置相同的尺寸，通过控制伪元素的定位属性，实现显隐效果

//鼠标移入移出会出现元素的显隐效果

元素显示隐藏的另一种常见思路是偏移，将元素移动到视窗范围外，也可以实现等价的显隐效果

【1】margin-top

利用负margin将元素移出视窗外，要注意的是设置负margin的元素并没有脱离普通流，后续元素会跟着一起移动

【2】left

通过设置相对定位或绝对定位元素的偏移属性，将元素移动到视窗外

【3】translate