CSS盒模型隐藏该怎么实现,具体有什么样的方法?
发布时间：2023-07-03 11:23:11 所属栏目：语言 来源：
导读：很多朋友都对“CSS盒子模型隐藏怎样做，具体方法是什么？”的内容比较感兴趣，对此小编整理了相关的知识分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获，那么感兴趣的朋友就继续往下看吧！
|
很多朋友都对“CSS盒子模型隐藏怎样做，具体方法是什么？”的内容比较感兴趣，对此小编整理了相关的知识分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获，那么感兴趣的朋友就继续往下看吧！ 前言： 合理的隐藏盒子,会有意想不到的结果 一、盒子隐藏概述 盒子的隐藏会使做出来的界面更加精致,灵活,带给用户更好的使用体验 盒子的隐藏使用css与js会有更好的动画效果 盒子隐藏的几种方式： 1.display:none; 将盒子隐藏起来,并且放弃之前占有的位置 2.visibility:hidden; 盒子隐藏起来,不放弃自己占有的位置 3.overflow:hidden; 一般用于针对盒子内的东西,如果超出盒子的大小 就对超出的部分进行隐藏,也可以对超出的部分进行,滚动浏览 这三种隐藏方式各有各的优点 二、display display属性，作用是进行块元素与行内块元素的转换。它将盒子进行隐藏 1.赋予display none属性 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- display盒子进行隐藏,none用于隐藏,block用于恢复盒子 --> <style> .nav { width: 300px; height: 300px; background-color: aquamarine; display: none; } .qwe { width: 300px; height: 300px; background-color: blueviolet; } </style> </head> <body> <div class="nav"></div> <div class="qwe"></div> </body> </html> 可以看出原来的第一个盒子变为了透明,并放弃了原来的位置。 三、visibility 从属性名可以看出,这个属性管理的是可视化，而hidden意思是隐藏，隐蔽（就是将盒子以隐藏的形式进行展示出来） 1.visibility: hidden; 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- visibility将盒子隐藏后不放弃盒子原来的位置 使用visible进行盒子恢复 --> <style> .nav { visibility: hidden; width: 300px; height: 300px; background-color: blueviolet; } .qwe { width: 300px; height: 300px; background-color: chartreuse; } </style> </head> <body> <div class="nav"></div> <div class="qwe"></div> </body> </html> 四、overflow 这个属性就是将超出盒子边界的文字或图片进行隐藏 1.代码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- overflow对盒子内部的东西进行处理,有多种模式,其中auto兼容性很强 --> <style> .nav { width: 300px; height: 300px; background-color: #fff; /* overflow: auto; */ overflow: hidden; margin: 0 auto; border: 1px blue solid; } </style> </head> <body> <div class="nav"> wefbkujsadbfjdkas<br></br> nfkldjfklsdjfl;asdf<br>j ml;sdajfl;a<br>jfl;eja; lwefbkujsadbfjdkas<br> </br>nfkldjfklsdjfl;asdf< br>jml;sdajfl;a<br>jfl;eja; lfjlwe<br>wefbkujsadbfjdkas<br> </br>nfkldjfklsdjfl;asdf<br>jml ;sdajfl;a<br>jfl;eja;lfjlwe<br> fjlwe<br>;jflejlfjlejfl </div> </body> </html> 总结： 盒子的隐藏尤为重要,可以将填好的表单隐藏起来,在点击特定的按钮时继续填写,可以做一些动态图片效果展示,可以极大地提高用户体验。 （编辑：聊城站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
