《精彩绝伦的CSS》——提示（三）让元素“消失”

三、让元素消失

1、抑制元素的显示：display:none;

.hide{

display:none;

}

应用了hide类的元素，就像不存在一样，不会对布局有任何影响。

然而这样子做会有两个陷阱，一个潜在的，一个固有的。

潜在的就是，如果通过js将display设为none那么想复原时该怎么做，因为原显示值可能是inline或者block又或者都不是，有个普遍的做法，即不指定任何值：

obj.style.display = '';

这会使默认恢复为在其css中设置的值，或者浏览器内置样式值。

另一个解决方法是，添加一个隐藏元素的类，当需要显示元素时将该类去掉。

固有问题就是，显示值为none时，元素无法被绝大多数的辅助技术（比如屏幕阅读器）“看到”。

2、抑制元素可见性：visibility:hidden;

该规则与display的区别是参与页面布局。但这对于绝对元素来说没有什么问题，因为它们已经不参与页面布局了。（绝对定位元素位于其他元素的上方，并且在对其他元素进行布局时不被考虑在内。）

但遗憾的是这种技术仍不能被绝大多数屏幕阅读器可见。

3、将元素移出屏幕

.hide{position:absolute;top:-10000em;left:-10000em;}

绝对定位移出屏幕。这样不仅会将元素移到视野之外，但是至少仍被某些屏幕阅读器识别。这就是这种技术会被当做隐藏元素的更佳选择的原因。

那么要将移出的元素移回来主要有三种方法：

(1).show{top:0;left:0}

(2).show{position:static;}

采用这种方式，就不需重设top和left的值了，因为在静态定位中这些属性将完全被忽略掉。无论你是否重设它们，都不会有任何差异。

(3).show{position:relative;top:0;left:0;}

《精彩绝伦的CSS》——提示（三）让元素“消失”相关推荐

css:块元素、行内元素、行内块元素以及三种元素之间的转换
一.三种元素的介绍 1.块元素块元素的特点独占一行,也就是会自动换行可以设置高度.宽度.外边距.内边距宽度默认是父元素的宽度常见块元素 <h1></h1>---< ...
《精彩绝伦的CSS[(美)Eric A. Meyer] 》最新
介绍: <精彩绝伦的CSS>是国际知名CSS 大师写就的实用教程,分为3 部分.第一部分介绍了CSS 基础知识,对一些常用工具和基本技术进行了介绍,包括CSS 选择器等.第二部分展示了各种 ...
并不简单的翻页时钟（一）：样式篇（Flex布局、line-height、data-set用法、css before after伪元素）
目录并不简单的翻页时钟我以为的翻页时钟实际上的翻页时钟关键的知识点效果展示代码解析 HTML CSS 详解CSS 1.display:flex 元素居中 2.:before .:after ...
CSS（二）元素基础样式、字体属性、文本属性
目录一.元素基础样式 1. 尺寸和单位 2. 颜色 3. 边框 4. 元素的分类 5. 显示和隐藏属性二.字体属性三.文本属性一.元素基础样式 1. 尺寸和单位宽度width和高度heigh ...
CSS3基础(基础认知,选择器,字体属性,文本属性,CSS 的三种引入方式)
CSS3基础 1. 基础认知 1.1 CSS 简介 CSS 的使用场景是什么? 美化网页,布局页面 CSS 的中文名称是什么? 层叠/级联样式表(Cascading Style Sheets) CSS ...
使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）
所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现. 1. 基于传统的position和m ...
PC端设置每行固定三个元素多余换行
如上图所示,在PC端,每行三个元素,多余的换行. HTML <div class="test-wrap"><ul c ...
css的三个特性背景透明设置
关于行内元素(补充一点) 行内元素只能容纳文本或其他行内元素.(a特殊a里面可以放块级元素) 例子: 关于行高tip: 选择器的嵌套层级不应大于3级,位置靠后的限定条件应尽可能的精确. 属性定义必须另 ...
关于Web面试的基础知识点--Html+Css（三）
文章目录 1.CSS中可以继承的属性 2.CSS选择器优先级 4个等级的定义 3.以下哪些CSS表示红色? 4.行内元素和块级元素 5.浮动元素 6.清除浮动并不会造成不稳定情况的方法 7.可以进行跨 ...

《精彩绝伦的CSS》——提示（三）让元素“消失”

《精彩绝伦的CSS》——提示（三）让元素“消失”相关推荐

最新文章

热门文章