关于display:none使用

最新推荐文章于 2024-06-05 00:48:32 发布
原创 最新推荐文章于 2024-06-05 00:48:32 发布 · 3.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #js

本文探讨了使用display属性控制HTML元素显示隐藏时出现的闪屏问题，并提供了解决方案：通过直接在HTML标签中设置初始状态为隐藏来避免加载时的视觉干扰。

display:none 和display:block 、display:inline 可以控制html元素的显示隐藏

问题是我在使用js 在初始化事件中window.onload设置html隐藏.

在初始化页面的时候,html元素会先显示再隐藏,也就会出现一个闪屏的动作.非常不好.

解决：

在html 标签中设置初始化的时候隐藏,放弃js初始化隐藏方法.

css display:none使用注意事项小结
10-30
3. 当display: none通过样式文件或标签设置时，使用JavaScript来恢复元素的显示可能需要使用其他非none值来替代。 4. 当需要隐藏元素同时保留布局空间时，可以选择使用visibility: hidden代替display: none。
标签设置display：none后设置diplay=“”不显示1
08-08
在实际开发中，`display` 的使用需要考虑到元素的上下文和需求。例如，当需要隐藏一个导航菜单时，可能会用到 `display: none`；而在响应式设计中，可能需要根据屏幕尺寸改变元素的 `display` 值来实现不同的布局...
理解与应用css中的display属性
Liuqz2009的专栏
02-12 1万+
　　display属性是我们在前端开发中常常使用的一个属性，其中，最常见的有：noneblockinlineinline-blockinherit　　下面，我将按照顺序将上述几种属性做一个完整的讲解。第一部分：display:none　　none这个值表示此元素将不被显示。比如，当我们在浏览网页时，如果看到了某个烦人的广告遮挡了我们的实现，更为可气的是，它还没有关闭的选项，这时（以chrome为例...
【前端】display:none和visibility:hidden两者的区别
努力才是唯一的入场券。
06-05 8305
【前端】display:none和visibility:hidden两者的区别
初级前端面试题——CSS（1）
weixin_48915353的博客
04-11 1543
有两种， IE 盒子模型、W3C 盒子模型；盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；标准(W3C)盒模型：元素宽度 = width + padding + border + margin怪异(IE)盒模型：元素宽度 = width + margin区 别： IE 的 content 部分把 border 和 padding 计算了进去;
display:none
热门推荐
进击的Coder菜鸟
08-21 11万+
1、display:none和visible:hidden都能把网页上某个元素隐藏起来。 2、但两者有区别: ●display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。 ●visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。 1、visibility: hid...
CSS魔法堂：display:none与visibility:hidden的恩怨情仇
weixin_34261739的博客
09-30 242
前言  还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗？是不是回答完display:none不占用原来的位置，而visibility:hidden保留原来的位置后，面试官就会心一笑呢？其实不止那么简单呢！本文我们将一起深究它俩的恩怨情仇，下次面试时我们可以回答得更出彩！ 深入display...
javascript获取隐藏元素(display:none)的高度和宽度的方法
10-25
然而，当我们尝试获取一个CSS样式为display:none的元素的高度和宽度时，会发现常规的JavaScript方法无法直接获取这些尺寸值，因为display:none的元素没有物理尺寸。为了获得这些隐藏元素的尺寸信息，需要采用一些...
实例详解display:none与visible:hidden的区别
11-27
例如，在上述实例中，第一个 `<span>` 元素的背景色设置为蓝色，但因为使用了 `display:none`，这个元素在页面上是完全不可见的，即使尝试去点击或滚动，也无法感知到它的存在。 2. `visibility:hidden` `...
display:none 小记
屋顶小黑猫
06-02 937
我们经常会使用 display:none 来隐藏我们不需要显示的控件(不会占用空间)，但是呢，由于不同的浏览器对这丫的解释不一样会给我们带来麻烦、下面的是我在网上看到的解释：  原来Firefox、Opera、IE、Chrome对display:none的理解是不一致的。 Firefox、Opera理解display:none中的内容无需在初次加载中显示，所以它们会延后里面的内容加载，甚至
display:none与visible:hidden的区别
JorgenXu
09-06 656
http://www.cnblogs.com/nicholas_f/archive/2009/03/27/1423207.html     display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别: display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。 visible:hidden-
php display的用法,display none是什么意思？display none的用法示例
weixin_33379297的博客
03-22 895
css的display属性在网页布局中是经常会用到的，尤其是display属性中的block、inline-block、inline以及none这四个属性值，今天的这篇文章就给大家来介绍一下display属性中none属性值的用法，有需要的朋友可以参考一下。首先我们来看一下display none的意思是什么？display:none的意思：隐藏元素并脱离文档，流就是隐藏该区域，不占实际空间，但对...
display：none
weixin_34075551的博客
04-28 457
2019独角兽企业重金招聘Python工程师标准>>> ...
隐藏元素方法---- 使用display:none和left:-999em
weixin_30346033的博客
07-15 387
今天做一个下拉的功能，如下图： 第一次想是把下面的使用js 在鼠标移动到上面的时候 修改 display 值让它显示出来。 后到通过使用在父标签上添加class，使用css控制显示与不显示，可是在某个浏览器下出现了问题（你懂得。），即不会隐藏层。 后来换了一种方法， 不是改成修改 display属性， 而是修改left属性， 隐藏的css是left:-999em; 显示...
css display:none使用
yymh123的专栏
10-15 1548
1.如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏，载入页面后，在没有通过js设置样式使元素显示的前提下，使用js代码会无法正确获得该元素的一些属性，比如offSetTop,offSetLeft等，返回的值会为0，通过js设置style.display来使元素显示后才能正确获得这些值 2.有些情况下可以使用style.visibility来代替style.displ
display:none;opacity:0;visibilty:hidden;区别与联系
SevenLee的个人博客
01-08 380
共同点：他们都会让元素隐藏；区别： 结构 display:none会让元素完全从渲染树中消失，渲染时不再占据任何空间，不能点击；visibilty:hidden不会让元素从渲染树上消失，渲染元素继续占据空间，只是内容不可见，不能点击；opacity:0不会让元素在渲染树中消失，渲染元素继续占据空间，只是内容不可见，可以点击；继承 display:none和opacity:0：是非继承属性，子孙节...
display：none显示和隐藏
weixin_30613727的博客
12-12 4542
1 <html> 2 <head> 3 <title>显示和隐藏问题</title> 4 <meta charset="utf-8"/> 5 <style type="text/css"> 6 #a{ 7 width: 500px; ...
js中设置控件的隐藏与显示(display:none)
五月天的博客
08-17 4万+
CSS中的display和visibility   css中display和visibility语法，他们都可以隐藏和显示html元素。看齐来他们很相似，所以很多人还是会搞错。谈们的属性分别如下： display:none|block;display:none;时隐藏该html元素，确切的说，是在浏览器中消除该元素，不占屏幕的空间。若其下有其他元素，就会上移到该空间区域（好像桌子上有10...
visibility：none和display：none区别
Tsite2007的博客
02-27 801
区别:         1. 前者依然在文档流中;后者则是直接 移除.         2. 后者会引起重绘,关乎前端的性能问题.         3. 前者设置后,如果给其子元素设置visibility:visible,则子元素依然可见.
react native display:flex display:none
最新发布
10-17
<think>我们正在讨论React Native中的display属性，特别是flex和none。请注意，React Native的布局系统基于Flexbox，因此display:flex是默认的布局行为。而display:none用于隐藏元素。 在React Native中，我们通常使用style属性来控制组件的显示和布局。对于display属性，React Native支持的有： - 'flex'（默认值）：使用Flexbox布局显示元素。 - 'none'：隐藏元素，且不占据布局空间。 注意：在React Native中，没有类似于Web中的block, inline-block等值，因为布局主要依赖于Flexbox。 使用场景： 1. display:flex：这是默认值，当我们想使用Flexbox布局来排列子元素时，不需要特别设置，因为默认就是flex。但我们可以通过flexDirection, justifyContent, alignItems等属性来控制布局。 2. display:none：当我们想要隐藏某个组件，并且不希望它占据任何空间时使用。注意，与Web不同，在React Native中，我们也可以通过设置组件的宽度和高度为0来隐藏，但使用display:none更为直接和语义化。 示例： 1. 使用display:flex（默认，通常不写）： ```jsx <View style={{flex: 1, flexDirection: 'row'}}> <Text>Item 1</Text> <Text>Item 2</Text> </View> ``` 2. 使用display:none： ```jsx <View style={{display: 'none'}}> <Text>这个组件将被隐藏，不占据空间</Text> </View> ``` 另外，在React Native中，我们也可以使用条件渲染来控制组件的显示与隐藏，例如： ```jsx {shouldShow && <View><Text>条件显示的组件</Text></View>} ``` 这种方式与display:none的效果类似，都是不渲染或隐藏组件，不占据空间。 但是要注意，display:none只是隐藏组件，而条件渲染则是完全不渲染该组件。根据需求选择： - 如果组件需要频繁切换显示/隐藏，且状态需要保留，可以使用display:none（因为组件只是被隐藏，并没有被卸载）。 - 如果隐藏时不需要保留状态，或者组件渲染开销大，则可以使用条件渲染（这样在隐藏时不会渲染，节省资源）。 总结： - 默认情况下，React Native组件都是display:flex，无需特别设置。 - 使用display:none可以隐藏组件且不占据空间。 - 根据场景选择display:none还是条件渲染。 相关问题： 1. 在React Native中，除了display:none，还有哪些隐藏组件的方法？ 2. React Native的Flexbox布局与Web的Flexbox有哪些主要区别？ 3. 如何实现React Native组件的渐显/渐隐效果？ </think>在 React Native 中，`display: flex` 和 `display: none` 的使用方式与 Web 开发类似，但存在平台差异和实现区别： ### 📱 1. `display: flex`（默认布局模式） - **作用**：启用 Flexbox 布局（React Native 的默认布局系统） - **使用方法**（通常无需显式声明，因默认即为 flex）： ```jsx <View style={{ display: 'flex', flexDirection: 'row' }}> <Text>Item 1</Text> <Text>Item 2</Text> </View> ``` - **核心属性**： - `flexDirection`: `row`（水平） / `column`（垂直，默认） - `justifyContent`: 主轴对齐（`flex-start`, `center`, `space-between` 等） - `alignItems`: 交叉轴对齐（`stretch`, `center`, `flex-start` 等） - `flex`: 定义元素的伸缩比例（如 `flex: 1` 表示占满剩余空间） - **典型场景**： - 构建响应式网格布局 - 实现水平/垂直居中 - 分配剩余空间（如底部固定按钮+滚动内容区域） - 等分空间布局（结合 `flex: 1` 使用） ### 🚫 2. `display: none` - **作用**：完全隐藏元素且**不占据布局空间** - **使用方法**： ```jsx <View style={{ display: shouldShow ? 'flex' : 'none' }}> <Text>条件显示的内容</Text> </View> ``` - **特性**： - 元素从渲染树移除，不参与布局计算 - 相比 `opacity: 0`（视觉隐藏但仍占位）更彻底 - 性能优于 `position: absolute` + `left: -1000` 等 hack 方式 - **典型场景**： - 条件渲染（如权限控制下的UI模块） - 步骤引导的分页切换 - 动态隐藏/显示复杂组件（避免重渲染开销） - 响应设备旋转/尺寸变化的适配逻辑 ### ️ 关键注意事项 1. **平台差异**： - Android 默认支持 `display: none` - **iOS 需 RN 0.62+** 才支持（旧版本需用 `opacity` + `position` 替代） 2. **性能对比**： | **方法** | 布局占位 | GPU 渲染负担 | 适用场景 | |-------------------|----------|-------------|-----------------------| | `display: none` | ❌ 否 | ✅ 低 | 需彻底移除元素时 | | `opacity: 0` | ✅ 是 | ⚠️ 中 | 需要位移动画时 | | 条件渲染 `&&` | ❌ 否 | ✅ 低 | 初始化不渲染的复杂组件 | 3. **替代方案参考**（兼容旧版 iOS）： ```jsx // 兼容性隐藏方案 <View style={{ opacity: shouldShow ? 1 : 0, position: shouldShow ? 'relative' : 'absolute', height: shouldShow ? undefined : 0, overflow: 'hidden' }}> ``` --- ### 📚 相关问题 1. React Native 中 Flexbox 布局与 Web 的 Flexbox 有哪些主要区别？ 2. 如何实现 React Native 组件的渐隐/渐显动画效果？ 3. 在性能优化场景下，`display: none` 和条件渲染 `{isVisible && <Component/>}` 应如何选择？ 4. React Native 中如何处理响应式布局中的元素隐藏逻辑（如横屏/竖屏切换）？ > 引用说明：关于元素隐藏时布局空间的处理机制参考了 Flexbox 布局规范的核心原则[^1]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

筱芙淘趣坊

为嗷嗷待哺的我助力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值