display显示隐藏元素

display 设置或检索对象是否及如何显示。

display: none 隐藏对象display：block 除了转换为块级元素之外，同时还有显示元素的意思。

特点： display 隐藏元素后，不再占有原来的位置。

visibility显示隐藏元素

visibility 属性用于指定一个元素应可见还是隐藏。

visibility：visible ; 　元素可视visibility：hidden; 　  元素隐藏

特点：visibility 隐藏元素后，继续占有原来的位置。

如果隐藏元素想要原来位置，就用 visibility：hidden
如果隐藏元素不想要原来位置，就用 display：none

overflow溢出显示隐藏

overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分。
实际开发场景：

清除浮动
隐藏超出内容，隐藏掉, 不允许内容超过父盒子。

总结

属性	区别	用途
display 显示（重点）	隐藏对象，不保留位置	配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛
visibility 可见性（了解）	隐藏对象，保留位置	使用较少
overflow 溢出（重点）	只是隐藏超出大小的部分	1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

css元素的显示与隐藏 display显示隐藏 +visibility显示隐藏 +overflow溢出显示隐藏相关推荐

4.元素的显示与隐藏-display属性、visibility可见性、overflow溢出
01-display属性 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
CSS隐藏属性display:none；visibility:hidden；overflow:hidden
前端CSS元素隐藏的知识(display:none:visibility:hidden:overflow:hidden:opacity: 0) 欢迎来到CSS隐藏属性界面你好! 可以仔细阅读这篇文章 ...
web前端入门学习 css（6）（定位position）（元素的显示与隐藏display、可见性visibility、溢出overflow）（案例：土豆播放页）
文章目录什么是定位? 定位组成(定位模式+边偏移) 定位模式static relative absolute fixed 边偏移定位模式--静态定位static(平时用不到)就是标准流定位模式- ...
web前端基础 html5+css3（九.精灵图，字体图标，css三角，鼠标样式cursor，.轮廓线 outline，vertical-align，文本溢出显示省略号）
1.精灵图(有效减少服务器介绍和发送请求的次数,提高页面的加载速度) 将网页的小背景图像整合到一张大图中,这样服务器只需要请求一次就可以了 background-position (图片往坐标左边走) ...
CSS元素的显示和隐藏
类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现! 本质:让一个元素在页面中隐藏或者显示出来. 注意:是隐藏,不是删除! display 显示隐藏(脱标) visibility ...
CSS元素的显示与隐藏
类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现! 本质:让一个元素在页面中隐藏或者显示出来. 1.display显示隐藏 2.visibility显示隐藏 3.overflow ...
css多行超出显示点_CSS实现单行、多行文本溢出显示省略号（…）
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
如何设置省略号对其序号 html,CSS实现单行、多行文本溢出显示省略号（…）
最好用max-height来限制一下web 若是实现单行文本的溢出显示省略号同窗们应该都知道用text-overflow:ellipsis属性来,固然还须要加宽度width属来兼容部分浏览.浏览器实 ...
CSS文本溢出显示省略号怎么实现？
前言我们经常会遇到网页中有文字溢出会显示省略号,那么这种效果怎么实现呢?本文分别介绍了单行文本溢出显示省略号和多行文本溢出显示省略号的实现方法. 一.单行文本溢出显示省略号代码示例: <!D ...

css元素的显示与隐藏 display显示隐藏 +visibility显示隐藏 +overflow溢出显示隐藏

css元素的显示与隐藏

display显示隐藏元素

visibility显示隐藏元素

overflow溢出显示隐藏

总结

css元素的显示与隐藏 display显示隐藏 +visibility显示隐藏 +overflow溢出显示隐藏相关推荐

最新文章

热门文章