CSS盒子模型隐藏的几种方式 |
您所在的位置：网站首页 › 怎么做盒子简单步骤又少 › CSS盒子模型隐藏的几种方式 |
CSS盒子模型隐藏的几种方式
|
文章目录
前言一、盒子隐藏概述二、display
1.赋予display none属性2.未加display:none;效果展示2.加display:none;效果展示 三、visibility
1.visibility: hidden;2.未加visibility: hidden;效果展示3.加visibility: hidden;效果展示 四、overflow
1.代码示例：2.不加这个属性效果展示3.加hidden效果展示4.加auto效果展示 总结
前言
合理的隐藏盒子,会有意想不到的结果 一、盒子隐藏概述 盒子的隐藏会使做出来的界面更加精致,灵活,带给用户更好的使用体验 盒子的隐藏使用css与js会有更好的动画效果 盒子隐藏的几种方式 1.display:none; 将盒子隐藏起来,并且放弃之前占有的位置 2.visibility:hidden; 盒子隐藏起来,不放弃自己占有的位置 3.overflow:hidden; 一般用于针对盒子内的东西,如果超出盒子的大小 就对超出的部分进行隐藏,也可以对超出的部分进行,滚动浏览 这三种隐藏方式各有各的优点 二、display 前面介绍过这个属性，作用是进行块元素与行内块元素的转换。今天讲这个属性是将盒子进行隐藏 1.赋予display none属性代码如下： Document .nav { width: 300px; height: 300px; background-color: aquamarine; display: none; } .qwe { width: 300px; height: 300px; background-color: blueviolet; } 2.未加display:none;效果展示
代码如下： Document .nav { visibility: hidden; width: 300px; height: 300px; background-color: blueviolet; } .qwe { width: 300px; height: 300px; background-color: chartreuse; } 2.未加visibility: hidden;效果展示
盒子的隐藏尤为重要,可以将填好的表单隐藏起来,在点击特定的按钮时继续填写,可以做一些动态图片效果展示,可以极大地提高用户体验。 总结写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自己在学习过程中整理出的一个关于 前端开发 的学习思路及方向。从事互联网开发，最主要的是要学好技术，而学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯，更加需要准确的学习方向达到有效的学习效果。 由于内容较多就只放上一个大概的大纲，需要更及详细的学习思维导图的 点击我的GitHub免费获取。 还有免费的 高级web全套视频教程 前端架构 H5 vue node 小程序 视频+资料+代码+面试题！ 全方面的web前端进阶实践技术资料，并且还有技术大牛一起讨论交流解决问题。 |
【本文地址】