css盒子显示隐藏问题

最新推荐文章于 2023-02-03 18:41:05 发布
最新推荐文章于 2023-02-03 18:41:05 发布
阅读量5.1k 收藏 7
点赞数
分类专栏： css 盒子问题 属性 文章标签： web前端 css 盒子问题 属性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38242293/article/details/80004094
版权
属性 同时被 3 个专栏收录
12 篇文章 0 订阅
订阅专栏
css
6 篇文章 0 订阅
订阅专栏
盒子问题
4 篇文章 0 订阅
订阅专栏

盒子的显示隐藏常用的属性display和visibility

  • display和visibility的相同点
    1.两者都是控制盒子的显示和隐藏，都是在css的属性定义

  • display和visibility的区别
    1.在value值上面，控制盒子显示的，display的是block，visibility的是visible，控制盒子隐藏，display的是none,visibility的是hidden
    2.在显示效果上，display控制盒子隐藏时，盒子不占位置，下方的盒子自动往上移动，显示的时候整体下方会往下方移动
    3.显示效果上，visibility控制盒子隐藏时，盒子还是占位置，只不过内容隐藏了，其余地方都是不动位置的

  • 最后讲一下二者的使用
    1.最常用的是display，它更符合我们对于显示隐藏的理解，在显示上也更符合我们的审美，当着一块空白的时候会显得很突兀，在自定义的轮播啊，大块数据的交叉使用，循环播放图片等的时候，原生的css和js就可以实现的时候，大多采用了display属性
    2.但是在一些特定的场合下，visibility可能更符合设计的审美，例如一个位置排版好了的行内块内元素，所占位置不大，整体前移影响美观的时候，或者一些小网站的登录页面错误提醒的时候，会使用visibility属性

热心市民小胖纸
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
css使两个盒子并列_CSS 布局经典问题初步整理
weixin_39943370的博客
11-20 5161
本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Flexbox 布局，等等。CSS 基础知识下面几个入门教程不错：幕课网 – HTML+CSS基础课程：偏基础，可以在线练习和预览MDN – CSS入门教程: MDN 的官方文档学习 CSS 布局：排版和配色特别舒服，简短但不深入，适合概览入门CS...
CSS盒子隐藏/显示后再最上层的实现代码
11-20
.imgbox{ width: 1200px; height: 612px; margin-right: auto; margin-left: auto; margin-top: 60px; } .m1{ border: solid; border-width: 1px; height: 300px;... text-decoration:line-thro
html中如何隐藏一个盒子，然后用hover让其显示
热门推荐
lanseguhui的博客
06-06 1万+
1.第一种：opacity: 0;表示透明度为0；此时盒子看不见 当设置opacity: 1;表示盒子完全显示出来2.第二种：display:none;表示盒子被隐藏不存在，display:block;表示盒子存在，被显示出来个人认为第二种好用，合适各种情景，配合hover使用。...
js操作盒子隐藏或显示
qq_55608614的博客
08-20 1652
<div id="form"><p style="color:red;">盒子</p></div> <input type="button" name="name" value="隐藏" onclick="FormHide()" /> <input type="button" name="name" value="显示" onclick="FormShow()" /> <script> //隐藏盒子 func
JS案例之图片切换、显示隐藏盒子、相册轮播
zuo_zuo_blog的博客
04-06 583
1.图片切换 < a href="#" style=“margin: 10px;display: block” “fn()”>切换 < img src=“jd1.jpg” width=“400” alt="" id=“image”> var a=document.getElementsByTagName("a")[0]; var img=document.getElemen...
当一个盒子显示隐藏会影响下面盒子的操作
王的博客
02-03 322
css盒子穿透
（CSS学习记录）：浮动(float)
baidu_41388533的博客
09-27 361
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26 浮动(float) CSS 布局的三种机制 网页布局的核心——就是用 CSS 来摆放盒子。 CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中： 普通流（标准流） 块级元素会独占一行，从上向下顺序排列； 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、t..
为什么css设置的样式没有显示出来?
DIUDIUjiang的博客
02-25 1万+
我们在写CSS样式的时候有可能出现这样的问题就是说写完样式后样式却没有发生改变，如果代码没有问题那么究竟是什么原因导致了此类问题呢？ 排查css样式不起作用的方法步骤： 首先，先试一下清除缓存，重启浏览器等手段，无效后再进行进一步排查。 接着按以下流程排查： 以下是排查以及修改方法： 再次提醒在排查前先试一下清除缓存，重启浏览器等手段，无效后再进行进一步排查。有可能自己什么都没有做错，就是因为缓存或者浏览器的问题导致，重置一下也许问题就解决了。 css样式不起作用的常见原因： 1、未关联外
第六周 嵌套的盒子的小bug
qq_36807080的博客
04-29 231
不做处理的嵌套盒子给中间盒子设置外边距想要实现居中显示时会出现这种情况 想要达到中间盒子居中显示的效果 解决方式（解决浏览器显示的小bug）      1、为父盒子添加 overflow：hidden          2、为父盒子添加padding     (这种方式会改变父盒子的大小，往外扩张2倍内边距)      3、为父盒子添加border     (这种
CSS文本超出2行就隐藏并且显示省略号
01-19
css3解决了这个问题，解决方法如下： display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） -webkit-line-clamp:2; /...
CSS基础-实验楼.md
03-31
- visible: 当内容过多，溢流的内容被显示在盒子的外边。 #### CSS 框类型 display 属性有很多的属性值。这里着重讲三个常见的 :block, inline, 和 inline-block。 - 块级元素的特点：
CSS 面试思维导图合集（包含案例）
09-04
盒子模型（W3C模型、怪异模型），选择器，em/px/rem/vh/vw, 回流与重绘，BFC,flex 弹性布局，Grid 网格布局，响应式设计，隐藏页面元素，布局水平居中，文本水平居中，单行多行文本显示，画三角形，Css 性能优化
css重绘与重排的方法
12-13
渲染树的每个节点都有大小和边距等属性，类似于 盒子模型 （由于隐藏元素不需要显示，渲染树中并不包含DOM树中隐藏的元素）。当渲染树构建完成后，浏览器就可以将元素放置到正确的位置了，再根据渲染树节点的样式...
echarts横向左右对比柱状图
热心市民小胖纸的博客
02-25 2825
需求 业务需求横向对比柱状图，左边从左到右，右边从右到左。 效果图 代码 var myChart = echarts.init(document.getElementById('chart-panel')); let option = { tooltip: { show: true, trigger: 'axis', axisPointer: { type: 'shadow' } }, le
vue中全选按钮的操作
热心市民小胖纸的博客
08-06 2642
我们要实现的目的就是一个简单的全选按钮，但是当下方得有一个元素取消选中状态时，全选状态取消，下方的数据都选中时，全选自动选中，再加上一个功能为当下面没有数据，全选按钮不能选择。 解决的思路肯定还是监听数据变化，外加上一条控制可点击不能点击的变量； 直接上代码： div class="table_list"&gt; &lt;table class="" id="table_list" v...
echart折线区域图
热心市民小胖纸的博客
04-20 2312
在引入echart区域折线图时，没有出现对应的区域图 当发现引入下面代码到自己的代码中并没有对应的区域图 option = { xAxis: { type: 'category', boundaryGap: false, data: mydata.xname(改成自己的数据) }, yAxis: { ...
easyui的combobox实现模糊搜索匹配之我认为最简单的方法
热心市民小胖纸的博客
03-01 1746
半路接收的项目用的easyui，在修改问题中需要实现一个combobox的模糊搜索，其实很多东西都在文档 实现思路 首先是通过获取所有的数据到本地，然后在本地进行搜索。直接上代码 $('#addLoanPeople .userName').combobox({ prompt:'人员姓名', required:true,//必填 edita...
阻止鼠标的默认事件
热心市民小胖纸的博客
04-25 1728
鼠标的默认事件 1.鼠标的左键的默认事件，是按下以后拖拽图片或选中 2.鼠标的右键的默认事件，是弹出浏览器的属性菜单 如何阻止鼠标的默认事件 1.阻止鼠标的左键的默认事件，（这里就是基本大多说说到的鼠标的默认事件）：ev.preventDefault();加上这个方法就可以了，这个方法只能阻止左键移动的拖拽事件，并不能阻止右键事件 2.阻止鼠标的右键的默认事件： $(document)...
css盒子显示隐藏动画
最新发布
05-18
可以使用CSS3的transition和transform属性来实现盒子的显示隐藏动画。 首先，设置盒子的初始状态为隐藏，可以通过设置display:none或者opacity:0来实现。然后，当需要显示盒子时，设置display:block或者opacity:1，并且加上transition和transform属性，使其产生平滑的过渡效果。 以下是一个例子： HTML代码： ``` <div class="box">这是一个盒子</div> <button id="btn">显示/隐藏盒子</button> ``` CSS代码： ``` .box { width: 200px; height: 200px; background-color: #ccc; display: none; /* 初始状态为隐藏 */ transition: transform 0.5s ease-out; /* 设置过渡效果 */ } .show { display: block; /* 显示盒子 */ transform: scale(1); /* 平滑过渡到正常大小 */ } .hide { opacity: 0; /* 透明度为0 */ transform: scale(0); /* 平滑过渡到0大小 */ } ``` JavaScript代码： ``` var btn = document.getElementById("btn"); var box = document.querySelector(".box"); btn.onclick = function() { if(box.classList.contains("show")) { box.classList.remove("show"); box.classList.add("hide"); } else { box.classList.remove("hide"); box.classList.add("show"); } } ``` 通过上述代码，点击按钮时，盒子会产生平滑的显示/隐藏动画。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值