css如何去掉html元素

css如何去掉html元素

css无法将html元素完全的从页面中去除,但是可以通过一些方法让它们在视觉上隐藏掉。具体的做法是设置元素css属性display:none和visibility:hidden等属性。

一、visibility: hidden

visibility: hidden是许多人在隐藏某个HTML元素时的首选。这个属性只是简单的隐藏某个元素,但是元素占用的空间任然存在。

div{
    visibility: hidden;
}

与之相对的属性:visibility: visible 可以使隐藏的元素变为可见。(推荐学习:CSS视频教程

二、opacity: 0

div{
    opcity: 0;
}

这是一个CSS3属性,设置opacity: 0可以使一个元素变得完全透明,从而制作出和visibility: hidden一样的效果。opacity和visibility相比,其优势在于它可以被transition和animate。

通常可以使用opacity属性来制作元素的淡入淡出效果。

与之相对的属性:opacity:1可以使透明元素变得可见。

三、position: absolute

div {
    position: absolute; left: -1000px;
}

最古老和最标准的做法是设置元素的绝对定位来隐藏元素。这种技术使元素脱离文档流,处于普通文档之上,并给它设置一个很大的left负值定位,使元素定位在可见区域之外。float和margin都不能影响到position: absolute的元素,因此它们可以很好的被隐藏起来。

在制作一些元素的直线动画时,使用这种技术是最好的方法。

要使元素再次变得可见,可以增大left的值,使元素出现在屏幕上。

四、display: none

div{
    display: none; 
}

display: none也是一个非常老的技术,它是position: absolute和visibility: hidden; 的折中方法,元素会变得不可见,并且不会再占用文档的空间。

display: none在制作手风琴效果时十分有用。

与之相对的属性:display: block或其它值可以使元素再次可见。

除了上面描述的4种方法之外,还有其它方法可以隐藏元素,特别是使用CSS3的时候。例如:你可以使用scale属性来减少元素的尺寸直到它消失。但是scale属性和opacity: 0和visibility: hidden一样,不可见的元素会占用文档的空间。

Image placeholder
前端答疑
未设置
  28人点赞

没有讨论,发表一下自己的看法吧

推荐文章
jquery如何获取html元素的内容?

jquery如何获取html元素的内容?一、text():设置或返回所选元素的文本内容文本信息 $('#p').text();//文本信息 $('#p').text('新的文本');二、html()

HTML中行内元素与块级元素区别有什么?

HTML中行内元素与块级元素区别有什么?区别有:●行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的。●块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列。●行内元素不可

innerHTML与jquery里的html()区别?

innerHTML与jquery里的html()区别?●html()可以设置tbody、tr这些只读标签,而innerHTML在低版本IE下不行;jQuery的html()做了些容错处理,原生的Dom

使用html-webpack-plugin对HTML文件进行预处理

一、前言先整理一波之前和webpack相关的文章: 使用Webpack对CSS文件进行后处理 基于Webpack的CSSSprites实现方案 Stylus系列——webpack-spritesmit

css如何让元素不随滚动条滚动?

在CSS中,可以使用固定定位(position:fixed;)来固定元素的位置,让元素不随滚动条滚动。fixed生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对

css如何设置元素不显示仅占位置?

css如何设置元素不显示仅占位置?隐藏页面元素可以使用visibility:hidden属性,它将元素设置为不可见,并且占据原来的位置,不能响应点击事件。不可见 .hide{ visibility:

HTML 什么是内联元素?

内联元素(inlineelement)也叫内嵌元素或行内元素,一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,通常被包括在块元素中使用,常见内联元素有“a、b、

HTML内联元素有哪些?

内联元素(inlineelement)也叫内嵌元素或行内元素,一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,通常被包括在块元素中使用,常见内联元素有“a、b、

HTML基础元素笔记

address标签语义化标签表示地址pre标签可以保留空格与换行,主要用于文章

HTML基础元素笔记

锚点:快速定位到目标位置。 方法1:href="#myself"id="myself" 方法2:href="#myself"

HTML基础元素笔记

:align对齐width宽度size高度color颜色 :地址信息 :保留空格和换行

html如何导入css

html如何导入css1、使用链接式(推荐学习:HTML视频教程)2、使用导入式 @import"style.css" 扩展资料:二者的区别导入式和链接式的目的都是将一个独立的css文件引入一个文件中

js如何修改css属性?

js如何修改css属性?1、修改style样式:通过document.styleSheets[n]//n表示期望修改的样式表序号,从0开始计数来获取到期望修改的样式表,通过cssRules[0]获取到

css如何清除a标签的block属性

css如何清除a标签的block属性a标签默认是inline行内元素,不支持设置宽高等属性。为了让a标签支持宽高属性,我们可以设置a{display:block}将它变成块级元素同样的,清除a标签的b

css如何设置字体位置

css如何设置字体位置1、text-align设置字体的位置text-align语法:text-align:left|right|center|justifytext-align参数值与说明:left

css如何让字体不加粗?

在CSS中可以使用font-weight:normal样式来让字体不加粗。font-weight属性设置文本的粗细,设置值为normal来定义标准的字符。font-weight属性用于设置显示元素的文

css如何设置图片不变形

css如何设置图片不变形解决方法有两种:一、让图片和布局宽度高度成等比例,这样CSS设置死宽度和高度,图片也是等比例缩小,图片也不会变形。//原尺寸300*200 //等比缩放2:1 img{ wid

css如何设置表格边框不重叠?

css如何设置表格边框不重叠?一、设置css属性border-collapse:collapse。table{ border-collapse:collapse; } tabletr{ border:

js如何引入css文件?

js如何引入css文件?1、使用document.write方式输出引入css的link标签在调用文件的顶部加入下例代码 document.write(''); (注:有时你引用的文件还可能需要引用其

css如何将一行平均分成几列?

css如何将一行平均分成几列?column-count属性规定元素应该被划分的列数。它的取值可以是number|autonumber:元素内容将被划分的最佳列数。auto:由其他属性决定列数,比如"c

css如何实现文字颜色渐变?3种实现方法

基础样式:.gradient-text{ text-align:left; text-indent:30px; line-height:50px; font-size:40px; font-

css如何设置文字描边效果?

想要使用CSS给文字添加描边效果,主要有两种方法:使用text-stroke属性或text-shadow属性。方法1:使用text-shadow属性text-shadow属性用于向文本添加字体边框或阴

css如何把div修饰成圆?

css如何把div修饰成圆?1、打开代码编辑器,新建一个html文件,写上基本的结构 Document 2、在body标签内输入:,这里的div就是用于画圆形的标签。(推荐学习:CSS视

CSS如何让背景图片不重复?

CSS如何让背景图片不重复?css中设置完背景图后,不指定平铺属性,默认是横向纵向重复的,导致图片出现重复。让图片不重复可以设置background-repeat属性。css中background-r

怎么在html中加入css样式

html添加css样式有三种方法,分别为行内式(使用style属性,在特定的HTML标签内使用)、内嵌式(style标签把css代码放在特定页面的head部分中)、外联式(使用link标签,将外部cs