div css隐藏内容样式方法

 
 

div+css隐藏内容方法

一般情况下,css隐藏的用途,如下:

  • 1、对文本的隐藏
  • 2、隐藏超链接(另类黑链)
  • 3、对统计代码隐藏
  • 4、隐藏超出图片
  • 5、css隐藏滚动条
  • 6、css隐藏div层

一、使用css隐藏方法用到CSS样式单词及对应解释   -   TOP

1、使用display:none;来隐藏所有信息(无空白位占据)推荐,CSS display手册查看
2、使用overflow:hidden;来隐藏溢出的文字或图片 适用推荐,css overflow手册查看
3、使用overflow-y:hidden;和overflow-x:hidden控制滚动条的隐藏与否,css overflow-y手册查看,css手册查看overflow-x

二、常见div css隐藏案例   -   TOP

1、css隐藏DIV及内容,完全隐藏内容与布局

解释:使用CSS单词display:none;完全隐藏文本及图片

  1. <div style="display:none;">你是看不见我的</div>

使用div 中css样式display:none;将使得div内的内容隐藏通过浏览器什么也看不见,并且隐藏的内容也不会占用空间,通常用于JS特效隐藏、隐藏统计代码显示图标。

扩展阅读:
1)、通过对象盒子设置缩进样式(text-indent:-9999px)方法可以隐藏超链接文本内容
2)、隐藏图片上方文字

进入了解更详细:css隐藏div html内容

2、overflow: hidden 隐藏溢出DIV内容或图片
实例代码如:

  1. 我是可以看见的<br/><br/>
  2. <div style="overflow: hidden; width:30px; height:20px;">你是看不见我的。</div>
  3. <br/>
  4. 同样我也是可以看见的

案例截图:


隐藏溢出内容截图

使用css样式通过对“你是看不见我的”div css层设置固定的高和宽,然后通过overflow: hidden样式即可使得超出(溢出)固定的高宽内容隐藏同时也不占用被隐藏地方位置。

进入了解更详细css隐藏溢出DIV的内容

3、css隐藏滚动条

使用overflow-y:hidden;和overflow-x:hidden来隐藏或显示对应横或竖方向的滚动条。此案例可以进入css手册overflow-y和css在线手册的overflow-x有详细的讲解对滚动条的设置隐藏或显示方法。

div+css隐藏内容样式方法的更多相关文章

  1. css之隐藏内容的方法

    css隐藏内容的方法有三种:即display:none.visibility:hidden.overflow:hidden. 1.display:none;的缺陷: 搜索引擎可能认为被隐藏的文字属于垃 ...

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

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

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

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

  4. Photoshop图象切片保存为网页HTML(DIV+CSS布局)的方法

    首先,制作图象切片(以一张图片为例子) 一.选择“切片”工具,在图像上拖动以分割图像(例如:一张图像切割2次就形成3个切片)切片后如下图 二.设置切片选项(如大小.目标链接.图片说明等等):选择“切片 ...

  5. LODOP打印超过后隐藏内容样式

    Lodop中的有纯文本和超文本,纯文本本身超过设置的打印项宽度,如果高度足够,就会换行,如果高度设置的很小,不会换行,后面的内容会直接隐藏.除非设置了多页项等,会自动分页.超文本打印项需要用css样式 ...

  6. 屏幕居中(DIV/CSS) 的几种方法(转)

    1.利用table特性,在width and height all set 100%的时候,可以把容器嵌套在td内形成绝对居中,此时的被嵌套容器可为绝对或者相对大小.(非标准)注意不能加声明! 如是在 ...

  7. 浏览器css隐藏滚动条的方法!除了IE一般都支持

    ::-webkit-scrollbar { /* 滚动条整体部分 */ width:0px; margin-right:2px}::-webkit-scrollbar-track-piece { /* ...

  8. VUE scoped css 局部css内嵌样式方法 >>>

    <style scoped> .ivu-carousel >>> button { background-color: buttonface;} .demo-carous ...

  9. 3种方法实现CSS隐藏滚动条并可以滚动内容

    隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其 实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1 ...

随机推荐

  1. Spark Standalone模式HA环境搭建

    Spark Standalone模式常见的HA部署方式有两种:基于文件系统的HA和基于ZK的HA 本篇只介绍基于ZK的HA环境搭建: $SPARK_HOME/conf/spark-env.sh 添加S ...

  2. 库、教程、论文实现,这是一份超全的PyTorch资源列表(Github 2.2K星)

    项目地址:https://github.com/bharathgs/Awesome-pytorch-list 列表结构: NLP 与语音处理 计算机视觉 概率/生成库 其他库 教程与示例 论文实现 P ...

  3. linux下创建django-app

    Django 1.创建一个项目linux :django-admin startproject helloword 创建项目helloword2.开始一个工程 manage.py 文件 它是djang ...

  4. centos7.3给squid搭建代理服务器添加认证apache

    证使用浏览器打开 然后输入用户名和密码的方式 所以使用基于web服务的apache的 htpasswd 1 创建用户 设置密码 htpasswd -cd /etc/squid/passwords te ...

  5. Jenkins + testNg + maven 项目持续集成

    搞了一整天,梳理下关键点: 1.项目的pom.xml要配置插件,同时指定testng.xml文件的位置.就被这个卡了好久 <properties> <maven-surefire-p ...

  6. 敏捷:什么是用户故事(User Story)

    摘要: 一件用户通过系统完成他一个有价值的目标(买一罐饮料)的事.这样的过程就叫"用户案例(user case)"或者"用户故事(user story)".本文 ...

  7. 让apache支持htaccess文件

    第一:检测 apache是否开启mod_rewrite 通过php提供的phpinfo()函数查看环境配置,在"apache2handler -> Loaded Modules&quo ...

  8. ESCP打印机数据解密

    通过串口调试工具 抓取到的16进制文本; 如下 然后打开我们的文档,查看命令数据内容. 详情请密我QQ:1161588342  说明加好友原因

  9. 前端-CSS-2-选择器

    基本选择器 首先来说一下,什么是选择器.在一个HTML页面中会有很多很多的元素,不同的元素可能会有不同的样式, 某些元素又需要设置相同的样式,选择器就是用来从HTML页面中查找特定元素的,找到元素之后 ...

  10. vue基础——事件处理

    监听事件 可以用 v-on 指令监听dom事件,并在触发时运行一些JavaScript代码. 示例: <div id="example-1"> HTML <but ...