在CSS中有三个显示和隐藏的属性比较常见,我们要区分开,他们分别是 `display`、 `visibility` 和 `overflow`。
他们的主要目的是让一个元素在页面中消失,但是不在文档源码中删除。 最常见的是网站广告,当我们点击类似关闭不见了,但是我们重新刷新页面,它们又会出现和你玩躲猫猫!
* **display 显示**
* display 设置或检索对象是否及如何显示。
* display : none 隐藏对象,与它相反的是 display:block 除了转换为块级元素之外,同时还有显示元素的意思。
* 特点: 隐藏之后,不再保留位置。
* **visibility 可见性**
* 设置或检索是否显示对象。
* visible : 对象可视
* hidden : 对象隐藏
* 特点: 隐藏之后,继续保留原有位置。(停职留薪)
* **overflow 溢出**
* 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
* visible : 不剪切内容也不添加滚动条。
* auto : 超出自动显示滚动条,不超出不显示滚动条
* hidden : 不显示超过对象尺寸的内容,超出的部分隐藏掉,被隐藏的部分不占位。
* scroll : 不管超出内容否,总是显示滚动条
* **display&visibility&overflow的hidden区别**
* **visibility:hidden** 即使元素隐藏了,但是仍然占位。父框不可见,子框不受影响。
* **display:none** 隐藏了元素,不占位。父框不可见,子框也不可见。
* **overflow:hidden** 即使隐藏了超出的部分,被隐藏的部分不占位。
- 0 学前必读
- CSS是什么?
- 如何引用CSS
- 内联样式表
- 行内式
- 外部样式表
- 三种引用方式的比较
- CSS语法规范
- 选择器
- 基础选择器
- 复合选择器
- CSS注释
- 字体样式font属性
- 标签显示模式display属性
- 块级元素
- 行内元素
- 行内块元素
- 三种显示模式的转换
- 行高line-height属性
- CSS三大特性
- 背景background属性
- 盒子模型
- 边框border
- 内边距padding
- 外边距margin
- 外边距的合并
- content的高度和宽度
- 盒子模型布局的稳定性
- 圆角边框border-radius
- 盒子阴影box-shadow
- 浮动float
- 普通流
- 浮动float
- 版心和布局
- 布局流程
- 常见布局方式
- 清除浮动
- 定位postion
- 定位属性
- 叠放次序z-index
- 元素的显示与隐藏
- 用户界面样式
- 溢出的文字隐藏
- CSS精灵技术
- 什么是精灵技术?
- 精灵技术的使用
- 滑动门
- web字体
- 字体图标
- icon图标
- BFC
- 优雅降级和渐进增强
- HTML5新增的元素和特性
- CSS3盒模型
- 过渡、变形、动画
- 弹性布局
- 对齐
- 网站优化三大标签