将元素的display设置为none后，即使它在代码中发生了更改，也无法重新显示元素 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何学习 CSS

很多人想让我给他们推荐有关CSS部分的教程，或者问我如何学习CSS。我也看到很多人对CSS的部分内容感到困惑，一部分原因是由于对语言的过时认识。鉴于CSS在过去几年中发生了相当大的变化，这是一个更新知识的好时机。即使CSS只是你所做工作的一小部分（因为你使用其他技术栈），CSS是你最终希望在屏幕上显示的结果，所以值得合理去学习。

01

页面性能优化的利器 — Timeline

本文介绍了如何定位和分析Web性能问题中的重绘（Repaint）问题，通过介绍和实例分析，提供了在Timeline中查看和定位重绘问题的方法，以及通过Paint Profiler分析绘制细节，从而优化页面性能。

03

您找到你想要的搜索结果了吗？

是的

没有找到

网页中默认图片的几种解决方式

现在网页中图片随处可见，但避免不了有时会出现图片资源失败的情况，在谷歌浏览器中就会显示这样

02

浏览器的回流与重绘 (Reflow & Repaint)

当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。会导致回流的操作：

02

Rust API 指南：文档

每个公共模块，特型，结构，枚举，函数，方法，宏和类型定义都应具有一个示例，用于该功能的练习。

03

如何解决Xcode中的SIGABRT错误

一分钟，您的iOS应用程序可以在Xcode中正常运行，而下一分钟，它由于不可思议的SIGABRT错误而崩溃了。这是怎么回事！？

02

能用 CSS 能播放声音吗？[每日前端夜话0xF1]

翻译：疯狂的技术宅作者：Alvaro Montoro 来源：css-tricks

04

第五节关于浮动和清除浮动的解说，以及两个大坑不要踩

1.随便唠叨几句这一节课我会对浮动元素和怎样清除浮动相关的技术进行一个讲解，同时，我会列举一些我们前端开发中常见的坑，希望大家以后不要在这些地方犯错。在开始今天的课程之前，有一个东西我需要先讲一下，学网页，我认为最最重要的就是学布局，如果一个网页，你不去布局，学再多的div加css也无济于事，你就算学了再多的特效，又能怎么样？那么，何为布局呢？很简单，就是一句话，把元素放在你想要放的地方，这个就是布局了。对于一些后台管理系统，其实最最常见的还是table布局，包括现在很流行的前端框架 - easyui，

07

浏览器的回流与重绘 (Reflow & Repaint)

浏览器使用流式布局模型 (Flow Based Layout)。有了 RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。

01

浏览器之性能指标-CLS

如果想了解该系列文章(「浏览器底层原理&优化方案」)，可以参考我们已经发布的文章。如下是往期文章。

02

display:none和visibility:hidden的区别

空间占据上的区别如果用文字来描述，简单一句话就是display:none的元素是彻底消失，也就是说该元素的宽度、高度等各种属性值都将“丢失”，不在文档流中占位，浏览器也不会解析该元素；而visibility:hidden只是视觉上消失了，可以理解为透明度为0（opacity:0）的效果，它仍具有高度、宽度等属性值，因此在文档流中占位，浏览器会解析该元素。因此，我们可以知道display:none的元素隐藏后不占据额外空间，状态切换会产生回流和重绘，而visibility:hidden的元素虽然隐藏了，但

02

十人九问，回流和重排怎么优化？

节点的一些样式（背景色，边框颜色，文字颜色等）发生改变，只需要应用新样式绘制这个元素就可以了；发生机制：颜色 visibility: hidden，元素还是占了位置的

01

【🐯初\u002F中级前端面经】中小型公司面试时都会问些什么?

现在百度，阿里，腾讯，字节跳动等大厂的面试真题、面经随处可见。甚至还有多家教育机构专门针对这一部分设计了课程，但是中小厂的面经倒是很稀缺。

01

Web Components系列（三） —— 创建 Custom Elements

根据前面的介绍，我们知道根据是否继承基本 HTML 元素，可以将自定义元素分为两类“

01

Preact X 有什么新功能？

Preact是一个JavaScript库，它把自己描述为具有相同API的React的3kB快速替代方案。与类似的框架相比，它是具有最快的虚拟DOM库之一。你可以直接在你的React/ReactDOM代码中编写Preact，而无需更改工作流程或代码库。

05

Web 隐藏技术：几中隐藏 Web 中的元素方法及优缺点

在 Web 开发中出于多种原因，我们需要隐藏元素。例如，一个按钮应该在移动中可见，而在桌面视口中隐藏。或者，在移动设备上隐藏但要在桌面上显示的导航元素。隐藏元素时有三种不同的状态：

03

CSS3 做一个旋转的立体3D正方形动效核心【前端就业课第二阶段】CSS 零基础到实战（07）

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我，若你是真心学习可以送你书籍，指导你学习，给予你目标方向的学习路线，无套路，博客为证。

02

CSS(三)

本篇将讲解盒模型以及外边距折叠的相关知识。 “CSS 盒模型”是一组规则，用于定义如何呈现 Internet 上的每个网页。 CSS 将 HTML 文档中的每个元素视为一个”框”或”盒”，其中包含一系列不同的属性，用于确定它在页面上的显示位置。本章介绍了 CSS 框模型的核心组件: 填充，边框，边距，Block boxes 和 Inline boxes。可以将此视为 CSS 布局的”微观”视图，因为它定义了框的个别行为。在以后的章节中，我们将更多地了解 HTML 结构和 CSS 框模型如何组合以形成各种复杂的页面布局。

02

【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

承接上一篇：【CSS3进阶】酷炫的3D旋转透视。最近入坑 Web 动画，所以把自己的学习过程记录一下分享给大家。 CSS3 3D 行星运转 demo 页面请戳：Demo。（建议使用Chrome打开

07

深入学习下 CSS 间距相关的知识

https://ishadeed.com/article/spacing-in-css/

04

现代浏览器探秘(part3)：渲染 [每日前端夜话(0x12)]

这是关于浏览器内部工作原理系列的第3部分。之前，我们介绍了多进程架构和导航流程。在这篇文章中，我们将看看渲染器进程内部发生了什么。

01

【19】进大厂必须掌握的面试题-50个React面试

这是最有可能由面试官提出的常被问到的50个React面试问答。为了方便您访问，我对React面试问题进行了归类：

03

简单的聊一聊如何使用CSS的父类Has选择器

在CSS的世界中，选择器是驱动我们在网页上看到的美丽且响应式设计的工作的马。它们允许开发者根据元素的属性、位置和关系来选择和样式化HTML元素。

04

浏览器原理0. 前言1. 解析过程2. 渲染树2.1 CSS样式计算2.2 构建渲染树3. 布局（重要）4. 重绘与重排（重要）5. paint（绘制）6. composite（重要）7. 浏览器加载

身为前端，打交道最多的就是浏览器和node了，也是我们必须熟悉的。接下来我们讲一下浏览器工作原理和工作过程。从url到页面的过程，......，我们直接来到收到服务器返回内容部分开始。

04

分享 10 个常用且必须要掌握的 CSS 知识点

英文 | https://medium.com/@nasyxrakeeb2/10-css-pro-tips-code-this-not-that-codipher-f94558e82756

01

NumPy 初学者指南中文第三版：11~14

本章适用于希望使用 NumPy 和 Pygame 快速轻松创建游戏的开发人员。基本的游戏开发经验会有所帮助，但这不是必需的。

01

CSS 零基础到实战（05）布局、盒子模型、弹性盒子【前端就业课第二阶段】

流动布局有3种布局模型，分别是流动布局（常规默认时）、定位布局（relative）以及浮动布局，其中所述的流动布局、定位布局已在第一点讲解，接下来咱们查看浮动布局。

02

浏览器原理

身为前端，打交道最多的就是浏览器和node了，也是我们必须熟悉的。接下来我们讲一下浏览器工作原理和工作过程。从url到页面的过程，......，我们直接来到收到服务器返回内容部分开始。

02

让图片完美适应：掌握 CSS 的object-fit与object-position

在CSS中，我们可以使用 background-size 和background-position属性为背景图像设置大小和位置。而 object-fit 和 object-position 属性则允许我们对嵌入的图像（以及其他替代元素，如视频）做类似的操作。在本文中，我们将深入探讨如何使用 object-fit 将图像适应到特定的空间中，以及如何使用 object-position 在该空间中进行精确定位。

01

14个你可能不知道的JavaScript调试技巧

问题：我怎么才能收到你们公众号平台的推送文章呢？ 📷 熟悉工具可以让工具在工作中发挥出更大的作用。尽管江湖传言 JavaScript 很难调试，但如果你掌握了几个技巧，就能用很少的时间来解决错误和bug. 文中已经列出了14个你可能不知道的调试技巧，但是可能需要你牢记在心，以便在下次需要调试JavaScript代码时使用！一起来看大多数技巧都适用于Chrome控制台和Firefox, 尽管还有很多其他的调试工具，但大部分也适用。 1. debugger 除了, 是我们最喜欢、快速且肮脏的调试工具。执行代

09

JavaScript是如何工作的:渲染引擎和优化其性能的技巧

当你构建 Web 应用程序时，你不只是编写单独运行的 JavaScript 代码，你编写的 JavaScript 正在与环境进行交互。了解这种环境，它的工作原理以及它的组，这些有助于你够构建更好的应用程序，并为应用程序发布后可能出现的潜在问题做好充分准备。

03

框架究竟解决了啥问题？我们可以脱离它们吗？

大家好，我是 ConardLi，相信各位在 Web 开发的工作中已经离不开框架了，不知道有多少同学还用原生 JS 写代码呢？你有认真思考过框架究竟为我们解决了什么样的问题吗？脱离了这些框架，我们可以解决这些问题吗？我们来看看今天的文章：

03

【前端就业课第二阶段】CSS 零基础到实战（04）定位

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我，若你是真心学习可以送你书籍，指导你学习，给予你目标方向的学习路线，无套路，博客为证。

02

CSS魔法堂：display:none与visibility:hidden的恩怨情仇

还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗？是不是回答完display:none不占用原来的位置，而visibility:hidden保留原来的位置后，面试官就会心一笑呢？其实不止那么简单呢！本文我们将一起深究它俩的恩怨情仇，下次面试时我们可以回答得更出彩！

03

你可能不知道的「 CSS 容器查询」

背景今天PM过来问我: 蛋总，有些用户反馈他们屏幕太小了 , 需要滑动, 操作不方便。我们的系统能不能改成自适应布局啊? 我顿时虎躯一震：woc, 要把一个迭代了一年多的固定设计的产品，改成自适应布

03

研讨浏览器绘制和Web性能的注意事项

Web浏览器将HTML、CSS和JavaScript转换成已完成的过程视觉化表示是相当复杂的，涉及到很好的"魔术"。下面是一组简化的浏览器步骤：

03

前端面试之CSS重点概念精讲

今天，我们又开辟了一个新的篇幅 --「前端面试」。即是把一些平时常用的概念和工具方法整理和罗列，也算是一种变向的「未雨绸缪」。

03

Vue生命周期钩子简介[每日前端夜话0x8A]

作者：Nwose Lotanna 翻译：疯狂的技术宅来源：logrocket 在本文中，我们来学习可用于 Vue JS 工作流程中的所有hooks。 Vue Vue JS 是一个非常先进的 Ja

02

浏览器渲染原理解析建议收藏

Web页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么干活的：　　1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；　　2. 浏览器开始载入html代码，发现<head>标签内有一个<link>标签引用外部CSS文件；　　3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件；　　4. 浏览器继续载入html中<body>部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；　　5. 浏览器在代码中发现一个标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；　　6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；　　7. 浏览器发现了一个包含一行Javascript代码的<script>标签，赶快运行它；　　8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个

（style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；　　9. 终于等到了</html>的到来，浏览器泪流满面…… 　　10. 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下<link>标签的CSS路径；　　11. 浏览器召集了在座的各位

们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请　　求了新的CSS文件，重新渲染页面。
02

前端| 性能优化总结

HTTP1.1 如果要同时发起多个请求，就得建立多个 TCP 连接，因为一个 TCP 连接同时只能处理一个 HTTP1.1 的请求。在 HTTP2 上，多个请求可以共用一个 TCP 连接，这称为多路复用。同一个请求和响应用一个流来表示，并有唯一的流 ID 来标识。多个请求和响应在 TCP 连接中可以乱序发送，到达目的地后再通过流 ID 重新组建。

02

CSS 中关于 Overflow ，你需要了解的这些知识点！

在CSS中，当一个元素的内容太大而无法容纳时，我们可以对其进行控制。该元素的属性是overflow，它是overflow-x和overflow-y属性的简写形式。

02

前端基础篇之CSS世界

我想你每天写css代码有时候也会觉得很痛苦：这个布局的css怎么这么难实现！我也经常会有这种感觉，一个看似简单的布局总是要琢磨半天才能实现，偶尔还会出现一些怪异的超出理解的现象。这是因为我们对css只是大概知道个形，并没有看透css的本质。在同事的推荐下我阅读了张鑫旭老师的《css世界》，才发现css跟想象中的不太一样。本文为《css世界》个人总结笔记，为缩减篇幅丢弃了张老师冗余的小幽默，丢掉了些含金量较低的章节内容，因为ie已经被淘汰出局，所以有关css兼容性的地方也全部忽略不记，同时对个人觉得不易理解的地方加上了一些自己的理解和验证，所以错误之处还望指正。顺便推荐个好用的在线代码编辑工具，国内镜像站点，方便各位对本文实例进行测试。另外本文会随着作者对css的更深入理解而逐步更新，希望到最后能够文如标题展现出真正的css世界。

05

【春节日更】重排与重绘的知识点

重排（回流/reflow）：当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。

02

OAuth 详解<5> 什么是OAuth 2.0 隐式流, 已经不推荐了吗？

您最近可能听说过一些关于 OAuth 2.0 隐式流程的讨论。OAuth 工作组发布了一些关于隐式流程和基于 JavaScript 的应用程序的新指南，特别指出不应再使用隐式流程。在本文中，我们将了解隐式流程发生了什么变化以及原因。

04

5个你可能不知道的CSS属性

每年都有新的CSS属性被标准化，并在主流浏览器中可用。它们旨在使Web开发人员变得轻松，创造出新颖美丽的网站。

02

这15个HTML/CSS错误我不信你没犯过(网站规范)

之前帮我朋友检查他们的HTML/CSS项目时注意到一些错误在项目中重复出现。所以我决定写这篇文章，这样大家就可以对照检查你是否也会犯同样的错误。希望看完这篇文章对您有所帮助。

03

GDB调试

约定：对gdb的命令，如果有缩写形式，会在第一次出现的时候小括号内给出缩写，比如运行命令写成run(r)；本文中尖括号< >用来表达一类实体，比如<program>表示这个地方可以放置程序；中括号[]表示括号中的内容是可写可不写，比如[=<value>]，表示“=<value>”可以有也可以没有（<value>本身又是一类实体）；“|”表示或的关系。

01

Vue笔记(1)

假如我们过去要展示一个列表,有多少条数据就要写多少条li,然后再根据索引依次取出列表里的值放到li里面,这样非常麻烦,而且有许多重复的工作

02

带你走近AngularJS - 体验指令实例

带你走近AngularJS系列：带你走近AngularJS - 基本功能介绍带你走近AngularJS - 体验指令实例带你走近AngularJS - 创建自定义指令 ------------------------------------------------------------------------------------------------ 之前我们已经介绍了所有的AngularJS 基础知识，下面让我们通过实例来加深记忆，体验自定义指令的乐趣。手风琴指令我们展示的第一个例子是手

05

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭