css控制元素隐藏和显示

Hello~~各位小伙伴,今天我们广州蓝景实训部,继续和大家分享前端技术干货,CSS隐藏元素

总结出7种隐藏元素的办法

1.CSS display的值是none。(该元素是不会在页面上显示的)

div{
    display: none;
}

2. type="hidden"的表单元素。(该元素是不会在页面上显示的)

3. 宽度和高度都显式设置为0。(该元素会在页面上显示)

div{
    width: 0;
    height: 0;
}

4. 一个祖先元素是隐藏的,(该祖先以及祖先以下的元素是不会在页面上显示)

5. CSS visibility的值是hidden(该元素是会在页面上显示,还占原来的位置)

div{
    visibility: hidden;
}

6. CSS opacity的指数是0(该元素是会在页面上显示,还占原来的位置)

div{
    opacity: 0;
}

7. 将position设为absolute然后将位置设到不可见区域

div{
   position: absolute;
   top: -9999px;
   left: -9999px;
}

想要了解更多web前端开发技术资料,可在评论区留言!也可添加我们微信:philip_tan

(0)

相关推荐

  • css控制比较div显示/隐藏方法的2种方法

    CSS中的display和visibility css中display和visibility语法,他们都可以隐藏和显示html元素.看齐来他们很相似,所以很多人还是会搞错.谈们的属性分别如下: 操作方 ...

  • 如何在CATIA装配体中隐藏和显示所有参考元素

    在建立装配体模型时,每一个零部件的参考元素如点.线.面没有及时被隐藏,导致装配体参考元素混乱,分不清从属关系,也影响视图的美观,所以我们有必要对参考元素进行统一的隐藏,那么如何在CATIA装配体中隐藏 ...

  • javascript(js)怎么设置元素的隐藏与显示?

    javascript在我们编写前端页面时是必不可少的,那么我们怎么来使用它呢? 操作方法 01 首先我们来创建一个p元素,在里面写上hello: 02 在浏览器界面上的显示如下: 03 接下来就用js ...

  • 如何通过jquery隐藏和显示元素

    操作方法 01 在web前端开发过程中,经常会用到隐藏和显示元素的方法,其实jquery已经为我们封装好了方法. 1.隐藏元素 使用hide()方法,如下图: 2.显示隐藏的元素,使用show()方法 ...

  • Excel如何隐藏和显示图表网格线

    在Excel中如何隐藏和显示图表网格线,是如何具体操作的呢?今天小编告诉你操作方法! 操作方法 01 方法一:打开Excel,鼠标左键单击选中"图表",此时图表右侧弹出三个弹窗,选 ...

  • CSS控制文本自动换行

    做网页的时候,我们很经常碰到文本的显示,通常来说,文本太长就会很难看.在这里,我们可以用CSS控制文本自动换行.下面是几种强制文本华航的方法. 操作方法 01 方法一:你定死表格的宽度,即给表格一个宽 ...

  • 如何在Word2007文档中隐藏或显示书签

    如果Word2007文档中含有书签,用户可以通过Word选项设置以确定隐藏或显示书签,操作步骤如下所述: 第1步,打开Word2007文档窗口,依次单击“Office按钮”→“Word选项”按钮,如图 ...

  • 如何在Word2010文档中隐藏或显示图形和文本框

    在Word2010文档中,用户可以通过取消或启用“显示图形和文本框”功能,以隐藏或显示Word文档中的图形和文本框,操作步骤如下所述: 第1步,打开Word2010文档窗口,依次单击“文件”→“选项” ...

  • 如何在Word2010文档中隐藏或显示书签

    如果Word2010文档中含有书签,用户可以通过Word选项设置以确定隐藏或显示书签,操作步骤如下所述: 第1步,打开Word2010文档窗口,依次单击“文件”→“选项”按钮,如图2012011509 ...

  • 搜狗输入法的今日新词弹窗怎么关闭永远隐藏不显示

    搜狗今日新词是搜狗输入法的资讯小弹窗,会不定时的在桌面的右小角弹出来,如果你比较介意这个今日新词的小窗口,觉得它打扰到你的创造神马的,你大可以让它永远隐藏不显示,跟下载吧来看看怎么关闭今日新词弹窗吧。 ...