less计算宽高

Uncle_long Uncle_long 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 4k累计阅读 4k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄10年
关注
转载 最新推荐文章于 2026-06-04 13:00:00 发布 4k 阅读 AI 写同款· GEO 优化 ›
前端大厂css面试题目|实现一个宽高自适应的正方形，一个梯形，z-index，requestAnimationfrCSS 工程化的理解，Sass、Less预处理器/后处理器，，替换元素的概念及计算规则 利用子元素的margin-top的值来实现利用子元素的margin-top的值来实现。 阅读详情

在css中有函数calc（）可以动态地计算不同比例的高度或宽度，比如

    height: calc(100% - 30px);

在css中表达正常，在less中出错，因为 less 本身就有 ‘减’ 这个操作，所以就违背了原意，所以在 less 中，要写成：

    height: ~"calc(100% - 30px)";

若要需要按照某个比例固定高度可以用

    min-height: e("calc(100vh - 184px)")

收录于
less

当前文章被收录于：

less
1 篇文章 0 人学习
订阅专栏 查看详情
在不可靠 aspect-ratio环境下，用 CSS 变量 + JS 保证图片稳定显示 在复杂的移动端 WebView 环境下，单纯依赖往往不够稳定。在 JS 中统一计算关键容器高度用style或把结果写成 CSS 变量在 Less / CSS 中复用这个变量，按业务需要的宽高比（如 10:18）计算宽高这种“JS 负责算数，CSS 负责表现”的分层方式，既保证了布局的稳定性，又保留了业务逻辑的灵活性，非常适合对比例要求高、受屏幕和系统差异影响大的展示场景。如需进一步调整（如隐藏比例系数、改用伪代码表示计算逻辑），请随时告知。 阅读详情

相关推荐

ClearML中文文档实战：从安装到第一个实验的保姆级教程

本文提供ClearML从零开始的实战指南，涵盖核心组件理解、Python SDK安装、服务器配置及首个自动化实验的完整流程。通过改造PyTorch训练脚本的实例，详细演示了如何利用ClearML自动记录实验参数、指标与模型，实现机器学习实验的可复现性与高效管理，并简要介绍了进阶的自动化工作流。

weixin_29216049的博客 398

less对高宽的计算

  学习心得：    在css中有函数calc（）可以动态地计算不同比例的高度或宽度，比如    height: calc(100% - 30px);在css中表达正常，在less中出错，因为 less 本身就有 ‘减’ 这个操作，所以就违背了原意，所以在 less 中，要写成：    height: ~"calc(100% - 30px)";若要需要按照某个比例固定高度可以用    min-he...

peaceoncemore的专栏 1万+

CPU也能跑大模型？手把手教你用vLLM离线部署Qwen2.5-7B-Instruct（附性能优化技巧）

本文详细介绍了如何在CPU服务器上高效部署Qwen2.5-7B-Instruct模型，通过vLLM框架和一系列优化技巧实现离线推理。内容包括环境配置、模型加载优化、性能调优及生产环境部署方案，帮助开发者在资源有限的情况下也能运行大语言模型。

weixin_28691741的博客 494

less计算宽高正确写法

在less中正确使用calc

weixin_41848005的博客 3950

从CPU视角看PCIe：深入理解x86/ARM平台上BAR、MMIO和PIO的地址翻译与访问机制

本文深入探讨了CPU如何通过BAR、MMIO和PIO机制访问PCIe设备的配置空间，详细解析了x86和ARM平台在地址翻译与访问路径上的差异。重点分析了PCIe配置空间中BAR寄存器的作用与探测机制，以及操作系统如何管理PCIe资源，为开发者提供了性能优化与调试的实用技巧。

weixin_30175731的博客 325

wps js宏获取工作簿、工作表、单元格的值、链接转图片、单元格区域数据转二维数组、保存工作簿的常用Excel操作

wps js宏入门看这里，我写了常用的js操作Excel的方法：获取工作簿对象、获取工作表对象、获取单元格的值、链接转图片、生成条形码图片、单元格区域数据转二维数组方法、保存工作簿、弹出输入框、YesNo选择框，助你从VBA转战JS。

huaermeier的博客 3万+

Less高度计算calc方法总结，Less注释

Less高度计算calc方法总结，Less注释

青颜的天空的博客 4704

攻防世界 web高手进阶区 9分题 Web_python_flask_sql_injection

继续ctf的旅程，开始攻防世界web高手进阶区的9分题，本文是Web_python_flask_sql_injection的writeup

闵行小鱼塘 1476

less中使用calc计算高度注意事项

文章目录lessss中使用calc计算高度注意事项参考 lessss中使用calc计算高度注意事项 我们知道，在css中我们可以使用100vh表示屏幕高度，我们还可以通过calc(expression)来动态计算宽高，于是便有了如下代码： height: calc(100vh - 50px); 然而事与愿违，我们得到的结果却是这样的： 我们得到的是50vh,相当于屏幕高度的一半。 google...

tinyVampire的博客 7316

宇树科技嵌入式面试题及参考答案（春晚机器人的公司）

内存对齐是指在内存中为数据对象分配存储空间时，按照一定的规则将数据存储在特定的地址上，以提高内存访问效率。不同的数据类型在内存中都有其特定的对齐要求，例如，int类型通常要求 4 字节对齐，double类型通常要求 8 字节对齐。这意味着数据的存储地址必须是其对齐字节数的整数倍。如果不进行内存对齐，处理器在访问数据时可能需要进行多次内存访问，从而降低了访问效率。指令可以用于控制结构体内存布局，它允许程序员指定结构体成员的对齐方式。其基本用法是在结构体定义之前使用来指定对齐字节数n，其中n。

大模型大数据攻城狮的专栏 3228

深度学习-155-RAG技术之嵌入模型Embedding怎么选

Embedding技术在大型语言模型中发挥着至关重要的作用。它将文本转化为向量，使模型能够理解和处理复杂的语言信息。通过选择合适的Embedding方法和优化文本匹配策略，我们可以在搜索引擎、问答系统、推荐系统等领域实现高效且精准的文本匹配。

qq_20466211的博客 406

CSS3中 的 calc() 函数

目的是动态改变宽度/高度的变化，适配问题 css3 的 calc()函数。这里的意思是设置宽度比100%的宽度少30px。 calc()函数用于动态计算长度值。 calc()函数支持 "+", "-", "*", "/" 运算； calc()函数使用标准的数学运算优先级规则； 注意 : 运算符"+ - * /"左右两边均要留空格 在less中使用以下样式宽度计算错误: width: calc("100% - 30px"); 计算出来是:width: 70%; 分析 : p...

Jana Jing的分享 3205

100天精通Python（可视化篇）——第109天：Pyecharts绘制各种常用地图（参数说明+代码实战）

100天精通Python（可视化篇）——第109天：Pyecharts绘制各种常用地图（参数说明+代码实战）

努力让自己发光，对的人才能迎着光而来 8万+

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

大家好，给大家推荐一个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!im

shalDream的博客 5085

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

android 蓝牙通讯demo

android 下蓝牙通讯demo，实现了发现蓝牙，使能蓝牙，通过蓝牙发送消息。

c语言less函数,使用 Less + 各种框架开发小程序快速切图布局常用的自定义 Less 函数【原创】...

前言开发小程序已有一段时间了，之前使用过 wepy、uni-app 框架来开发小程序，切图布局时对比过原始 css、scss / sass 和 less 三种方式来写样式，最后发现使用 less 来写样式是最省心的，高效的定义好 less 样式函数，可以让你写起代码来事半功倍，比起其他方式，高效地使用 less ，代码量甚至可以少一倍左右，另外还有个好处，就是可以让你写样式时尽可能少写或者不写 r...

weixin_42600128的博客 423

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的，已经排好版了，而且还是完整的，适合小白

less

less /*注释：在css中可以使用*/ //注释：不支持 /*变量：1，必须是以@前缀，有分号结尾 2，命名规则呵js变量的命名规则一样 区分大小写，字母数字下划线，不能以数字开头*/ 函数的混合---参数 定义了参数（没有默认值）：调用的时候必须传入参数 定义了参数（有默认值）：调用的时候可以不传入参数 &:中间不留空格 ：找到子...

wow_tutou的博客 304

前端的学习之路：初级CSS---补充less

补充less //import 用来将其他的less引入到当前的less @import "12.01.04.less"; .box1{ // 在less中所有的数值都可以直接进行运算 // + - * / width: 100px+100px; height: 100px*2; background-color: #bfa; }

weixin_44647555的博客 123

CSS学习笔记14——移动端相关知识（rem,媒体查询,less）

css的移动端相关于rem适配布局，媒体查询，less的知识

green_pine_的博客 916

css calc()的使用，以及失效原因

一、定义与用法 calc() 函数用于动态计算长度值。 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 "+", "-", "*", "/" 运算； calc()函数使用标准的数学运算优先级规则； div { width: calc(100% - 450rpx); height: calc(100% - 400rpx); margin: 0 auto; paddin

程邓楠的博客 3354

Less学习笔记

less：css预处理器 less官网 less是一门CSS预处理语言，它拓展了CSS语言，增建了==变量、混合、函数==等特性，使CSS更易维护和拓展。less可以运行在Node或浏览器端。常用css预处理器还有sass，stylus。 less在vscode中的使用 Easy LESS的功能：当你新建一个.less文件时，会自动将它编译，并生成相同名称的.css文件 在插件市场搜索并安装插件：Easy LESS 点击左下角的设置按钮，选择设置，搜索easy，选择在setting.json中编辑

HARDWORKING SURELY PAYS OFF 1149

常用的前端大屏 适配方案

前端大屏常用的几种 适配方案

ZXH0122的博客 1万+

移动端两种布局方式

移动端布局方式 less+rem+@media rem+@media+less是我们移动端布局的第一种方案。 移动端页面设计稿尺寸： – 安卓手机尺寸：320px 360px 375px 384px 400px 414px 500px 720px – 苹果手机尺寸：640px 750px 通过less+rem+@media 技术完成页面在各个手机尺寸上的显示 手机页面的准备工作： –UI设计师会先给移动端页面设计一个尺寸 如：苏宁的尺寸是 750px –前端开发人员再人为的把设计稿分为若干份 如：苏宁分为

weixin_46064684的博客 348

less混合 + less计算

less中的混合 混合的意思： 混合就是将一系列属性从一个规则集引入到另一个规则集的方式 通俗来讲，规则集即指一套代码，一套定义一定规则的代码，比如一套定义样式的代码，就是一个规则集 比如： 这里面的样式就是一个规则集 混合就是把一套规则集用于另一个元素上面 混合类别： 普通混合 不带输出的混合 带参数的混合 带参数并且有默认值的混合 带多个参数的混合 命名参数 匹配模式 arguments变量 普通混合 即直接写一个不影响html中元素的选择器，然后代码体里面写上规则集，然后直接让其他规则集调用 这种

你好牛蛙！ 4647

less中使用calc函数计算错误

在less中使用clac函数为什么计算错误？ calc是css函数，在原生css中效果很好，calc部分解决了css中不能使用算数表达式的短板。css引擎会计算表达式的值，并对不同的单位进行转化，最终计 算出实际的值。less自身就有计算功能，即使不用calc函数，less也会进行计算： div{ left: 5px + 4px; // 9px } 如果计算的单位不一致，less的处理就不像...

zhangxuekang的博客 1497

【less编写css元素宽高失效】元素宽高样式失效解决方法

今天使用less写css样式例子练习时，所有的宽高样式都不生效，修改方法如下

qq_45827479的博客 605
上一篇： vue数组中对象属性变化页面不渲染问题
下一篇： es6中class类的全方面理解
点赞 0
评论 0
书签 书签 0
Uncle_long
Uncle_long
博客等级 码龄10年 17粉丝 27原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值