四、pink老师的学习笔记——元素的显示与隐藏
1. 元素的显示与隐藏
目的
让一个元素在页面中消失或者显示出来
场景
类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!
1.1 display 显示(重点)
display 设置或检索对象是否及如何显示。
display: none 隐藏对象display:block 除了转换为块级元素之外,同时还有显示元素的意思。
特点: 隐藏之后,不再保留位置。
实际开发场景:
配合后面js做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单, 应用极为广泛
1.2 visibility 可见性 (了解)
设置或检索是否显示对象。
visibility:visible ; 对象可视visibility:hidden; 对象隐藏
特点: 隐藏之后,继续保留原有位置。(停职留薪)
1.3 overflow 溢出(重点)
- 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
属性值 | 描述 |
---|---|
visible | 不剪切内容也不添加滚动条 |
hidden | 不显示超过对象尺寸的内容,超出的部分隐藏掉 |
scroll | 不管超出内容与否,总是显示滚动条 |
auto | 超出自动显示滚动条,不超出不显示滚动条 |
实际开发场景:
- 清除浮动
- 隐藏超出内容,隐藏掉, 不允许内容超过父盒子。
1.4 显示与隐藏总结
属性 | 区别 | 用途 |
---|---|---|
display | 隐藏对象,不保留位置 | 配合后面js做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单, 应用极为广泛 |
visibility | 隐藏对象,保留位置 | 使用较少 |
overflow | 只是隐藏超出大小的部分 | 1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围 |
四、pink老师的学习笔记——元素的显示与隐藏相关推荐
- 五、pink老师的学习笔记——CSS精灵技术(sprite)
5. CSS精灵技术(sprite) 重点 5.1 为什么需要精灵技术 图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一 ...
- 八、pink老师的学习笔记—— CSS用户界面样式(鼠标样式、轮廓线、防止拖拽文本域)
2. CSS用户界面样式 所谓的界面样式, 就是更改一些用户操作样式,以便提高更好的用户体验. 更改用户的鼠标样式 (滚动条因为兼容性非常差,我们不研究) 表单轮廓等. 防止表单域拖拽 2.1 鼠标样 ...
- HTML+CSS学习笔记(pink老师前端课程笔记--补档)
开始于2021年8月3日09点59分 课程学习路线:HTML5-> CSS3->H5C3提高->项目拼优购电商网站 仅更新到H5C3提高的C3提高部分(新增选择器),忙于其他事情,暂 ...
- pink老师js869集笔记
B站pink老师JavaScript 869集笔记 计算机基础部分 1.编程语言 1.1 编程 编程:就是让计算机为解决某个问题而使用某种程序设计语言编写代码程序,并最终的得到的过程 计算机程序:就是 ...
- 视觉SLAM十四讲学习笔记-第四讲---第五讲学习笔记总结---李群和李代数、相机
第四讲---第五讲学习笔记如下: 视觉SLAM十四讲学习笔记-第四讲-李群与李代数基础和定义.指数和对数映射_goldqiu的博客-CSDN博客 视觉SLAM十四讲学习笔记-第四讲-李代数求导与扰动模 ...
- 【四足机器人】学习笔记 足端轨迹规划和步态规划
[四足机器人]学习笔记 足端轨迹规划和步态规划 一.足端轨迹规划(摆线) 二.步态规划 1.Walk步态 2.Trot步态 近期,博主在古月居学习关于四足机器人的相关部分知识,从阳炼老师的四足机器人控 ...
- 【四足机器人】学习笔记 单腿逆运动学和站立姿态控制
[四足机器人]学习笔记 单腿逆运动学和站立姿态控制 一.四足机器人单腿逆运动学原理 二.四足机器人站立姿态控制原理 近期,博主在古月居学习关于四足机器人的相关部分知识,从阳炼老师的四足机器人控制与仿真 ...
- 【四足机器人】学习笔记 欧拉角与旋转矩阵之间的转化关系
[四足机器人]学习笔记 欧拉角与旋转矩阵之间的转化 一.基础旋转矩阵 二.组合旋转矩阵 在研究四足机器人站立姿态的时候,需要将通过IMU模块采集到的欧拉角数据信息转变为旋转矩阵R,关于如何将获取的欧拉 ...
- B站pink老师HTML+CSS笔记
HTML部分 浏览器内核 web标准 vscode的一些插件推荐 标题标签 记住h1标题最大就行 段落和换行标签 <br />不会有垂直间距 文本格式化标签 图片标签及路径 <i ...
最新文章
- linux父进程中显示子进程pid,请教linux下c语言函数fork父进程打印子进程的PID
- 不使用第三个变量交换两个变量的值
- MFC实现Windows锁屏
- 【转】科大校长给数学系学弟学妹的忠告本科数学参考书
- 应用交付脚本工具在HTTP服务中的应用
- android应用安全——数据安全
- 深度神经网络为何很难训练
- 能耗分项计量监测系统在某大型公建中的应用
- 我的世界java版1.7.10打不开怎么办_我的世界中国版打不开怎么办 怎么解决
- MYSQL之You can't specify target table for update in FROM clause解决办法
- Linux进程间通信方式
- Python 动态加载并下载梨视频短视频
- 单点登录与第三方登录 + CSRF-XSS-DNS-DDOS-SQL攻击
- Google 公司各职位年薪排排坐
- 数字集成电路设计-5-pipelining(流水线)
- 真正解决办法:WINDOWS7/WIN7提示错误:无法启动此程序,因为计算机中丢失D3DCOMPILER_47.dll。尝试重新安装该程序以解决此问题
- 项目管理:PMP和IPMP哪个更值得考?两个证书的区别在于哪里?
- STM32 CubeMX如何生成微秒(us)级延时
- fs的负载均衡 opensip+keeplive-fs
- proteus仿真软件中芯片的命名规则与封装方法(详细版)
热门文章
- java fast math,Java FastMath.signum方法代码示例
- java如何去掉html标签_Java后端去掉HTML标签获取纯文本-Fun言
- gitlab修改用户密码_CRM用户模块(用户密码修改)
- php用date语句获取时间,关于php date()函数获取时间的设置和使用方法
- namespace! 报错
- resin指定java版本_resin的几个常用配置
- Linux:I/O多路转接之select(有图有代码有真相!!!)
- 驱动框架1——什么是驱动框架?
- 深度学习中 epoch,[batch size], iterations概念解释
- LA 3942 Remember the Word