记录--居中为什么要使用 transform?

这篇具有很好参考价值的文章主要介绍了记录--居中为什么要使用 transform?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

记录--居中为什么要使用 transform?

引言

居中是我们在前端布局中经常会遇到的问题,其中包括水平居中和垂直居中。居中的方法很多,比如说水平居中可以使用text-align: center或者margin: 0 auto等等来实现,垂直居中则需要使用一些其它的特殊的技巧。比如说常见的做法是使用transform来实现垂直居中,margin-top或者top属性,或者使用弹性布局。

transform的优点

那么我们为什么要使用transform来实现垂直居中呢?

因为transform属于合成属性,而margin-toptop属于布局属性。对于合成属性,浏览器会将被动画元素放入一个独立的层中进行动画,而不会对整个页面进行重绘,这可以提高页面的性能。而对于布局属性,任何一点的变化都可能导致整个页面的重排和重绘,这会对页面的性能产生很大的影响。

如果我们使用margin-top或者top来实现垂直居中,那么每次元素发生变化时,浏览器都会对整个页面进行重排和重绘,这会导致页面的性能受到很大的影响。而使用transform来实现垂直居中,则可以将元素放入一个独立的层中进行动画,避免了对整个页面的重排和重绘,从而提高了页面的性能。

下面是一个使用transform实现垂直居中的示例代码:

<div class="container">  
  <div class="box">  
    <p>这是一段文字</p>  
  </div>  
</div> 

.container {  
  position: relative;  
  height: 300px;  
  background-color: #eee;  
}  
   
.box {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
}  
 

在上面的代码中,我们首先将外层容器设置为position: relative,并指定了一个固定的高度。然后,我们将内层元素设置为position: absolute,并使用top: 50%left: 50%将其定位到父元素的中心位置。最后,我们使用transform: translate(-50%, -50%)来将元素向左上方移动自身宽度和高度的一半,从而实现了垂直居中的效果。

使用transform来实现垂直居中可以避免对整个页面的重排和重绘,从而提高页面的性能。所以在实际的开发中,我们应该尽可能地使用合成属性来进行动画和布局,避免使用布局属性,从而提高页面的性能和用户体验。

浮动

对于浮动居中,它在进行元素的水平居中时,可能会对页面进行重排。这是因为浏览器需要对元素的左右外边距进行计算,并将元素放置在父容器中间。这个过程会导致浏览器对整个页面进行重排,从而可能影响页面的性能。此外,浮动布局实现多列布局,可能会导致多列高度不一致,需要进行额外处理。

但是,在某些情况下,浮动居中并不会对页面进行重排。例如,如果我们将元素的宽度设置为固定的像素值,那么浏览器就可以很容易地计算出元素的左右外边距,并将元素放置在父容器中间,而不需要对整个页面进行重排。在这种情况下,浮动居中的性能表现可能会比较好。

所以说浮动居中可能会对页面进行重排,但在某些情况下,它的性能表现可能会比较好。在实际开发中,我们则应该根据具体的需求和情况来选择。

弹性

弹性布局大家应该也比较熟悉了,用弹性只有一次和无数次,在很多时候使用弹性布局真的很舒服,所以我们关于弹性布局就多描述一些。

弹性布局的优点在于它可以方便地实现弹性盒子容器中弹性盒子项目的伸缩和排列,但是在使用弹性布局时,如果频繁修改弹性容器的属性或弹性项目的排列顺序,就可能会触发页面重排和重绘,从而影响页面的性能和用户体验。

导致原因

具体来说,以下几种情况可能会导致弹性布局的页面重排和重绘:

  1. 修改弹性容器的属性

如果修改弹性容器的属性,如flex-direction、justify-content、align-items等,会影响弹性盒子项目的排列和布局,从而导致页面重排和重绘。

  1. 修改弹性项目的属性

如果修改弹性项目的属性,如flex-grow、flex-shrink、flex-basis等,会影响弹性盒子项目的伸缩和尺寸,从而导致页面重排和重绘。

  1. 修改弹性项目的顺序

如果修改弹性项目的排列顺序,会影响弹性盒子项目的排列和布局,从而导致页面重排和重绘。

优化

以为了避免弹性布局的页面重排和重绘,我们可以采取一些优化措施,如:

  1. 尽可能减少修改弹性容器和弹性项目的属性和顺序。

  2. 将多个弹性容器和弹性项目尽可能合并为一个弹性容器和弹性项目,从而减少页面重排和重绘。

  3. 将弹性容器和弹性项目的尺寸设置为固定值,从而减少页面重排和重绘。

所以说,虽然弹性布局具有灵活和方便的优点,写起来很舒服,但是在使用时我们需要注意优化,减少页面重排和重绘,以提高页面的性能和用户体验。

本文转载于:

https://juejin.cn/post/7303587697100013606

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 记录--居中为什么要使用 transform?文章来源地址https://www.toymoban.com/news/detail-746797.html

到了这里,关于记录--居中为什么要使用 transform?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 记录--为什么要使用 package-lock.json?

    随着 JavaScript 在现代软件开发中的日益重要地位, Node.js 生态系统中的 npm 成为了不可或缺的工具。在 npm 管理依赖的过程中, package-lock.json 文件的作用日益凸显。本文将深入探讨为什么要使用 package-lock.json ,以及它在项目开发中的重要性。 在讨论 package-lock.json 的重要性之

    2024年02月11日
    浏览(38)
  • 记录--为什么 export 导出一个字面量会报错,而使用 export default 就不会报错?

    其实总的来说就是 export 导出的是变量的句柄(或者说符号绑定、近似于 C 语言里面的指针,C++里面的变量别名),而 export default 导出的是变量的值。 需要注意的是:模块里面的内容只能在模块内部修改,模块外部只能使用。esModule在语法层面做了一层 浅层 的保护(即将i

    2024年01月17日
    浏览(39)
  • 【AI学习】Transformer的Token嵌入表示为什么那么长

    有朋友问,BERT等大模型的参数量怎么计算的?这个问题,李沐在BERT那篇论文中讲过,主要包括几部分。1、词嵌入:token数量乘以token表示的向量长度,就是 V H;2、注意力计算没有参数,只计算多头注意力的投影矩阵,三个输入的权重矩阵,每个矩阵参数= H (H/头数) 头数

    2024年04月25日
    浏览(42)
  • 大数据面试题:说下Spark中的Transform和Action,为什么Spark要把操作分为Transform和Action?

    面试题来源: 《大数据面试题 V4.0》 大数据面试题V3.0,523道题,679页,46w字 可回答:Spark常见的算子介绍一下 参考答案: 我们先来看下Spark算子的作用: 下图描述了Spark在运行转换中通过算子对RDD进行转换。 算子是RDD中定义的函数,可以对RDD中的数据进行转换和操作。 输

    2024年02月13日
    浏览(38)
  • 记录--为什么没有人能讲清楚 BFC?

    CSS 规范(英文) | 中文翻译 浮动,绝对定位的元素,非块盒的块容器(例如inline-blocks,table-cells和table-captions),以及’overflow’不为’visible’的块盒(当该值已被传播到视口时除外(except when that value has been propagated to the viewport))会为其内容建立新的块格式化上下文 在一个

    2024年02月05日
    浏览(47)
  • 记录--post为什么会发送两次请求?

    在前段时间的一次面试中,被问到了一个如标题这样的问题。要想好好地去回答这个问题,这里牵扯到的知识点也是比较多的。 那么接下来这篇文章我们就一点一点开始引出这个问题。 在浏览器中,内容是很开放的,任何资源都可以接入其中,如 JavaScript 文件、图片、音频

    2024年02月12日
    浏览(51)
  • 记录--为什么推荐用svg而不用icon?

    使用背景: 1.因为svg图标在任何设备下都可以高清显示,不会模糊。而icon会在显卡比较低的电脑上有显示模糊的情况 2.svg图标在页面render时 速度会比icon稍微快一点 3.实现小程序换肤功能 ;方案见:www.yuque.com/lufeilizhix… SVG基础可参考:www.yuque.com/lufeilizhix… inline svg是目前前

    2024年02月08日
    浏览(50)
  • [20231013]为什么刷新缓存后输出记录顺序发生变化3.txt

    [20231013]为什么刷新缓存后输出记录顺序发生变化3.txt --//当年提的问题,链接http://blog.itpub.net/267265/viewspace-2763181/= [20210316]为什么刷新缓存后输出记录顺序发生变化.txt, --//正好别人问我,顺便我重复看了一下,顺便解答这个问题,实际上也许解答不对,许多行为我仅仅是猜测

    2024年02月08日
    浏览(42)
  • [20231023]为什么刷新缓存后输出记录顺序发生变化6.txt

    [20231023]为什么刷新缓存后输出记录顺序发生变化6.txt --//前几天做了单表刷新缓存后输出记录顺序发生变化的情况,测试2个表的情况时遇到一个奇怪的现象。 --//我前面的测试18c,如果使用10046跟踪看不到我遇到的情况,我想使用strace跟踪,发现该机器配置使用asm,strace跟踪无法

    2024年02月06日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包