CSS元素的显示和隐藏

最新推荐文章于 2024-08-20 21:00:21 发布
最新推荐文章于 2024-08-20 21:00:21 发布
阅读量744 收藏 1
点赞数 2
分类专栏： Web前端 文章标签： css python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44703582/article/details/120765342
版权
本文介绍了CSS中用于隐藏和显示元素的三种方法：display、visibility和overflow。display属性通过none和block控制元素的显示与隐藏，常用于JS交互；visibility属性隐藏元素但保留其占据的空间；overflow属性则用于隐藏内容超出部分，同时可用于清除浮动。
摘要由CSDN通过智能技术生成

目录

前言

一、display

二、visibility

三、overflow

总结



前言

        在CSS中，隐藏和显示是我们经常会用到的方法，最常用的方法有三种：display、visibility、overflow。它们的主要目的是让一个元素在页面中消失，但并不是让它们被删除掉，比如网页中的小广告，关掉以后再次刷新页面又会重新出现。



一、display

要点：display元素隐藏后，不再占有原来的位置。

用途：配合js做特效，比如下拉菜单，原先没有，鼠标经过显示下拉菜单，应用极为广泛。

display：none（隐藏元素）

display：block（除了转换为块级元素外，还有显示元素的意思）

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
最低0.47元/天 解锁文章
双星。
关注
专栏目录
CSS的元素显示方法（块、行内元素）及背景属性
weixin_50119334的博客
09-17 2884
CSS的元素显示方法 元素显示模式：即元素（标签）以什么方式进行展示 1.块元素 常用有<h1>-<h6>,<p>,<div>,<ul>,<ol>,<li>等，<div>最典型 特点： 比较霸道，自己独占一行 高度，宽度，外边距，内边距都可以控制 宽度默认为容器（父级宽度）的100% 是一个容器及盒子，里面可以放行内或块级元素 1.文字类的元素不能使用块元素 2.<p>标签主要用于存放文字，因此&
CSS背景background和显示元素
weixin_58139900的博客
09-22 629
CSS 背景属性用于定义 HTML 元素的背景，通过背景属性我们可以定义元素的背景颜 色、背景图片、背景图片的平铺方式和显示位置等。 背景颜色background-color ckground-color 属性，设置元素的背景颜色。 常用的值 color_name 规定颜色值为颜色名称的背景颜色（比如 red） hex_number 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。 rgb_number 规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0
CSS——元素的隐藏和显示（定位）
最新发布
2301_80121278的博客
08-20 541
本文主要围绕三个属性来进行学习, 并在最后简单做一个案例来巩固display属性：用于设置一个元素应如何显示visibility属性：指定一个元素应可见还是隐藏overflow属性：指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。
css设置元素的显示与隐藏
m0_56212431的博客
09-12 197
1. display 语法：display:none|block 元素值 说明 none 隐藏对象 block 除了转换为块级元素外，同时还有 显示元素 的意思 特点：隐藏之后，不再保留位置。 2. visibility 语法：visibility:visible|hidden 元素值 说明 visibility 对象可视 hidden 对象隐藏 特点：隐藏之后，保留原有位置。 3. overflow 说明：设置当对象的内容超过其指定高度即宽度时内容该如何显示
[css] 元素的隐藏和显示
adisMadman的博客
04-20 545
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新界面，会重新出现！ 本质：让一个元素在页面中隐藏或者显示出来。 一：display属性 display属性用于设置一个元素应如何显示： display：none；隐藏对象 display：block；除了转换为块级元素以外，同时还有显示元素的意思 display隐藏元素后，不再占有原来的位置 二：visibility可见性 visibility属性用于指定一个元素应可见还是隐藏 visibility：visible；元素可视 visib
CSS元素显示与隐藏
LFXZ603的博客
05-15 5283
display显示 display: none; 隐藏某个元素 特点：隐藏之后，不保留位置 display: block; 显示某个元素 visibility可见性 visibility: hidden; 隐藏某个元素 特点：隐藏之后，位置仍然保留 visibility: visible; 显示某个元素 overflow溢出隐藏 overflow: visible; 当文...
CSS实现元素显示和隐藏
m0_56712012的博客
12-01 2642
让我来简单讲一讲css中元素的显示和隐藏是如何去实现的吧 元素的显示和隐藏
css 元素显示隐藏的9种思路
12-28
本文将介绍元素显示隐藏的9种思路 display 对于元素显隐来说，最常见就是display:none | display:block，但是使用这种方法有个问题，元素的display属性在隐藏前并不都是block，还有可能是inline、inline-block等 ...
CSS控制DIV层显示和隐藏的实现方法
09-27
一、CSS控制元素显示和隐藏的两种属性 在CSS中，控制元素显示和隐藏主要有两个属性：display和visibility。 1. display属性： display属性用来设置或检索对象是否显示以及如何显示。 - display:none; 属性值用来...
jQuery的显示和隐藏方法与css隐藏的样式对比
10-26
2. `show()`: 类似于`hide()`，`show()`用于显示隐藏的元素，同样可以接受时间参数来控制动画速度。它可以让隐藏的元素在指定时间内逐渐出现。 3. `slideToggle()`: 这个方法会在元素当前隐藏时滑动显示，显示时...
CSS元素的显示与隐藏
m0_46893049的博客
03-09 257
CSS元素的显示与隐藏 类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现。 本质：让一个元素隐藏或出现。 1.display display 用于设置一个元素应如何显示。display属性可以设置元素的内部和外部显示类型 display types。元素的外部显示类型 outer display types 将决定该元素在流式布局中的表现（块级或内联元素）；元素的内部显示类型 inner display types 可以控制其子元素的布局（例如：flow layout, grid或
CSS元素的显示模式方法！
乐逍遥
08-21 342
CSS元素显示模式 元素的显示模式 元素 (标签) 以什么方式显示，例如<div>独自占一行 分类：块元素，行内元素 块元素 包括：<h1>,<p>,<div>,<ul>,<ol>,<li>,其中<div>是最典型的块元素 特点： 自己独占一行 可以设置高度宽度及内外边距 宽度默认和容器(父级宽度)一样宽 是一个容器及盒子，里面可以放其他元素 注意：文字类的块元素不
纯 CSS 实现搜索框的展示与隐藏
broken_promise的博客
07-25 1911
设置搜索图标.这里多说一嘴,其实这个搜索图标用按钮实现也行,因为按钮会水平垂直居中咱们的🔍图标.但是不好的地方是要通过。选中时展示输入框.结构如下,注意标签的顺序因为会使用到。处于选中状态时,要将输入框显示出来,但是要注意加上。好久没有更新这个动效了,因为自己没有灵感😶…首先是全局样式.元素水平居中,背景色为水平渐变。主要思路就是默认隐藏输入框,然后通过。接下来,设置容器为相对布局,并隐藏。浏览器),因此要上下边距为。📕默认实现隐藏的方法就是设置。的大小相同,但因为。...
CSS的元素显示模式
m0_64365419的博客
11-23 1262
特殊情况下，我们需要元素模式的转换---->一个模式的元素需要另一个模式的特性。比如：想要增加的触发范围。转换为块元素:display:block;转换为行内元素:display:inline;转换为行内块元素:display:inline-block;举例：
CSS中影藏及显示元素的方式
Hello_super的博客
02-11 681
HTML中 CSS影藏元素的两种方式 方式一： 通过display: none来实现，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隐藏框</title> <style> .box1{ width: 200px; line-height:
css基础-4-css元素显示方式和三大特性
Neptuneyut的博客
05-21 365
文章目录块元素行内元素行内块元素元素模式的转换 在网页布局的时候，需要用到各种各样的布局方式，有的希望成块，有的希望成行，有的希望兼具二者的特点，这就用到css元素的不同显示方式：块元素、行内元素和行内块元素 块元素 诸如div,h1-h6,p,ul和li等元素就是典型的块元素，其特点是： 独占一行 可以设置宽、高以及不同的边距 若不设宽度则默认是父元素的宽度 块元素本身是一个容器，里面可以放置块和行内元素 文字类的块元素中不要放块元素，例如在p和h1-h6中不要放置其他块元素 行内元素 诸如span,
通过HTML和CSS隐藏和显示元素的方法大全
fefeko's blog　
08-04 640
1. VISIBILITY: HIDDEN xxx { float: right; margin-left: 2em; visibility: hidden; }    2. OPACITY: 0 xxx { float: right; margin-left: 2em; opacity: 0; } 3.POSITION: ABSOLUTE xxx{ pos
CSS之元素显示与隐藏
jhkkk的博客
11-18 147
元素的显示与隐藏 在CSS中有三个显示和隐藏的单词比较常见，他们分别是 display visibility 和 overflow。 display 显示 display 设置或检索对象是否及如何显示。 display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。 特点： 隐藏之后，不再保留位置。 visibility 可见性 ...
css 元素显示隐藏display
02-20
CSS中的display属性用于控制元素的显示和隐藏。它有多个取值，其中常用的有以下几种： 1. display: none; 这个值会完全隐藏元素，元素不会在页面上占据任何空间。相当于元素被从文档流中移除了。 2. display: ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值