元素的显示与隐藏、CSS用户界面样式

最新推荐文章于 2022-03-09 22:20:16 发布

辰逸博客

最新推荐文章于 2022-03-09 22:20:16 发布

阅读量1.1k

点赞数

分类专栏： css 文章标签：元素的显示与隐藏 css用户界面样式

本文链接：https://blog.csdn.net/chenyiboke/article/details/102965599

版权

本文详细介绍了CSS中元素的显示与隐藏，包括display属性的使用，隐藏后不再保留位置；visibility属性，隐藏后仍保留位置；以及overflow属性在内容溢出时的管理方式。此外，还讲解了CSS用户界面样式，如cursor、outline和resize属性的用法，帮助提升用户体验。

摘要由CSDN通过智能技术生成

1. 元素的显示与隐藏

1. 目的：

让一个元素在页面中消失或者显示出来。

2. 场景：

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！

1.1 display显示（重点）

1. display设置或检索对象是否及如何显示。

display：none 隐藏对象
display：block 除了转换为块级元素之外，同时还有显示元素的意思。

2. 特点：隐藏之后，不再保留位置。

1.2 visibility 可见性（了解）

1. 设置或检索是否现实对象

visibility：visible   ；  对象可视
visibility：hidden   ；  对象隐藏

2. 特点：隐藏之后，继续保留原有位置（停职留薪）

1.3 overflow溢出（重点）

1. 检索设置当前对象的内容超过其指定高度及宽度时如何管理内容。

Document


属性	描述
visble	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超过的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出显示滚动条

显示与隐藏：

<!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>Document</title>
    <style&g