less和sass 自动计算宽高属性，盒子垂直居中方法，样式覆盖（权重）关键字important

关注

原创 2025-02-22 20:28:22 5k 阅读 AI 写同款· GEO 优化 ›

【前端面试知识题】- 3. HTML && CSS BFC是CSS布局的一个概念，是一个独立的渲染区域，规定了内部box如何布局，并且这个区域的子元素不会影响到外面的元素，其中比较重要的布局规则有内部 box 垂直放置，计算 BFC 的高度的时候，浮动元素也参与计算。来调整图片的位置，不过HTTP2不适用，原因为HTTP2实际上是多路复用的，只用一个TCP连接，所以多个图片的请求也是在同一个TCP连接里，这样能省下非常多的请求时间，但坏处就是单连接开销很大，如果要传多个大文件，就很麻烦。面对经济的下行和大学生毕业人数的突增，现在的就业状况极其严峻。阅读详情

大家好，给大家推荐一个less和sass中非常好用的属性，可以自动计算宽高，代码如下：（以less为例）
下面展示一些 内联代码片。

@w200:200/75rem;
.product-name{
    width: calc(100% - @w200);
    font-size: 28/75rem;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0,-50%);
    color:red!important;//important为样式权重的最高级，常用于覆盖组件内的样式，比如字体颜色、大小等
  }

代码解析：
自动计算宽度的属性calc，可以根据传入的数据（加减乘除）自动计算结果，需要注意的是：如果减去的是变化的数值，需自定义一个变量（如：@w200），同时减号前方和后方需要用“空格”隔开，否则代码不生效！
transform也是一个非常好用的属性，可配合定位一起使用，实现盒子的垂直居中或水平居中等。
如果您喜欢本文的分享，动动您灵活的小手点个赞👍吧，谢谢!