如何用css约束一个层不可见

两种方式:

    方式一:设置属性值为none不可见:display:none

      这个属性改变了一个元素的显示效果。之前我有提到一点,假如元素使用了none值,那么元素直接干净利落的消失不见。你在右键审查元素的时候找到该处会显示为0×0,神马,不信,你试试。之所以会完全没有看见是以为使用了display:none这个标签,使用none值会让元素从文档中直接删除,所以它没有对布局产生任何的影响,就是真的消失不见了,前端根本显示不出来。

    方式二:设置第二个属性值不可见:visibility:hidden

      这个属性也是可以达到隐藏元素的目的,这个属性也是跟display属性正好相反,这个也只是“看不见”而已。用了该属性属性之后,元素在前端页面是解析不出来的,但是元素依然存在在哪里,只不过我们肉眼不可见,所以元素依然会影响到布局。

时间: 2024-10-09 01:10:52

如何用css约束一个层不可见的相关文章

【CSS】如何用css做一个爱心

摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: 明白正方形的画法. 明白圆形的画法. 明白什么是定位. 明白怎么旋转. 话不多说,先教大家怎么用css画一个圆形. .disc1{ width: 100px; height: 100px; border:1px solid red; background-color: red; margin:300

公司的一个面试题:如何用css让一个容器水平垂直居中?

原文:公司的一个面试题:如何用css让一个容器水平垂直居中? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <style type="text/css"> .div1{ width: 100px; height: 100px; bo

如何用css让一个容器水平垂直居中

直接上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <style type="text/css"> .div1{ width: 100px; height: 100px; border: 1px solid #000000;

如何用 CSS 创作一个立体滑动 toggle 交互控件

效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/zjoOgX 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/c/cPvMzTg 源代码下载 本地下载 请从 github 下载. https://github.com/comehope/front-end-dail

CSS创建一个遮罩层

.layer{ width: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; -moz-opacity: 0; filter: alpha(opacity=50); z-index: 99; height: 100%; margin:0 auto; } 创建一个遮罩层. CSS创建一个遮罩层

如何用css画出三角形

看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. 这个时候如果将盒模型内部的height,width调为0px,则三角形就形成了. 1 border:100px solid transparent //边框100px,实线,透明颜色,下面三行

网页中如何用 CSS 设置打印分页符

Word 中按 Ctrl + Enter 创建一个分页符,方便打印,其实网页中也可以,用 CSS 的 page-break-after:always;. <p>第 1 页</p><div style="page-break-after:always;"></div><p>第 2 页</p><div style="page-break-after:always;"></div&g

如何利用CSS写一个六边形?

众所周知,一般情况下div所表现出来的形态是一个矩形,如果给它添加border-radius属性,可以让它成为一个圆角矩形或者是圆形,但是如果希望div表现出更多的形态来呢? 那么我们就来讲讲如何用CSS来写一个六边形. 大家首先来看一下,一个六边形,拆解开来的话,就是一个矩形加左右两个三角形. 三角形的话很好写,用边框border属性就可以实现. 当我们给一个div非常粗的边框,但是宽度和高度分别都设置为0的时候,我就会得到如下的图形. 那么我们只要把其中一条边框给删除,另外两条边框变成透明,

css hover遮罩层

马上月底了, 这个月忙于工作和生活, 没有很好的写一篇博客, 有点忧伤. 为了弥补, 就写点简单的. 最近项目有个需求, 就是鼠标移入的时候显示一个层, 移除的时候这个层消失. 当然层是可以点击进行额外操作的. 项目用的是react,最开始使用的是mounseenter和mounseleave事件, 结果吧出现了点击进入另外一个路由后,再次点击回来后, 鼠标在元素上, 确没有再出现浮层. 这就有尴尬了. 当时还想用的是事件, 但想想现在css3鼠标事件, 动画, 伪类选择器这么成熟了. 额外去搜