本篇文章为 CSS 基础系列笔记第六篇，参考黑马程序员pink老师前端入门教程

其他CSS基础相关文章：

CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表

CSS基础「二」复合选择器 / 元素显示模式 / 背景 / 三大特性

CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影

CSS基础「四」浮动 \ 常见网页布局

CSS基础「五」定位

CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化

元素的显示与隐藏

本质：让一个元素在页面中隐藏或者显示出来

display 显示隐藏
visibility 显示隐藏
overflow 溢出显示隐藏

1. display 属性

display 属性用于设置一个元素应如何显示

display:none;：隐藏对象
display:block;：除了转换块级元素之外，同时还有显示元素的意思
display 隐藏元素后，不再占有原来的位置

示例

此属性在后面应用及其广泛，搭配 JS 可以做很多的网页特效

2. visibility 可见性

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

visibility: visible;：元素可视
visibility: hidden;：元素隐藏
visibility 隐藏元素后，继续占有原来的位置

示例

如果隐藏元素且想要原来的位置，就用 visibility: hidden;
如果隐藏元素且不想要原来的位置，就用 display: none; （用处更多重点）

3. overflow 溢出

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

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

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

4. 综合案例

案例：鼠标经过显示遮罩

练习元素的显示与隐藏
练习元素的定位

核心原理：原先半透明的黑色遮罩看不见，鼠标经过大盒子就显示出来。遮罩的盒子不占有位置，就需要用绝对定位和 display 配合使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>遮罩案例</title><style>.tudou {position: relative;width: 444px;height: 320px;background-color: tomato;margin: 30px auto;}.tudou img {width: 100%;height: 100%;}.mask {/* 隐藏遮罩层 */display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;}.tudou:hover .mask {display: block;}</style>
</head><body><div class="tudou"><div class="mask"></div><img src="data:images/tudou.jpg" alt=""></div>
</body></html>

.tudou:hover .mask ：鼠标经过 .tudou 盒子，让 .mask 遮罩层显示

欢迎阅读下篇文章： CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化

CSS基础「六」元素的显示与隐藏相关推荐

CSS基础「二」复合选择器 / 元素显示模式 / 背景 / 三大特性
本篇文章为 CSS 基础系列笔记第二篇,参考黑马程序员pink老师前端入门教程如有侵权联系删除,如有问题欢迎指出. 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 ...
CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化
本篇文章为 CSS 基础系列笔记第七篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
CSS基础「五」定位
本篇文章为 CSS 基础系列笔记第五篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
CSS基础「四」浮动 \ 常见网页布局
本篇文章为 CSS 基础系列笔记第四篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影
本篇文章为 CSS 基础系列笔记第三篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表
前言:本篇文章为 CSS 基础系列笔记第一篇,参考黑马程序员pink老师前端入门教程如有侵权联系删除,如有问题欢迎指出. 其他CSS基础相关文章: CSS基础「二」复合选择器 / 元素显示模式 / ...
认识CSS中高级技巧之元素的显示与隐藏
前端之HTML,CSS(八) CSS高级技巧元素的显示与隐藏 CSS中有三个属性可以设置元素的显示于隐藏,分别是:display.visibility和overflow. display 隐藏元素: ...
web前端入门学习 css（6）（定位position）（元素的显示与隐藏display、可见性visibility、溢出overflow）（案例：土豆播放页）
文章目录什么是定位? 定位组成(定位模式+边偏移) 定位模式static relative absolute fixed 边偏移定位模式--静态定位static(平时用不到)就是标准流定位模式- ...
CSS的元素的显示与隐藏
CSS的显示与隐藏 CSS中元素标签的显示与隐藏可以通过对元素的css样式编写的过程中,在元素样式下以三种不同的属性进行显示与隐藏,通过对html标签进行显示与隐藏,从而实现web中特定的功能,例如: ...

CSS基础「六」元素的显示与隐藏