展开

关键词

动态生成DOM元素高度及行数获取与计算方法

背景 在开发IM项目过程中,经常会有出现一些需要计算DOM高度,然后超出若干行隐藏等需求。很多时候,需要计算高度DOM元素都是动态生成,我们无法在数据渲染前获取到它高度。 技术方案 根据前端基本常识,在内存中未渲染DOM元素是无法获取到高度,因此我们有两个方向来解决这个难题: 通过字数对行数进行估算 将元素渲染后进行高度测算 实现方案 以下实现方案将根据上面所选择技术方案来进行实现 通过字数进行估算 方案 此方案无需多言,就是通过字数和每一行能够容下个数进行估算等。在项目最开始时,采用就是这个方案。具体实现代码太过简单,因此也不在此添加了。 为什么我们不使用display:none来实现上述效果呢?因为在使用了该属性后,window.getComputedStyle获取高度将变为auto。 理论上我们容器都应该为块级元素,否则计算高度意义也就不存在了。因此在容器clone时只需要留意即可,不需要重新指定。

99320

CSS 中你需要知道 auto 一切!

大家都说简历没项目写,就帮大家找了一个项目,还附赠【搭建教程】。 height: auto 说到height,情况就不一样了。元素高度等于默认值为auto内容。 具有flex:auto项目将根据其宽度和高度来调整大小,但它可以根据可用额外空间来增大或缩小。 在研究本文之前,不知道这一点! 在 Chrome 窗口中,滚动条总是显示出来,这是不正确和令人困惑行为。 通过使用auto关键字,我们可以确保滚动条不会显示,除非内容高度大于它容器。 根据MDN: 取决于用户代理。 如果检查了子项并转到computed styles,你猜下left属性值会是什么? ? left默认值为16px,即使没有设置。为什么会发生这种情况? 对于right和bottom属性,其默认计算值分别等于元素宽度和高度。 事例源码:https://codepen.io/shadeed/pe...

29830
  • 广告
    关闭

    腾讯云618采购季来袭!

    腾讯云618采购季:2核2G云服务器爆品秒杀低至18元!云产品首单0.8折起,企业用户购买域名1元起,还可一键领取6188元代金券,购后抽奖,iPhone、iPad等你拿!

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

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

    ) 行级格式化上下文 IFC只针对行级元素 【Grid formatting context】(GFC) 网格布局格式化上下文 我们可以在网格容器上定义网格行和网格列 【Flex formatting (这说明 BFC 中子元素不会超出他包含块,而position为 absolute 元素可以超出他包含块边界) BFC区域不会与 float 元素区域重叠 计算 BFC 高度时,浮动子元素也参与计算 那么怎么解决这个问题呢,这时候我们只要给其中一个元素创建一个 BFC 渲染区域就可以,为什么?我们来看 BFC 特性最后一条,每个 BFC 都是独立,不会与外界元素互相影响。 这个问题应该遇到会比较多点,子元素浮动之后撑不开父元素高度,这时候我们给父元素创建一个 BFC 就可以了。运用是 BFC 特性第5条,计算BFC高度时,浮动子元素也会计算。 我们这里给父元素添加一个 overflow:hidden 这时候父元素高度就会有了。 ? 其实还有其他一些由于 BFC 引发问题,由于时间原因,这里就不一一举例了。

    25330

    flex大法:一网打尽所有常见布局

    但实际上并没有这么简单,接下来简单测试一下: 容器元素body为800px高,上中下高度分别为100+1000+100=1200px,根据1:1:1flex-shrink计算总权重为1*100+1*1000 0了,我们可以随便给头和尾加一点文字,文字高度就会变成它们min-content,它们高度也就不会变成0: 所以这就意味着不要想着去精确计算,把它交给浏览器,浏览器会给你以最好方式呈现。 ,是不是这样margin:0 auto,margin-left和margin-right默认值是0,如果设置为auto,将会根据剩余可用空间来计算,这也是为什么能水平居中,因为左右都想尽量多,那么就只能平分了 order属性,这个属性可以让flex子元素按order数值大小来排序显示,我们可以默认左边设为2,右边设为3,然后在偶数行再给右边设为1,自然就跑到前面去了: 网格布局 此网格非grid布局 ,现在连让文字居中都是用flex,无情抛弃了text-align和line-height。

    3810

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

    元素高度元素宽度计算如下: 总高度高度 + 上下内边距 + 上下边框 + 上下边距。 总宽度:宽度+左右内边距+左右边框+左右外边距。 CSS box-sizing 属性: 元素高度和总宽度由称为 box-sizing CSS 属性定义。CSS 属性 box-sizing 定义元素高度和宽度。 这是一个有用功能,有时可以成为特定 CSS 问题最佳解决方案。CSS calc() 函数可以进行基本数学计算,例如通过求解数学表达式来计算 HTML 元素宽度。 CSS calc() 函数示例: 计算 HTML div 元素宽度。 通常用冒号 (2:3) 分隔高度和宽度表示。在 2:3 示例中,元素宽度为 2 个单位,高度为 3 个单位。 在 CSS 中,它宽度和高度由正斜杠 (2/3) 分隔。

    6610

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

    1.清除浮动 浮动元素会影响其兄弟元素位置,并可能导致父元素高度塌陷(假如父元素没设置高度),因此需要清除浮动(带来影响)。 父元素高度塌陷情况:子元素浮动后脱离了文档流,未设置高度元素在形式上表现为 0 高度,设置了 clear:both 元素为了满足其左右两边没有浮动元素这个条件,只能自身下移,从而带动了父元素高度撑开 那么为什么除了 clear:both 之外,其他方法也能清除浮动呢?因为那些方法大都触发了 BFC,而 BFC 是可以清除浮动,这个后面再介绍。 计算规则: 子元素和父元素上边界重叠,并且以子元素 margin-top 作为父元素 margin-top 整体移动。 4.1.2 IFC: IFC line box 高度由其包含行内元素中最高实际高度计算而来(不受到竖直方向 padding/margin 影响)。

    65410

    基础渲染系列(六)——凹凸

    可以通过将高度差乘以δ或通过将切线中δ替换为1来实现。 ? ? (缩放高度) 看起来开始有点样子了,但是照明不正确,太黑了。那是因为我们直接使用切线作为法线。 2 法线贴图 当凹凸贴图起作用时,我们需要执行多个纹理样本和有限差分计算。这似乎是一种浪费,因为生成法线应该始终相同。为什么所有这些工作每一帧都要做一遍呢? 此因子存储为T额外第四部分。 为什么将-1存储在切向量中? 创建具有双边对称性3D模型(例如人和动物)时,一种常见技术是左右镜像网格。这意味着你只需要编辑网格一侧。 第一个为我们提供了对网格物体资产引用,而第二个将创建副本。 为什么MeshFilter.mesh属性创建一个副本? 假设你有一个使用网格物体资产游戏对象。你只想在运行时调整该游戏对象网格。 然后,你就需要创建特定于该对象网格物体资产本地副本。这就是为什么MeshFilter.mesh创建副本原因。 ? 首先,我们将显示法线向量。从网格获取顶点位置和法线,然后使用它们绘制线。

    86130

    响应式布局,你需要知道这些

    设备像素与CSS像素区别是什么? EM,REM 计算规则是什么?实际应用中如何选择? 什么是视口 viewport,布局视口,视觉视口,理想视口区别? 百分比单位和视口单位计算规则是什么? 所以它计算规则比较简单, 1 rem 就等于根元素 html 字体大小, html { font-size: 14px; } p { font-size: 1rem; /* 1rem = 这里只需要记住一点,百分比是相对于父元素宽度和高度计算。 到这里,相信你已经掌握了响应式布局里常用所有单位。接下来,我们介绍弹性盒和栅格,它们都不是单位,而是一种新布局方案。 FlexBox 基于轴线,只能解决一维场景下布局,作为补充,W3C 在后续提出了网格布局(CSS Grid Layout),网格将容器再度划分为 “行” 和 “列”,产生单元格,项目(子元素)可以在单元格内组合定位 为了强调这些规则重要性,甚至说过,“JS 和 CSS 是页面上最重要部分”。几个月后,意识到这是错误。图片才是页面上最重要部分。

    20220

    Android开发笔记(二十二)瀑布流网格WaterfallGridView

    再比如像新闻摘要,每篇摘要字数都不一样,为了把文字显示完全,也需要对每个网格自适应高度,字数多网格分配较小高度,字数较多网格分配较大高度。 如果是ListView,每行高度一样,一行内每个元素长度是可以自定义,但每列元素长度必须一样,所以改造ListView效果也很有限。 ,可是瀑布流网格视图是已经明确了,只需我们对它们重新组合排列即可,所以这里我们选择在onLayout方法中放置这些网格元素网格元素从适配器中getView获得)。 比如网格内容动态变化导致网格高度也随之变化时,StaggeredGridView在第一行网格展示上就存在高度不对齐情况,下面截图便反映了StaggeredGridView这个问题。 该控件比StaggeredGridView要来稳定,即使网格内容会动态变化,它也能重新计算网格高度并重新布局排列,不会出现StaggeredGridView那种首行布局错乱问题。

    71660

    有限单元法重要知识点

    有限元法求解弹性力学问题基本步骤,为什么应力解答程度低于位移解答精度? 简述单元刚度矩阵和整体刚度矩阵性质 单元刚度矩阵性质48 1单元刚度矩阵每一列元素表示一组平衡力系,对于平面问题,每列元素之和为零。 2. 单元刚度矩阵中对角线上元素为正。 四、 有限元网格划分过程中应注意哪些问题? 1. 网格数目 网格数目的多少将影响计算结果精度和计算规模的人小。一般来讲,网格数目增加,计算 精度会仃所进步,但同时计算规模也会增加。 实际应用时可以比较两种网格划分计算结 果,假如两次计算结果相差较大,可以继续增加网格,相反则停止计算。 2. 网怡疏密 网格疏密是指在结构不同部位采用人小不同网格,这是为了适应计算数据分布特点。 ABAQUS长于非线性有限元分析,有限单元法原理与应用朱伯芳第三版町以分析复杂固体力学和结构力学系统,特别是 能够驾驭非常庞人复杂问题和模拟高度非线性问题。

    10330

    【Hello CSS】第六章-文档流与排版

    线盒(line box)高度:由 line-height计算结果决定。 基线(baseline) 线盒(line box) 高度由 line-height计算结果决定。 如上图所示,我们看到小写字母x位置,它上下边缘就是我们基线(baseline),但下边缘才是我们日常使用属性值。顺便一提,CSS单位 ex便是指这个字母x高度。 属性值不为 "normal"元素, filter值不为 none 元素, perspective值不为 none 元素, isolation 属性被设置为 isolate 元素, position 一些常用灵活尺寸 属性 定义 fr 可伸缩长度单位,网格容器中可用空间一等份。 auto 自由分配,由具体情况决定。 minmax() 定义了一个长宽范围闭区间。 由于鱼头水平有限,文笔有限,如果各位在文章中发现有任何不合理,不正确地方,还烦不吝指出,我会非常感谢;如果通过文章有任何想法或疑问,也希望各位能积极留言,我们互相探讨;如果通过本系列文章有所收获,

    16310

    九张动画图回顾 Web 设计 25 年历史

    如果你想知道为什么CSS这么重要,为什么Flash会逐渐淘汰,这些动画图或许能让你一窥究竟。 ? 网页设计单色时代,约1989年。 尽管Flash也曾风靡一时,但是现在几乎已经被HTML5干掉了,但是在1996年,它代表了网页设计一个新高度:能够让设计师按他们自己方式使得页面生动起来。 这也是Froont飞出页面和开场动画等黄金时代。但是,Flash会占用计算机大量处理资源,这也使得它成为一种特别不友好技术,尤其是对于移动设备例如笔记本电脑和智能手机而言。 ? 一开始设计人员想到是使用一种网格系统,这种网格系统可以根据设备屏幕尺寸将网页分割成若干列。 ? 如果你喜欢这些动画,欢迎为点赞。

    33531

    中文排版二三事

    当然对于固定高度元素还可以用box-sizing限制死高度。 最后你还会遇到浏览器对于em单位计算不精确导致1像素偏差。 本来也打算基于em来写entry.css,结果总是遇到chrome浏览器在处理计算bug。后来干脆换成了px,当然也损失了对于缩放情况优化。 外部资源 更多会遭遇麻烦是外部资源高度问题。 比如你文章中可以引入图片,恰巧你又不知道高度的确定值,那么很可能图片会打破旋律。对此没有什么特别好办法,使用js是能想到唯一方法。 理论上可以计算:(28-14)/2 + 14 + (28-10)/2 = 30,但在safari上实际得到结果确是29px。对此还没搞明白为什么。 后来找到解决方案是使用“缩放因子”而不是绝对数值,即line-height:2。 当然如果有行内元素行内块高度超过基础数值也会打破旋律。对于这种情况还没有比较好解决方案。

    26810

    CSS进阶03-定位体系,格式化上下文,常规流

    BFC就是页面上一个隔离独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。 计算BFC高度时,浮动元素也参与计算。 如何生成BFC: 根元素,即HTML元素。 BFC常见用途: 常见多栏布局,结合块级别元素浮动,里面的元素则是在一个相对隔离环境里运行。 防止margin折叠。 防止高度塌陷。 4.2. IFCline box(线框)高度由其包含行内元素中最高实际高度计算而来(不受到竖直方向padding/margin影响)。 垂直居中:创建一个IFC,用其中一个元素撑开父元素高度,然后设置其vertical-align:middle,其他行内元素则可以在此父元素下垂直居中。 4.6 RFC RFC英文全称是:Ruby Formatting Contexts。这一块暂时没去研究。

    28810

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

    这些真的不是YY出来,W3C 里真的有这么多概念好吗!!!感觉进坑了啊!!! BFC就是页面上一个隔离独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。 计算BFC高度时,浮动元素也参与计算。 应用场景 闭合浮动:浮动区域不叠加到BFC区域上 防止与浮动元素重叠 防止margin collapse float 元素高度塌陷 ... IFC 中 line box 高度由 CSS 行高计算规则来确定,同个 IFC 下多个 line box 高度可能会不同(比如一行包含了较高图片,而另一行只有文本)。 垂直居中:创建一个IFC,用其中一个元素撑开父元素高度,然后设置其 vertical-align:middle,其他行内元素则可以在此父元素下垂直居中。

    46650

    5 个 CSS 新功能

    其余网格项目保持了正常网格流,第四行也出现在布局底部。 但是,由于我们仅使用grid-template-rows属性定义了三行,因此第四行没有预设值,因此仅取其内容自然高度。 contain-intrinsic-size 属性 contains-intrinsic-size属性定义激活大小限制元素显式宽度和高度,这意味着元素大小不受子元素大小影响。 设置明确宽度和高度旨在防止这些元素在某些情况下崩溃为零 为了实现content-visibility潜在好处,浏览器需要应用大小限制,以确保内容呈现结果不会被任何方式影响元素大小。 如果元素没有在常规块布局中指定高度,则其高度为0。 这可能不是理想,因为滚动条大小会发生变化,这取决于每个具有非零高度内容。 已收录,有一线大厂面试完整考点、资料以及系列文章。

    5830

    相关产品

    • 图数据库 KonisGraph

      图数据库 KonisGraph

      图数据库KonisGraph(TencentDB for KonisGraph)是基于腾讯在社交网络、支付、游戏和音乐等业务场景超大规模图数据管理的经验积累,为您提供的一站式高性能海量图数据存储、管理、实时查询、计算和可视化分析的数据库服务。支持属性图模型和TinkerPop Gremlin查询语言,帮助用户快速完成对图数据的建模、查询和分析;支持百亿级节点、万亿级边的超大规模图数据中关联关系的查询分析。广泛适用于社交网络、金融支付、安全风控、知识图谱、广告推荐和设备拓扑网络等具有海量关系数据的场景。

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      扫码关注云+社区

      领取腾讯云代金券