CSS中隐藏内容的3种方法及属性值
来源:互联网 发布:网络戴口罩女主播照片 编辑:程序博客网 时间:2024/06/06 02:57
在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片、隐藏链接、隐藏超出范围的内容、隐藏弹出层、隐藏滚动条、清除错位和浮动等等。 使用CSS即可使以上提到的内容隐藏起来,几种隐藏内容的方法:
1、使用display:none来隐藏所有内容
display:none可以让网页中所有内容不显示,如代码、文字、链接、图片、div层,是推荐的内容隐藏方式。
<div style="display:none;">我不占地儿,你看不见我;</div>值 描述 none此元素不会被显示。block此元素将显示为块级元素,此元素前后会带有换行符。inline默认。此元素会被显示为内联元素,元素前后没有换行符。run-in此元素会根据上下文作为块级元素或内联元素显示。inherit规定应该从父元素继承 display 属性的值。
2、使用visibility:hidden来隐藏内容
visibility:hidden和display:none可以隐藏的内容几乎一样,但唯一区别是它虽然隐藏了内容,但被隐藏掉的内容仍旧占据空间,这段隐藏了内容却保留空间的位置会在网页中显示为空白。
<div style="visibility:hidden;">我占了地儿,你也看不见我;</div>值 描述 visible默认值。元素是可见的。hidden元素是不可见的。collapse当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。inherit规定应该从父元素继承 visibility 属性的值。
3、使用overflow:hidden隐藏溢出内容
overflow:hidden这种方式可以隐藏掉固定区域外的内容,它可以有效控制显示区域。但应注意,使用它时需要给它定义宽度和高度,否则会无效。
<div style="width:120px; height:20px; overflow:hidden;">我占的地儿太多了你就看不见我的尾巴了。。。。。</div>
overflow用法中存在一个分支,overflow-x:hidden和overflow-y:hidden,x是横向范围,y是纵向范围,这两个属性经常用在需要隐藏滚动条时。
0 0
- CSS中隐藏内容的3种方法及属性值
- CSS中隐藏内容的3种方法
- CSS中隐藏内容的方法汇总
- CSS隐藏div及html内容方法
- 使用CSS即可使以上提到的内容隐藏起来,几种隐藏内容的方法:
- CSS 隐藏内容的三种方法与比较
- div+css隐藏内容方法
- CSS中内容的剪切属性clip
- css中隐藏元素的几种方法
- DIV CSS隐藏内容样式方法大全
- css 中Position属性及值的作用和用法
- CSS隐藏元素的五种方法
- css隐藏的三种方法
- CSS 隐藏元素的八种方法
- CSS隐藏元素的几种方法
- CSS中元素内容的浮动属性float
- 使用CSS属性对文本溢出内容隐藏
- 隐藏css中超出TD宽度的字段的方法
- php向mysql数据库插入百万级数据的两种方法效率比较
- 【IMWeb训练营作业】vuejs【组件-下拉列表】实现
- excel文件下载(Servlet版+excel插入图片)
- Fiddler 工作原理
- 字符串之间以及与int float double转换
- CSS中隐藏内容的3种方法及属性值
- js字符串补0
- 使用TFS实现ABP项目的持续集成(我靠,截了这么多图片都消失了,CSDN牛掰啊)
- HDU 3068 最长回文
- 题目1201:二叉排序树
- 自己整理的eclipse的快捷键
- strsep的作用
- web worker
- Learning with ensembles