CSS:元素的显示与隐藏
目录
本质:让一个元素在页面中隐藏或者显示出来
1.1、display属性
4.2、visibility 可见性
4.3、overflow 溢出隐藏
本质:让一个元素在页面中隐藏或者显示出来
1.1、display属性
display属性用于设置一个元素应如何显示
- display: none; 隐藏对象
- display: block; 除了转化为块级元素之外,同时还有显示元素的意思
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>显示隐藏元素之display</title><style>.peppa {display: none;/* display: block; */width: 200px;height: 200px;background-color: pink;}.george {width: 200px;height: 200px;background-color: skyblue;}</style>
</head>
<body><div class="peppa">佩奇</div><div class="george">乔治</div>
</body>
</html>
display隐藏元素后,不再占有原来的位置。
4.2、visibility 可见性
visibility属性用于指定一个元素应可见还是隐藏
- visibility: visible; 元素可见
- visibility: hidden; 元素隐藏
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>显示隐藏元素之display</title><style>.baba {visibility: hidden;width: 200px;height: 200px;background-color: pink;}.mama {width: 200px;height: 200px;background-color: skyblue;}</style>
</head>
<body><div class="baba">猪爸爸</div><div class="mama">猪妈妈</div>
</body>
</html>
visibility隐藏元素后,继续占有原来的位置。
4.3、overflow 溢出隐藏
overflow属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时,会发生什么。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>显示隐藏元素之overflow</title><style>.peppa {/* overflow: visible; *//* overflow: hidden; *//* scroll 溢出的部分显示滚动条 不溢出也显示滚动条 *//* overflow: scroll; *//* auto 溢出的时候才显示滚动条 不溢出不显示滚动条 *//* overflow: auto; */width: 200px;height: 200px;border: 3px solid pink;margin: 100px auto;}</style>
</head><body><div class="peppa">《小猪佩奇》,又名《粉红猪小妹》(台湾名为粉红猪),英文名为《PeppaPig》,是由英国人阿斯特利(Astley)、贝克(Baker)、</div></body></html>
一般情况下,我们都不想让溢出的内容显示出来,因为溢出的部分会影响布局。
但是如果有定位的盒子,请慎用overflow: hidden 因为他会隐藏多余的部分
CSS:元素的显示与隐藏相关推荐
- css元素的显示与隐藏 display显示隐藏 +visibility显示隐藏 +overflow溢出显示隐藏
css元素的显示与隐藏 display显示隐藏元素 visibility显示隐藏元素 overflow溢出显示隐藏 总结 display显示隐藏元素 display 设置或检索对象是否及如何显示. d ...
- CSS元素的显示和隐藏
类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现! 本质:让一个元素在页面中隐藏或者显示出来. 注意:是隐藏,不是删除! display 显示隐藏(脱标) visibility ...
- CSS元素的显示与隐藏
类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现! 本质:让一个元素在页面中隐藏或者显示出来. 1.display显示隐藏 2.visibility显示隐藏 3.overflow ...
- CSS的元素的显示与隐藏
CSS的显示与隐藏 CSS中元素标签的显示与隐藏可以通过对元素的css样式编写的过程中,在元素样式下以三种不同的属性进行显示与隐藏,通过对html标签进行显示与隐藏,从而实现web中特定的功能,例如: ...
- 背景的渐变/vatical的专题解析/cs元素的显示与隐藏-学习笔记
记单词.复习. 背景色的渐变(渐变是css3中的东西,考虑加上兼容处理) 1.线性渐变 背景颜色沿着一条直线进行的它的属性为:linear gradient 1)渐变的位置:它的方向值有(to lef ...
- CSS基础「六」元素的显示与隐藏
本篇文章为 CSS 基础系列笔记第六篇,参考 黑马程序员pink老师前端入门教程 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
- 认识CSS中高级技巧之元素的显示与隐藏
前端之HTML,CSS(八) CSS高级技巧 元素的显示与隐藏 CSS中有三个属性可以设置元素的显示于隐藏,分别是:display.visibility和overflow. display 隐藏元素: ...
- CSS伪元素及元素的显示与隐藏的学习
什么是伪元素? CSS 伪元素用于设置元素指定部分的样式. 例如,它可用于: 设置元素的首字母.首行的样式 在元素的内容之前或之后插入内容 伪元素在超链接中的应用 1. link 未 ...
- CSS一元素的显示与隐藏
元素的显示与隐藏 类似网站广告,当我们点击就不见了,但是重新刷新页面,会重新出现. 本质:让一个元素在页面中隐藏或者显示出来. 常用的三种方法:display.visibility.overflow ...
最新文章
- 2017-06-09 问题
- Sentinel圣天诺加密狗简单使用教程(Linux)
- 计算营业额的python代码_【每日一练】巧用python实现利润计算
- Ansible-playbook yum安装nginx1.20.1
- Trial accounts of SAP Cloud Platform do not provide an Identity Authentication tenant
- Android 四大组件 —— 广播(广播机制解析)
- linux中 /dev/null命令
- Qt creator5.7 OpenCV249之图片腐化(含源码下载)
- docker 本地部署 mysql_Docker 部署Mysql 服务和Redis 服务的方法
- java 过滤器 弹出提示_JavaWeb 过滤器——验证登录 防止未登录进入界面
- 用servlet进行用户名和密码校验
- python中ndarray对象实例化_Python —— 实例化ndarray对象
- 印象最深刻的三位老师、难忘的往事
- 故障检测、故障识别领域(分类问题)的性能评价指标
- 百鸡百钱python教程_python百钱百鸡
- Windows11系统农业银行企业K宝无法正常使用的解决方法
- 笔记本机械硬盘无法识别出来
- 利用python爬虫爬取图片并且制作马赛克拼图
- 知乎live:高效学习计算机专业课程 笔记
- java 双击触发事件_java鼠标双击事件怎么实现