css隐藏内容的方法有三种:即display:none、visibility:hidden、overflow:hidden。

  1.display:none;的缺陷:

  搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略

  屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字。

  

  2.visibility: hidden ;的缺陷:

  隐藏的内容会占据他所应该占据物理空间。

  3.overflow:hidden;一个比较合理的方法

  .texthidden { display:block; overflow: hidden; width: 0; height: 0; }

  将宽度和高度设定为0,然后超过部分隐藏,就会弥补上述1、2方法中的缺陷,也达到了隐藏内容的目的。

css之隐藏内容的方法的更多相关文章

  1. CSS中隐藏内容的3种方法及属性值

    CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59)   在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...

  2. CSS中隐藏内容的3种方法

    CSS中隐藏内容的3种方法 一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出层.隐藏滚动条.清除错位和浮动等. 1.使用display:none来隐藏所有内容 display:none可 ...

  3. div+css隐藏内容样式方法

    div css隐藏内容样式方法     div+css隐藏内容方法 一般情况下,css隐藏的用途,如下: 1.对文本的隐藏 2.隐藏超链接(另类黑链) 3.对统计代码隐藏 4.隐藏超出图片 5.css ...

  4. CSS实现隐藏滚动条并可以滚动内容

    方法一: 计算滚动条宽度并隐藏起来,其实我只是把滚动条通过定位把它隐藏了起来,下面给一个简化版的代码: <div class="outer-container"> &l ...

  5. CSS技巧: CSS隐藏文字的方法(CSS text-indent: -9999px;)

    建站过过程中朋友喜欢把网站名称用H1表示,但从美观考虑,要用logo图片来代替h1,这时需要隐藏h1内的这段文字,但又不能对搜索引擎不友好,否则就失去了定义h1标签的意义. 在CSS中如何以图代字,找 ...

  6. 【前端】CSS隐藏元素的方法和区别

    CSS隐藏元素的方法和区别 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  7. 隐藏内容但仍保持占位的css写法

    通常显示和隐藏内容都会用display:block;和display:none; 如果想要保持内容的占位可以用visbility:visible; 和visiblity:hidden;来控制内容的显示 ...

  8. 您可能不知道的CSS元素隐藏“失效”以其妙用——张鑫旭

    一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: non ...

  9. HTML5--》点击显示隐藏内容

    <details>浏览器支持比较差,可以用JavaScript实现这种功能. <!doctype html> <html> <head> <met ...

随机推荐

  1. Spring任务调度之Quartz集成

    推荐一个博客:http://blog.csdn.net/column/details/14251.html 基本概念 Job:是一个接口,只有一个方法void execute(JobExecution ...

  2. QT中几个函数的使用方法

    一.把字符串转换成整形demo1:QString str = "FF";bool ok;int hex = str.toInt(&ok, 16); // hex == 25 ...

  3. K:枚举的线程安全性及其序列化问题

      枚举是如何保证线程安全的且其在序列化和反序列化的操作中是单例的?   要想看源码,首先得有一个类吧,那么枚举类型到底是什么类呢?是enum吗?答案很明显不是,enum就和class一样,只是一个关 ...

  4. 物联网细分领域-车联网(OBD)市场分析

    前言: 这段时间在跟一个车联网的项目,所以做了一些研究. OBD概述 OBD是英文On-Board Diagnostic的缩写,中文翻译为"车载诊断系统".这个系统随时监控发动机的 ...

  5. 小谈SQL表的连接

    简述SQL连接 SQL连接呢,主要分为以下几种内连接,左连接,右连接,全连接(当然还有很多官方的说法,这里就讲讲最常用的). 既然都叫连接了,那至少要有两个对象,也就是说,至少要有两个表,要怎么样的表 ...

  6. Head First设计模式之策略模式

    这是学习的第一个设计模式,而书中写的实例相对比较复杂,参考了网上的文章进行总结 一.定义 策略模式(strategy pattern): 定义了算法族, 分别封闭起来, 让它们之间可以互相替换, 此模 ...

  7. Python核心编程笔记--动态属性

    一.动态语言与静态语言 1.1 静态语言特点: a. 在定义变量时需要指定变量的类型,根据指定的类型来确定变量所占的内存空间 b. 需要经过编译才能运行 c. 在代码编译后,运行过程不能对代码进行操作 ...

  8. kotlin的方言(语法糖)

    概述 之前介绍了kotlin的快速入门,http://www.cnblogs.com/lizo/p/7231167.html 大多数还是参照java.kotlin中提供了更多更方便的语言特性 这个方言 ...

  9. JavaScript Html页面加载完成三种写法

    //一.Html页面加载完成的JS写法 //1. $(function () {     alert("窗体Html页面加载完成方法一"); }); //2. $(document ...

  10. [转]在Mac系统中安装配置Tomcat及和Eclipse 配置

    第一步:下载Tomcat 下载地址:http://tomcat.apache.org/download-70.cgi 直接下载如下选中即可: 第二步:   下载完成后 ,把解压的文件夹放到一个目录下 ...