【网页前端】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

相关文章
|
12天前
|
XML 前端开发 JavaScript
前端大神揭秘:如何让你的网页秒变炫酷,让用户欲罢不能的5大绝招!
前端开发不仅是技术活,更是艺术创作。本文揭秘五大前端开发技巧,包括合理运用CSS动画、SVG图形、现代JavaScript框架、优化网页性能及注重细节设计,助你打造炫酷网页,提升用户体验。
58 30
|
13天前
|
存储 编解码 前端开发
惊!前端新手也能秒懂的高级技巧,轻松提升网页颜值与性能!
本文针对前端新手,介绍了三个简单易学的高级技巧,帮助提升网页的颜值和性能。包括使用CSS框架快速美化网页、优化图片资源加快加载速度,以及利用ARIA属性和媒体查询提高网页的可访问性和响应性。示例代码清晰,适合初学者上手实践。
25 3
|
16天前
|
存储 前端开发 搜索推荐
(前端直接编辑CAD)网页CAD二次开发中线型表的使用方法
在DWG数据库中,线型样式存储在线型样式表 `McDbLinetypeTable` 中,每个线型表记录对象 `McDbLinetypeTableRecord` 对应一种线型样式。本文介绍了如何获取、添加、遍历、删除和修改线型样式,并提供了绘制不同线型的示例代码,包括虚线、点划线和带文字的线型。通过在线示例demo,用户可以实践修改CAD图纸中的实体线型及其样式。
|
19天前
|
搜索推荐 前端开发 开发者
前端开发的必修课:如何让你的网页在搜索引擎中脱颖而出?
【10月更文挑战第31天】前端开发不仅是构建网页与用户间桥梁的关键,还需注重搜索引擎优化(SEO)。优化网页结构、合理使用关键词、提升加载速度及整合社交媒体等技巧,能帮助网页在搜索引擎中脱颖而出,吸引更多用户。
29 5
|
19天前
|
机器学习/深度学习 前端开发 JavaScript
前端小白也能学会的高大上技巧:如何让你的网页支持语音控制?
【10月更文挑战第31天】你是否曾梦想过只需动动嘴皮子就能操控网页?现在,这个梦想触手可及。即使你是前端小白,也能轻松学会让网页支持语音控制的高大上技巧。本文将介绍语音控制的基本概念、实现方法和具体示例,带你走进语音控制的奇妙世界。通过Web Speech API,你只需掌握基本的HTML、CSS和JavaScript知识,就能实现语音识别和控制功能。快来尝试吧!
65 4
|
19天前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
25 4
|
19天前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术:掌握这些,让你的网页秒变交互神器!
【10月更文挑战第31天】前端开发藏有众多宝藏技术,如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求,提高代码可读性;Web Components则允许创建可重用、封装良好的自定义组件,提升代码复用性和独立性。此外,CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践,让网页秒变交互神器。
24 2
|
前端开发 容器
css:整理9种元素水平垂直居中的方法
css:整理9种元素水平垂直居中的方法
145 0
css:整理9种元素水平垂直居中的方法
下一篇
无影云桌面