CSS盒子模型隐藏的几种方式(1)

最后

🍅 硬核资料：关注即可领取PPT模板、简历模板、行业经典书籍PDF。
🍅 技术互助：技术群大佬指点迷津，你的问题可能不是问题，求资源在群里喊一声。
🍅 面试题库：由技术群里的小伙伴们共同投稿，热乎的大厂面试真题，持续更新中。
🍅 知识体系：含编程语言、算法、大数据生态圈组件（Mysql、Hive、Spark、Flink）、数据仓库、Python、前端等等。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

前言

====================================================================

合理的隐藏盒子,会有意想不到的结果

---

一、盒子隐藏概述

==========================================================================

盒子的隐藏会使做出来的界面更加精致,灵活,带给用户更好的使用体验

盒子的隐藏使用css与js会有更好的动画效果

盒子隐藏的几种方式

1.display:none;

将盒子隐藏起来,并且放弃之前占有的位置

2.visibility:hidden;

盒子隐藏起来,不放弃自己占有的位置

3.overflow:hidden;

一般用于针对盒子内的东西,如果超出盒子的大小

就对超出的部分进行隐藏,也可以对超出的部分进行,滚动浏览

这三种隐藏方式各有各的优点

二、display

===========================================================================

前面介绍过这个属性，作用是进行块元素与行内块元素的转换。今天讲这个属性是将盒子进行隐藏

1.赋予display none属性

---

代码如下：

2.未加display:none;效果展示

---

2.加display:none;效果展示

---

可以看出原来的第一个盒子变为了透明,并放弃了原来的位置。

三、visibility

==============================================================================

从属性名可以看出,这个属性管理的是可视化，而hidden意思是隐藏

隐蔽（就是将盒子以隐藏的形式进行展示出来）

1.visibility: hidden;

---

代码如下：

2.未加visibility: hidden;效果展示

---

3.加visibility: hidden;效果展示

---

四、overflow

============================================================================

这个属性就是将超出盒子边界的文字或图片进行隐藏

1.代码示例：

---