开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如果父display:block，Wavesurfer不渲染

如果父元素的display属性设置为block，而Wavesurfer音频可视化库无法渲染的原因可能有以下几种可能性：

元素尺寸问题：Wavesurfer需要一个具有明确尺寸的容器来渲染音频可视化效果。如果父元素的display属性设置为block，但没有设置具体的宽度和高度，可能会导致Wavesurfer无法正确渲染。解决方法是为父元素设置合适的宽度和高度，可以使用CSS的width和height属性来设置。
元素隐藏问题：如果父元素的display属性设置为block，但同时设置了display:none或visibility:hidden，那么Wavesurfer也无法渲染。这是因为元素被隐藏了，无法显示音频可视化效果。解决方法是确保父元素没有被隐藏，可以通过修改CSS的display或visibility属性来显示元素。
元素位置问题：如果父元素的display属性设置为block，但父元素的position属性设置为fixed或absolute，可能会导致Wavesurfer无法正确渲染。这是因为position属性会改变元素的定位方式，可能会影响到Wavesurfer的渲染位置。解决方法是将父元素的position属性设置为static或relative，以确保元素按照正常的文档流进行布局。

总结起来，如果父元素的display属性设置为block，但Wavesurfer无法渲染，可能是由于元素尺寸问题、元素隐藏问题或元素位置问题导致的。需要检查并修复这些可能的原因，以确保Wavesurfer能够正确渲染音频可视化效果。

腾讯云相关产品和产品介绍链接地址：

腾讯云音视频处理（https://cloud.tencent.com/product/mps）
腾讯云云服务器（https://cloud.tencent.com/product/cvm）
腾讯云云原生应用引擎（https://cloud.tencent.com/product/tke）
腾讯云数据库（https://cloud.tencent.com/product/cdb）
腾讯云人工智能（https://cloud.tencent.com/product/ai）
腾讯云物联网（https://cloud.tencent.com/product/iotexplorer）
腾讯云移动开发（https://cloud.tencent.com/product/mobdev）
腾讯云对象存储（https://cloud.tencent.com/product/cos）
腾讯云区块链（https://cloud.tencent.com/product/baas）
腾讯云元宇宙（https://cloud.tencent.com/product/metaverse）

相关搜索:display: block；不执行此工作 document.getElementById().style.display = 'block'；不工作 React:更改父状态而不渲染子状态 Quarkus不生成，如果有父级当一个按钮被点击时，如果一个特定的'div‘是'display:block’，那么父'div‘是如何淡出的？当父状态更改时，React不渲染子对象为什么，如果我应用display inline-block属性，我的HTML元素是从底部开始的？如果添加已编辑的对象，则反应不渲染如果在Angular 9中没有子组件，如何在父元素上设置display:none？如果父pom有一些变化，则构建子模块而不构建父模块如果子对象不包含使用Javascript的注释，则删除父对象当父组件注入具有不同值的道具时，子组件不触发渲染如果更新父dom重复数据，则嵌套子dom重复不更新 Sequelize:如果父模型有相关联的子模型，则查询包括父模型的数据；不返回子模型的数据在执行plsql block返回查询结果时，如果没有找到DB.When数据中存在的数据，则查询结果不返回任何异常 html "display: table“如果我们不设置高度，我们知道它看起来是一样的。但它看起来和我所知道的不一样在模糊/焦点事件中，如果下一个焦点在同一个父元素中，如何才能使模糊不触发？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS 基础系列：从清除浮动和margin塌陷问题谈BFC

浮动的元素会影响其兄弟元素的位置，并可能导致父元素的高度塌陷（假如父元素没设置高度），因此需要清除浮动（带来的影响）。

01

如何把控css的方向感

在介绍完问题学习法之后，进入我们今天的主题，接下来我会介绍css的一些底层的知识和比较诡异的现象，借此来让大家对css有更深入的理解。

01

css必知的几个底层知识和技巧

问题学习法：带着问题去学习，有利于集中注意力，目的明确，这既是有意学习的要求，也是发现学习的必要条件。心理学家把注意分为无意注意与有意注意两种。有意注意要求预先有自觉的目的，必要时需经过意志努力，主动地对一定的事物发生注意。它表明人的心理活动的主体性和积极性。问题学习法就是强调有意注意有关解决问题的信息，使学习有了明确的指向性，从而提高学习效率。

02

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

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

03

css div高度设置100%如何生效！

然后他发现这个

高度永远是 0，哪怕其父级<body>塞满了内容也是如此。事实上，他需

00

详解清除浮动的多种方式（clearfix）

版权声明：本文为博主原创文章，欢迎转载，转载请注明出处。 https://blog.csdn.net/FE_dev/article/details/68954481

06

小结BFC的基本知识与应用

在写css样式时，可能是添加了一个样式后就达到了预期效果。有没有想过，是我们在不经意间触发了什么，帮助我们达到了效果？本文就快速介绍下css样式中经常使用的BFC，主要包括以下几个方面：

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

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

03

常用页面布局分享

1. 页面常用布局常用的页面布局方式主要有：浮动，弹性盒子，定位，设置表格模式，行内与块级相结合。布局方式 Float flex position table block&Inline-block 兼容性 IE4 IE10 IE7 IE8 IE8 注意清除浮动设置自适应子容器与父容器嵌套使用,各中关系内容会自适应效果有局限性，行内块之间有缝隙 1.1.浮动布局（Float）值描述 left 元素向左浮动。 right 元素向右浮动。 none 默认值。元素不浮动，并会显示在其在文本中出现

08

2020年还问position:absolute，玩点花样？

CSS的position属性常常被面试官拿出来考校同学的前端基本功，分别回答几个属性值是static、absolute、relative、fixed、sticky并解答一些基本特性（直接百度得到的）可以算及格，想要进一步catch their eyes，需要更深入的理解，这里视角汇聚到absolute上，看看这个最具代表性的值能做多少文章。

01

面试官想知道你多了解position:absolute | 掘金技术征文

CSS的position属性常常被面试官拿出来考校同学的前端基本功，分别回答几个属性值是static、absolute、relative、fixed、sticky并解答一些基本特性（直接百度得到的）可以算及格，想要进一步catch their eyes，需要更深入的理解，这里视角汇聚到absolute上，看看这个最具代表性的值能做多少文章。

02

【前端攻略】最全面的水平垂直居中方案与flexbox布局

最近又遇到许多垂直居中的问题，这是Css布局当中十分常见的一个问题，诸如定长定宽或不定长宽的各类容器的垂直居中，其实都有很多种解决方案。而且在Css3的flexbox出现之后，解决各类居中问题变得更加容易了。搜了搜园子内关于flexbox的文章觉得很多不够详尽，故想借介绍flexbox的同时好好总结一番各类垂直居中的方法。由简至繁：行内元素的水平居中要实现行内元素（、等）的水平居中，只需把行内元素包裹在块级父层元素（

等）中，并且在父层元素CSS设置如

04

Django模板标签

==, !=, >=, <=, >, < and, or, not, in, not in这些操作符都可以在模板中使用

02

HTML+CSS高级

第一章一、内联块 display: inline-block; 1、特征： 1.1 块级元素在一行显示（得到内联元素的属性） 1.2 内联元素支持宽高（得到块的属性） 1.3 没有宽度的时候，内容撑开宽度（得到内联元

06

清除浮动的原理剖析

常用的清除浮动的几种方法总结下：　　1，手动设置一个标签（在浮动元素下方），然后对其设置clear属性　　　　2，给浮动元素设置 :after伪类，创建块元素，设置clear属性　　3，给父元素设置浮动　　4，给父元素设置overflow设置非visible值（auto，hidden）　　5，给父元素的display设置为table-cell 　　7，在ie6,7中，设置zoom或者width，height来触发haslayout，使父元素包含浮动元素原理剖析：　　1,2方法之所以可以成功，是

09

前端面试题2（CSS）

对BFC规范(块级格式化上下文：block formatting context)的理解？

01

Web前端进阶高薪必会的54个CSS重难点知识梳理（1）

本次我把CSS中的重难点整理出来，总共54个核心知识点，供大家复习，希望能帮到大家。这些重难点是进阶高薪必需要掌握的知识点，同时也是面试必问的内容。

00

CSS中各种布局的背后(*FC)

CSS中各种布局的背后，实质上是各种*FC的组合。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 FFC 和 GFC。盒模型(Box Model) 上图为W3C标准盒模型，另外还有

05

理解CSS布局和块格式化上下文

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

03

【面试题解】CSS布局，定位布局，浮动布局，BFC,IFC,FFC,GFC

标准文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

03

CSS面试题

2.利用css3新增属性transform: translate(-50%,-50%);

04

【愚公系列】2023年03月其他-Web前端基础面试题（CSS_42道）

CSS 是层叠样式表（Cascading Style Sheets）的简写，它是一种用于定义网页和网页应用程序外观的标准格式语言。

02

最近遇到的兼容性问题和适配问题

JS： IE： 1、不能添加监听标准事件，添加polyfill initEvent: function initEvent(dom, eventName, callback) { if (!dom || !eventName || !callback) return; if (document.addEventListener) { // 一般浏览器 dom.addEventListener(eventName, callback, false);

09

css面试点二：BFC（块级格式化上下文）+常见布局方案

在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

02

【CSS】309- 复习 CSS盒模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。 CSS盒模型：标准模型 + IE模型

03

面试官：CSS 面试题集锦

z-index 属性设置元素的堆叠顺序，拥有更高的堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

03

你是否彻底了解margin属性？

写css，你少不了与margin打交道。你真的了解margin吗？你知道margin有什么特性吗？你知道什么是垂直外边距合并？margin在块元素、内联元素中的区别？什么时候该用padding而不是margin？你知道负margin吗？你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现的bug有哪些？……

02

每天10个前端小知识【Day 16】

改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。

01

块级格式化上下文

BFC块级格式化上下文Block Formatting Context，是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域，是用于布局块级盒子的一块渲染区域，并且与这个区域的外部毫无关系，是一个独立的区域，是一个环境。

01

CSS中用 opacity、visibility、display 属性将元素隐藏的对比分析

opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见。 opacity、visibility、display 这三个属性分别取值 0、hidden、none 都能使元素在页面上看不见，但是他们在方方面面都还是有区别的。

01

CSS中的各种格式化上下文-FC（BFC、IFC、GFC、FFC）

FC是Formatting Context的缩写，中文名：格式化上下文。是 W3C在CSS2.1 规范中的一个概念。

01

《CSS 世界》读书笔记-流与宽高

1. 前言在学习 CSS 的过程中，我经常会被数不清的属性和特性弄得晕头转向。作为前端新手，经常会坐在显示器前花很多很多时间去 “追” 视觉稿，也经常会在 “为什么这个属性不生效” 和 “为什么这个属性生效了但是不是我想要的效果” 之间摇摆，直到我开始看张鑫旭老师的《CSS 世界》，才开始渐渐地走进 CSS 世界，才明白原来 CSS 的背后也是有一套 “物理” 和 “魔法” 法则。遵循着法则，很多问题也许会迎刃而解。因为在阅读本书 CSS 的 “流” 相关内容时让我有了一种恍然大悟的感觉，所以才有了此篇

02

2021前端面试高频 HTML + CSS

当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。

04

CSS 水平居中与垂直居中的16个方法

元素高度可以动态改变, 不需再CSS中定义, 如果父元素没有足够空间时, 该元素内容也不会被截断。

01

CSS(五)

从这一篇开始，将要介绍 CSS 中最重要的两个知识 - 浮动和定位。前面几篇关于 CSS 的知识，只是讲解了一个元素作为一个个体时的样式，从这篇布局内容开始，将要介绍多个元素放在一起，从总体角度确定每个元素的位置。布局分类:

02

前端必知必会-BFC案例剖析

在说 BFC 之前，我们先来了解一下标准文档流，标准文档流是指在页面中所有的元素按照从左到右，从上到下这样的一个顺序来进行排列的。

03

CSS补充

文档流（定位流，普通流，浮动流） 1、普通流定位 static（默认方式）普通流定位，又称为文档流定位，是页面元素的默认定位方式页面中的块级元素：按照从上到下的方式逐个排列页面中的行内元素：按照

01

59道CSS面试题(附答案)

CSS选择器的权重预示着CSS选择器样式渲染的先后顺序，元素样式渲染时，权重高的选择器样式会覆盖权重低的选择器样式。

05

Web 前端 | 面试题 | 笔记

position属性取值：static(默认)、relative、absolute、fixed、inherit、sticky。 float属性取值：none(默认)、left、right、inherit。 display属性取值：none、inline、inline-block、block、table相关属性值、inherit。固定定位 fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。（脱离文档流）相对定位 relative：如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。绝对定位 absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。（脱离文档流）粘性定位 sticky：元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。默认定位 Static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 inherit: 规定应该从父元素继承 position 属性的值。

04

深入理解和应用Float属性

一、Float的特性 1. 应用于文字围绕图片 2. 创建一个块级框 3. 多列浮动布局 4. 浮动元素的宽度、高度自适应，但可以设置其值。二、核心解决的问题文字围绕图片：img标签与多个文本标签放置在一个容器中，如果img浮动，文本标签会围绕图片。

001文件内容文件内容文内容文件内容
文件

第九十六期：scss中的选择器

当我们编写scss代码的时候，我们需要意识到，scss代码会编译成css代码。scss并不能保证css代码的可读性以及可维护性。

03

关于BFC理解

在进入BFC话题前，先来捋一下常见的定位方案，定位方案是控制元素的布局，主要有三种常见的方案：

03

「资深前端工程师总结」前端面试知识点大全—CSS篇

display:none使用后，元素的宽度，高度都会丢失，视为不存在不加载；元素原来占据的空间位置不保留；产生回流和重绘；

03

「资深前端工程师总结」前端面试知识点大全——html篇

定时让网页在3秒内跳转到mozilla首页(http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。)

03

知识整理之CSS篇

CSS篇主要从CSS兼容、CSS3新特性、CSS选择器、高频属性、高频布局、高频知识点、性能优化等方面进行归纳。如对HTML知识点感兴趣，可移步至：知识整理之HTML篇

02

Vue2.x-01点击按钮弹出子Vue组件，遍历JSON展示数据

需求：需要在先有的页面上增加一个“查看处理人”的按钮，点击查看处理人，弹出子组件，将参数传递给子组件，初始化的时候created方法中发送请求到后台，接收到后台返回的JSON数据后，解析JSON展示到页面上。

03

CSS魔法堂：说说Float那个被埋没的志向

前言定位系统中第一难理解就是Normal flow，而第二就非Float莫属了，而Float难理解的原因有俩，1. 一开头我们就用错了；2. 它跟Normal flow靠得太近了。本文尝试理清Fl

08

BFC

display 属性为 block, list-item, table 的元素，会产生BFC.

01

兼容问题（下）

每个浏览器不同的内核，不同的处理引擎，不同的渲染引擎就会导致写同一条样式的时候出现差异这个现象叫做做兼容

02

前端面试题归类-css

网页看着不方便，想要文档可以私聊我。要是有错别字和错误的地方，请各位大佬直接指出，谢谢啦！！

04

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭