CSS隐藏元素的十四种方法

通过设置width:0或者height:0隐藏一个元素，文字隐藏可以设置color为背景色或transparent，但内容还在，所以用font-size:0；
将元素的opacity设置为0，元素本身还在，只是看不见；
通过绝对定位将元素移出屏幕范围，文字可通过text-indent隐藏，元素还在，只是超出了屏幕范围看不见（可以给页面添加LOGO图片，同时添加文字让搜索引擎搜索到）；
通过z-index隐藏，但是默认背景是透明的，需要给元素添加一个背景，元素还在；
超出元素宽高部分，设置overflow:hidden来隐藏超出部分，文字需省略号时加上text-overflow:ellipsis；
通过设置visibility:hidden，元素不可见，但还占位置；
通过设置display:none将元素彻底隐藏，不占位置；
将元素的背景设置为透明，字体大小设置为0，元素不可见，但还占位置；
将元素的max-height或max-width设置为0，但会有文字溢出的问题，需设置font-size为0；
通过transform的translate隐藏元素，相当于定位将元素移出屏幕范围；

div{transform:translate(-99999px);}

将元素的缩放设置为0；

transform:scale(0);

让元素重叠，类似width等于0；

div{transform:skew(90deg):}

设置margin为负值，将元素移出屏幕可视区；

div{margin-left:-99999px}

将元素剪裁。

-webkit-clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);

CSS隐藏元素的十四种方法相关推荐

双飞翼 html 布局,css实现双飞翼布局的四种方法（附代码）
本篇文章给大家带来的内容是关于css实现双飞翼布局的四种方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 圣杯布局.双飞翼布局效果图从效果图来看圣杯布局.双飞翼布局效果 ...
Java求两集合中元素交集的四种方法对比总结
hello,你好呀,我是灰小猿,一个超会写bug的程序猿! 最近在做项目的时候有用到对两个集合中的元素进行对比求其交集的情况,因为涉及到的数据量比较大,所以在进行求两个集合中元素交集的时候,就应该考虑 ...
CSS三栏布局的四种方法
1.绝对定位法 <div class="left">Left</div> <div class="main">Main< ...
CSS绝对定位元素居中的几种方法
CSS居中绝对定位元素的方法,有很多种,下面是我收集的几种 1,div宽度未知1 <body><div style="position: absolute; left: 5 ...
CSS隐藏元素的五种方法
用css隐藏页面元素有许多种方法. 1.opacity:0 2.visibility:hidden 3.diaplay:none 4.position:absolute opacity opacity ...
前端html隐藏元素方式,CSS 隐藏元素的八种方法
前言总括: 本文详细讲述了在网页中用CSS隐藏元素的七种方法. 念念不忘,必有回响;有一口气,点一盏灯. 正文说起隐藏元素我想每一个前端er都能说起几种,但能说全的我想就不是很多了.博主总结了几种 ...
php 从数组里删除元素,PHP从数组中删除元素的四种方法实例
PHP从数组中删除元素的四种方法实例一.总结一句话总结:unset(),array_splice(),array_diff(),array_diff_key() 二.PHP从数组中删除元素的四种方 ...
HTML和CSS隐藏元素的四种方法
第一种:display:none 特点:不占据屏幕空间显示:display:block <!DOCTYPE html> <html lang="en">& ...
css隐藏元素的几种方法与区别
css隐藏元素的几种方法与区别一:display:none;隐藏不占位 display 除了不能加入 CSS3 动画豪华大餐之外,基本效果卓越,没什么让人诟病的地方.二:position:absol ...

CSS隐藏元素的十四种方法

CSS隐藏元素的十四种方法相关推荐

最新文章

热门文章