css中的显示与隐藏

css中的显示与隐藏

1. 元素的显示与隐藏：让一个元素在页面中消失，但是不在文档源码中删除
1. display 显示 ： 对象是否显示以及如何显示
• 用display:none 属性来隐藏对象，
• display:block 属性不仅可以转换为块状元素同时也有显示元素的意思
• 隐藏后的元素不保留原来的位置
2. visibility 可见性 ： 设置或检索是否显示对象
• visibility: visible 对象可视
• visibility: hidden 对象隐藏
• 隐藏后元素继续保留原来的位置
3. overflow 溢出 ：检索或设置当元素内容超出指定宽度或高度时如何管理内容
• overflow: visible； 不剪切内容也不添加滚动条
• overflow: auto; 超出自动添加滚动条，不超出不显示滚动条
• overflow: hidden; 隐藏超出对象尺寸的内容
• overflow: scrool; 不管内容超出与否，总是显示滚动条
2. overflow: hidden 作用总结
• 容器中溢出内容的隐藏
• 父元素中添加，消除外边距的合并
• 消除浮动带来的影响

扩展：

几种隐藏元素的方法

a. visibility: hidden；这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在。

b. opacity: 0；一个CSS3属性，设置0可以使一个元素完全透明，制作出和visibility一样的效果。与visibility相比，它可以被transition和animate

c. position: absolute；使元素脱离文档流，处于普通文档之上，给它设置一个很大的left负值定位，使元素定位在可见区域之外。

d. display: none；元素会变得不可见，并且不会再占用文档的空间。

e. transform: scale(0)；将一个元素设置为无限小，这个元素将不可见。这个元素原来所在的位置将被保留。

f. HTML5 hidden attribute；hidden属性的效果和display:none;相同，这个属性用于记录一个元素的状态

g. height: 0; overflow: hidden；将元素在垂直方向上收缩为0,使元素消失。只要元素没有可见的边框，该技术就可以正常工作。

h. filter: blur(0)；将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中。