两种方式:

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

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

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

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

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

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

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

  2. 如何用css实现一个三角形?

    昨天被人问到说如何用css实现一个三角形?em....  当时被问到了,汗颜,今天找了一些帖子看了一下,也算是记录一下吧 代码如下: 实现效果:

  3. 如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

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

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

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

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/zjoOgX 可交互视频教程 此视 ...

  6. 如何用css画一个文件上传图案?

    如下图,如果是你,你会怎么实现: 通常我们会通过字体图标来显示中间的加号,外层用一个div包裹即可:或者使用伪元素来模拟中间的一横一竖,这都比较麻烦. 其实我们可以直接使用div+css就可以实现. ...

  7. 如何用css写一个带斜切角、有边框又有内外阴影的按钮呢?

    如果有一天,UI设计师丢过来一张UI稿,上面有这样一个带有斜切角.有边框还有内外阴影的按钮,你会怎么实现呢?第一反应切图?可是按钮内容.大小都是可变的,那得切多少图啊~Canvas?SVG?No,no ...

  8. 如何用css画一个彩虹---v客学院技术分享

    无意间看到了CSS radial-gradient() 函数实现了如下图的样式 仔细一看还真有点像灯光下的鸡蛋,O(∩_∩)O哈哈~ 今天我就来用radial-gradient()函数教大家画一个简单 ...

  9. 如何用css做一个细虚线边框表格

    <style type="text/css"> <!-- .dashed_tbl { border-top: 1px dashed #333333; border ...

随机推荐

  1. luogu P3899 [湖南集训]谈笑风生 线段树合并

    Code: #include<bits/stdc++.h> #define maxn 300002 #define ll long long using namespace std; vo ...

  2. RESTful API设计的简单例子

    代码承接简单服务器,修改 app.js const koa = require('koa'), app = new koa(), Router = require('koa-router'), rou ...

  3. iview“官方“实现的右键菜单

    博客开篇,没想到第一篇博文竟然是前端的,虽略显尴尬,但正能量溢出,你我可能遇到同样问题,在这里分享下个人方案,希望对你有用. 官方目前不提供右键菜单,这里借助Dropdown(下拉菜单)来实现,故为“ ...

  4. vticker.js--垂直滚动插件

    一.使用要求 列表必须是ul>li的格式 html代码 <div class=" myvticker'"> <ul> <li>1.新闻标题 ...

  5. Flask项目中整合各组件

    一.介绍 主要介绍flask_sqlalchemy.flask_script.flask_migrate这三个组件该如何整合到flask项目中,以及如何使用. # 安装组件 pip3 install ...

  6. stm32实现iap远程固件更新

    前提 想来做iap升级了,应该不是什么新手. 下面的程序需要用到一些简单的功能 串口收发数据开关总中断虽然本文标题是实现远程固件更新,但是具体远程方案本文不做详细说明,重点在于介绍mcu接收到新的固件 ...

  7. hdu 1166敌兵布阵(线段树入门题)

    >>点击进入原题测试<< 思路:这两天在学线段树,这个题直接手敲一下线段树就行了,都没有用上懒人标记.入门题 cin,cout会超时,记得加std::ios::sync_wit ...

  8. Trees on the level (二叉链表树)

    紫书:P150 uva122 Background Trees are fundamental in many branches of computer science. Current state- ...

  9. Go语言语法说明

    Go语言语法说明 go语言中的go func(){}() 表示以并发的方式调用匿名函数func 深入讲解Go语言中函数new与make的使用和区别 前言 本文主要给大家介绍了Go语言中函数new与ma ...

  10. HDU——4738 Caocao's Bridges

    Caocao's Bridges Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...