【网页前端】CSS样式表之元素的显隐

简介: 本期主要介绍CSS常用布局之定位

1. 引言&概述


在网页特效中,经常涉及到元素显示和隐藏的切换,所以我们要系统学习元素显隐的相关操作。

元素的显隐:利用 CSS 属性控制元素在页面中的显示和隐藏

共有三种方式:

display

visibility

overflow

2. display 设置(回顾)


display 属性可以使得元素 在显示和隐藏之间相互转换。

注意:显示(块、行内块、行内),隐藏(不占用原有位置)

格式:(建议将 display 作为第一个属性

选择器{display:属性值}

常用的属性值:

image.png

3. visibility 设置


visibility 属性可以使得元素 在显示和隐藏之间相互转换。

注意:若使用该属性隐藏元素,隐藏元素仍然会占用原有标准流位置。

格式:

选择器{visibility:属性值}

准备代码:

image.png

常用的属性值:

image.png

适用于:即使隐藏,也要占用位置的需求

4. overflow 设置


overflow:用于设置溢出元素部分的策略。

格式:overflow: 属性值;

准备代码

image.png

属性值列表

image.png

image.png

总结:

1、 一般选择 hidden 或者 auto,尽可能不让溢出部分影响布局

2、 如果是有定位的元素,慎用 hidden,否则会将多余部分隐藏

若需要在 元素显示模式之间转换 、元素完全 隐藏不占用标准流 : display

若需要元素 隐藏且占用标准流 : visibility

若需要仅对 溢出部分进行隐藏 操作: overflow

相关文章
|
2天前
|
移动开发 前端开发 JavaScript
CSS3 标签元素显示模式
CSS3 标签元素显示模式
|
7天前
|
前端开发 JavaScript 程序员
前端深入之css篇丨初探【transform】,手把手带你实现1024程序员节动画
前端深入之css篇丨初探【transform】,手把手带你实现1024程序员节动画
|
19小时前
|
前端开发
|
2天前
|
移动开发 前端开发 JavaScript
HTML5+CSS3+JavaScript网页实战
HTML5+CSS3+JavaScript网页实战
|
5天前
|
缓存 前端开发 JavaScript
如何优化前端网页加载速度
本文将介绍一些优化前端网页加载速度的技巧和方法,包括减少HTTP请求、压缩文件大小、使用浏览器缓存以及异步加载等。通过这些优化措施,您可以提升用户体验,加快网页加载速度,为用户提供更好的网页访问体验。
|
6天前
|
移动开发 前端开发 HTML5
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
|
13天前
|
前端开发 编解码 移动开发
【魅力网页的背后】:CSS基础魔法,从零打造视觉盛宴
【魅力网页的背后】:CSS基础魔法,从零打造视觉盛宴
|
13天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
14天前
|
缓存 前端开发 JavaScript
从HTML、CSS以及其他方面介绍一些移动端网页性能优化的策略
【6月更文挑战第14天】本文探讨了移动端网页性能优化的重要性,并提出了HTML、CSS及其他方面的优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件。CSS优化包括简化样式、利用CSS3动画、媒体查询及压缩文件。其他策略涉及图片和字体优化、缓存利用、压缩传输数据、减少HTTP请求及监听网络状态。通过这些方法,可提升网页性能,改善用户体验。
15 1
|
21小时前
|
前端开发
css元素实现垂直竖直万能居中
css元素实现垂直竖直万能居中
9 0