CSS Day07
CSS高级技巧
- 理解
能说出元素显示隐藏最常见的写法
能说出精灵图产生的目的
能说出去除图片底侧空白缝隙的方法
- 应用
能写出最常见的鼠标样式
能使用精灵图技术
能用滑动门做导航栏案例
【腾讯云】视频通信爆款 9.9 元起, 提供电商、教育、社交娱乐等多行业多场景的一站式解决方案,最快 1 天布局火爆赛道
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.清除浮动
2.隐藏超出内容,隐藏掉, 不允许内容超过父盒子。