react中calc()无效

于 2022-10-21 15:40:09 发布
阅读量880 收藏
点赞数
分类专栏： 前端 文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36144469/article/details/127447750
版权
本文探讨了CSS calc()函数在计算宽度时遇到的问题，例如`width:calc(100%-100px);`无法正常工作。原因在于calc()表达式中运算符两侧必须有空格。了解这一细节对于正确使用calc()进行动态布局至关重要。
摘要由CSDN通过智能技术生成

calc()无效问题 width:calc(100%-100px)

——无法起作用 width:calc(100% - 100px);

——可以使用了 calc()计算中的两个值必须同运算符号之间存在空格

Agen_阿根
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-calc:使用React的基本JS计算器
03-28
基本的JS计算器使用react。 跟随布里斯涅·艾尔斯（Brece Ayres），为： ： KzYUuTiHdiY 注意：mathjs lib用于进行数学计算。 请参阅下面的样板自述文件： 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化内部版本，文件名包含哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 yarn eject 注意：这是单向操作。 eject ，您将无法返回
ReactCalc:基于W10计算器的React内置计算器
05-14
ReactCalc 基于W10计算器的React内置计算器。 “进行中”
React 如何在style={{ }}中添加calc属性
weixin_44240581的博客
01-17 4790
<List className={styles.container} style={{ height: 'calc(100vh - 120px)' }}> ... </List>
【CSS】calc 函数（动态计算长度值）
qq_45677671的博客
04-24 1129
文章目录基本用法 基本用法 calc() 函数用于动态计算长度值。 需要注意的是: 1. 运算符前后都需要保留一个空格，例如： width: calc(100% - 10px)； 2. 任何长度值都可以使用calc()函数进行计算； 3. calc()函数支持 "+", "-", "*", "/" 运算； 4. calc()函数使用标准的数学运算优先级规则； 示例： <!DOCTYPE html> <html> <head> <meta charset=
react中布局样式style.less中的calc不生效
u010537398的博客
06-22 7436
去使用：.modal_overlay {  position: fixed;  top: 0;  left: 0;  bottom:0;  z-index: 1000;  background-color:rgba(11,11,11,0.4);  width: 100%;  .modal {    position: fixed;    top: calc(100% – 260px);    le...
react+less使用calc属性
weixin_42267626的博客
05-06 548
react学习总结1 react+less使用calc属性 在react项目里面使用less来写ccs3，使用calc属性总是出现结算错误问题，所以这个使用可以使用width: calc(~"50% - 24px");特别需要注意的是运算符两边的空格
calc-react:使用react开发的计算器
05-02
计算器 入门：使用cmd 步骤1： git clone https://github.com/kaleem-elahi/calc-react 步骤2： cd calc-react 步骤3： npm install 第4步： npm start 完毕 :clapping_hands:
ReactOS Calc-开源
05-15
ReactOS Calc是一款开源的计算器应用，它旨在模拟微软Windows 32位操作系统中自带的计算器。这个项目的主要目标是提供一个与原版Windows计算器高度相似的用户体验，包括用户界面设计和键盘快捷键的设定，使得用户...
React中文文档.zip
04-23
很多人认为 React 是 MVC 中的 V（视图）。 我们创造 React 是为了解决一个问题：构建随着时间数据不断变化的大规模应用程序。为了达到这个目标，React 采用下面两个主要的思想。 简单 仅仅只要表达出你的应用程序...
React中文api
03-04
React中文api，使用此文档可以查看react的api和各个函数的使用方法
Calculator_React-Native:此存储库包含使用 React-Native 的计算器应用程序
08-05
示例小吃应用程序 打开App.js文件以开始编写一些代码。 您可以通过扫描二维码或使用 iOS 或 Android 模拟器直接在手机或平板电脑上预览更改。 完成后，点击保存并分享链接！ 当您准备好查看 Expo 提供的所有内容时（或者如果您想使用自己的编辑器），您可以下载您的项目并将其与。 在 Snack 中创建的所有项目都是公开可用的，因此您可以通过链接轻松共享该项目的链接，或使用<>按钮将其嵌入到网页中。 如果您遇到问题，可以发推给我们或在我们的提问。 小吃是开源的。 您可以在上找到代码。
react-native-calculator
04-29
React Native计算器应用程序 一个简单的跨平台（iOS和Android）React Native计算器应用程序。 该示例组合到。 免费开始学习和掌握React Native！ 安装 git clone https://github.com/ReactNativeSchool/react-native-calculator yarn install / npm install 跑步 yarn run ios / npm run ios或yarn run android / npm run android 该项目被放在一起作为示例，以帮助您构建自己的React Native应用程序。 随时下载并修改它！
dynamic_calc:使用React Native和Expo开发的动态计算器
04-03
动态计算 使用React Native与Expo一起开发的动态计算器。 内容索引 关于 专为使用React Native技术进行研究而设计的动态计算器。 提交说明 -第一次提交 项目创建 -创建计算器布局 --- :construction: 正在建设中 :construction: ---
React Native 计算器和计算器输入组件
06-08
React Native Calculator 简单的 React Native 计算器和计算器输入组件。 安装使用 npm: npm i -S react-native-calculator 或 yarn: yarn add react-native-calculator Demo Calculator Component Usage import React from 'react' import { View } from 'react-native' import { Calculator } from 'react -native-calculator' 导出默认类 App extends React.Component { render() { return ( ) } } Props 通用道具中的所有道具和... 道具名称 数据类型 默认值 说明 hasAcceptButton boolean false 计算后显示接受按钮。 style ViewStyle 容器样式。 onCalc (value : number , text : string ) => void 计算
Calc-React
03-21
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。您还将在控制台中看到任何棉绒...
React 天坑 CSS设置滚动 height属性不生效问题
weixin_45935610的博客
08-18 771
使用calc属性来规定height 属性不生效 ,页面也就没有办法滚动。发现居然是 calc() 里面的参数不能和 - 号相连接。查看了之前成功的代码。
calc()无效，知道真相的我眼泪掉下来
zm151110202的博客
05-28 2333
calc(100%-60px) —— 错误 calc(100% - 60px) —— 正确 啊，原来是 - 左右得加上空格。 calc() 能计算的计算表达式里，“ + ” 和 “ - ” 两边要留空格，而 “ * ” 和 “ / ” 没有这个要求。
Web学习（十）React实战-计算器
May the Force be with you
06-10 336
Web学习（十）React实战-计算器
使用计算属性cale_乾坤大挪移！React 也能“用上”computed 属性
weixin_34505281的博客
12-21 370
本文为第 10 篇原创，扫码关注公众号「政采云前端团队」，获取更多不掺水的原创好文～前言，关于计算属性初次见到计算属性一词，是在 Vue 官方文档 《计算属性和侦听器》 一节中，文章中是这样描述计算属性的：模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。回想我们编写的 React 代码，是否也在 JSX(render 函数)中放入了太多的逻...
react样式calc
最新发布
07-25
在 React 中可以使用 CSS 的 `calc()` 函数来进行样式计算。`calc()` 函数可以在 CSS 属性中进行数学运算，常用于动态计算元素的尺寸或位置。 例如，假设你想将一个元素的宽度设置为父容器宽度的一半减去 20 像素，你可以这样写： ```jsx import React from 'react'; const MyComponent = () => { return ( <div style={{ width: 'calc(50% - 20px)' }}> {/* 内容 */} </div> ); }; export default MyComponent; ``` 在上面的代码中，通过在 `style` 属性中使用对象字面量，并将 `width` 属性设置为 `calc(50% - 20px)`，实现了动态计算元素宽度的效果。 需要注意的是，在使用 `calc()` 函数时，运算符前后需要有空格，例如 `calc(50% - 20px)`。另外，如果你的项目使用了 CSS 预处理器（如 Sass、Less 等），你也可以在预处理器中使用 `calc()` 函数来进行样式计算。 希望这个例子能够帮助到你！如有其他问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值