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. cut 命令详解

    cut  作用:按列提取文件 参数: -d 指明列分隔符 -f 选择输出的区域 -c 指定字符位置 -b :以字节为单位进行分割.这些字节位置将忽略多字节字符边界,除非也指定了 -n 标志. -c : ...

  2. lesson - 3 ls /cd /path /alias /快捷键

    内容概要: 1. 命令ls -l   详细信息-a  查看隐藏的文件或目录-d   只看目录本身,不列出目录下面的文件和目录-t 以时间先后排序 2  目录结构/bin, /sbin, /usr/bi ...

  3. Oracle学习笔记_07_模糊查询

    附录:参考资料 1.Oracle sql语言模糊查询--like后面的通配符 2.oracle sql语言模糊查询--通配符like的使用教程

  4. Python函数篇(7)-正则表达式

    1.正则表达式   正则表达式为高级的文本模式匹配,抽取,与/或文本形式的搜索和替换功能提供了基础,简单的来说,正则表达式是由一些字符和特殊符号组成的字符串.Python通过标准库中的re模块来支持正 ...

  5. touch监听判断手指的上滑,下滑,左滑,右滑,事件监听

    判断滑动的方向和距离,来实现一定的效果,比如返回上一页等等 <body> <script> $(function(){ //给body强制定义高度 var windowHeig ...

  6. Python第二十天 shutil 模块 zipfile tarfile 模块

    Python第二十天  shutil 模块  zipfile   tarfile 模块 os文件的操作还应该包含移动 复制  打包 压缩 解压等操作,这些os模块都没有提供 shutil 模块shut ...

  7. 房上的猫:for循环,跳转语句与循环结构,跳转语句进阶

    一.for循环 1.定义:  for循环语句的主要作用是反复执行一段代码,直到满足一定条件为止 2.组成部分:  (1)初始部分:设置循环的初始状态  (2)循环体:重复执行的代码  (3)迭代部分: ...

  8. angular4.0使用sass

    一.为什么选择sass为了更好的管理代码,我们需要可以定义变量,同时可以使用函数的样式工具,比如定义公用color.bg.显然css无法满足需求.现在市面上常用的是sass.less.经过比较,我选择 ...

  9. go语言 前言

    1什么是Go? Go是一门开源.并发支持.具有垃圾回收机制.编译性系统编程语言.在静态编译语言的高性能和动态语言的高效开发之间拥有良好平衡点.被称为21世纪的C语言.Go语言已经成为云计算.云存储时代 ...

  10. python3之模块collections

    1.计数器(counter) counter是对字典的方法,用来追踪值的出现次数:具备字典的所有功能和自己的功能. >>> from collections import Count ...