calc函数在浏览器无效

2024-11-05

为什么CSS中的calc函数可能会不生效？

前言在早期如果想要对某一些样式进行动态计算,绝大多数的做法都是使用JavaScript来进行,当时的CSS在面对这种场景显得有点无能为力.但是,当CSS3中新增了calc函数时,面对这种场景,JavaScript不再是我们的第一选择,我们只用 CSS 就可以进行相当复杂的计算了.在使用calc的过程中,相信大家或多或少都遇到过下面这些"坑". 如果这篇文章有帮助到你,️关注+点赞️鼓励一下作者,文章公众号首发,关注前端南玖第一时间获取最新文章- 常见的"坑"

CSS3 calc()函数使用

1.calc是什么? calc是英文单词calculate(计算)的缩写,用于动态计算长度值. calc()函数支持 "+", "-", "*", "/" 运算: + 和 - 运算符的两边必须始终要有空白符.比如 calc(50% -8px) 会被解析成为一个无效的表达式:一个百分比后跟一个负数长度值.而 calc(8px + -50%) 会被解析成为一个长度后跟一个加号再跟一个负百分比.* 和 / 运算符不需要空白符,但考虑

calc()函数的使用

calc()函数算是css中的一个另类了,一般来说css都是直接确定的样式,而calc()函数却是可以动态计算,这和css静态的概念有些区别,但这并不妨碍其优秀的性能. 什么是calc()? calc()从字面我们可以把他理解为一个函数function.其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度.比如说,你可以使用calc()给元素的border.margin.pading.font-size和width等属性设置动态值.动态值我们使

css绘制特殊图形，meida查询，display inline-box间隙问题以及calc()函数

本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录的问题吧.一,css画特殊图形. 在网页中,需要一些特殊图形时.比如半圆形,三角形等,我们一般是让ui切图,但是实际上,利用css的边框 (border)属性,我们可以绘制一些有规律的图形. 盒模型中元素有四个角,那么每个角就存在一个弧度的属性. 先看代码: .half_circle{ width:

CSS3 新特性（box-sizing盒模型，背景线性渐变，filter滤镜，calc函数，transition过渡）

1.盒子模型(box-sizing) CSS3 中可以通过 box-sizing 来指定盒模型,有两个值:即可指定为 content-box.border-box,这样我们计算盒子大小的方式就发生了改变. 可分为两种情况: 1. box-sizing:content-box 盒子大小为 width + padding + border(默认) 2. box-sizing:border-box 盒子大小为 width 如果盒子模型我们改为了 box-sizing:border-box,

详解calc()函数功能

calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性能实现自适应的布局,首先让我想到的是box-sizing,但跟我说还可以计算,这让我不得不想起calc().因为早先在官网和一些blog上看到相关的介绍,但一直没有深入,也没有自己去测试过.今天花了一下午的时间彻底学习了一下calc().于是就有了这篇blog,希望对大家有所帮助. 平时在制作页面的

css3 的 calc()函数在布局中的使用----头部高度固定，页面正好占满一屏

最近项目遇到一个布局需求,头部高度固定,页面需要刚好占满一屏幕. 如下示意图: 方法:使用calc .wrap{ position: relative; margin-left: 24px; margin-right: 24px; min-height: calc(100% - 123px); } calc()说明: css3 的 calc()函数.这里的意思是设置宽度比100%的宽度少20px.calc()函数用于动态计算长度值.calc()函数支持 "+", "-&quo

CSS 中 calc() 函数用法

CSS calc() 函数 calc() 函数用于动态计算长度值. 注意,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px): 任何长度值都可以使用calc()函数进行计算: calc()函数支持 "+", "-", "*", "/" 运算: calc()函数使用标准的数学运算优先级规则: 实例: <!DOCTYPE html> <html lang="en&quo

ORA-06575: 程序包或函数 NO_VM_DROP_PROC 处于无效状态

SQL> drop user aaa ; drop user aaa ORA-00604: 递归 SQL 级别 1 出现错误 ORA-06575: 程序包或函数 NO_VM_DROP_PROC 处于无效状态 ORA-06512: 在 line 21 SQL> alter procedure WMSYS.NO_VM_DROP_PROC disable; alter procedure WMSYS.NO_VM_DROP_PROC disable ORA-00922: 选项缺失或

div里面的元素在【垂直方向】上水平分布使用calc()函数动态计算

1==>如何让div里面的元素在[垂直方向]上水平分布.important-dec{ height: 121px; //必须固定高度 flex-direction: column; //垂直排列 display: flex; justify-content: space-between;} 2==>使用 calc() 函数计算 <div> 元素的宽度:需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px):任何长度值都可以使用calc(

calc() 函数

定义与用法 calc() 函数用于动态计算长度值. 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px): 任何长度值都可以使用calc()函数进行计算: calc()函数支持 "+", "-", "*", "/" 运算: calc()函数使用标准的数学运算优先级规则: 实例: <!DOCTYPE html> <html> <head> &l

css 1) calc() 函数的使用. 2)box-sizing:border-box

calc() 是一个css 函数, 可以实现.计算 ---------------------------- 1. 每个div宽度是25%; 总共4个div. 同时前三个div 有 border-right 为 3px. 方案一: 前三个div 的width是 25% - 3px , border-right 是 3px; 最后一个,第四个 div 的width 是 25%, 没有 border-right. <!DOCTYPE html> <html lang="

php头函数和浏览器缓存

可以通过php头函数改变返回给浏览器的头信息例: 代码中添加头: header("Cache-Control: max-age=31536000"); header("Expires: Mon, 26 Jul 2017 05:00:00 GMT"); 则返回: 查看chrome浏览器缓存: chrome://cache/ 这里,需要注意的是,不加header时,缓存中该url存在前缀,只保留头信息加上header后,如上图,缓存包含所有内容具体没有深入研究,

jQuery基础（工具函数，浏览器信息，检测节点，字符串，$.extend()）

1.获取浏览器的名称与版本信息在jQuery中,通过$.browser对象可以获取浏览器的名称和版本信息如$.browser.chrome为true,表示当前为Chrome浏览器, $.browser.mozilla为true,表示当前为火狐浏览器, 可以通过$.browser.version方式获取浏览器版本信息. 2.检测浏览器是否属于W3C盒子模型浏览器的盒子模型分为两类,一类为标准的w3c盒子模型,另一类为IE盒子模型, 两者区别为在Width和Height这两个属

PHP中ob系列函数讲解(浏览器缓存技术) （转）

Output Control 函数可以让你自由控制脚本中数据的输出.它非常地有用,特别是对于:当你想在数据已经输出后,再输出文件头的情况. 输出控制函数不对使用 header() 或 setcookie(), 发送的文件头信息产生影响,只对那些类似于 echo() 和 PHP 代码的数据块有作用. 我们先举一个简单的例子,让大家对Output Control有一个大致的印象: Example 1. 复制代码代码如下: ob_start(); //打开缓冲区 echo "Hellon"

使用less时的calc()函数问题

在使用less时写 width:calc(100%-30px); 但在浏览器检查元素的时候总会显示width:70%; 可以在Less中把calc的写法改写成下面这样: width : calc(~"100% - 30px"): 这样编译就正常了就是记录下开发时的一些小坑,如果有同样问题的朋友可以看一下.

微信小程序 - height: calc(xx - xx)；无效

遇到一个小问题,记录一下问题:在微信小程序中使用scroll-view标签时,用height:cale(xx - xx)设置高度无效,在page中设置高度为百分百依旧无效解决办法:直接在父级view标签中设置高度为百分百即可 <view style="height:100%;">  <scroll-view class="videoList" scroll-y> </scroll-view>

JS的数据类型判断函数、数组对象结构处理、日期转换函数，浏览器类型判断函数合集

工具地址:https://github.com/BothEyes1993/bes-jstools bes-jstools 100多个基础常用JS函数和各种数据转换处理集合大全,此工具包是在 outils 的基础上,加上个人平时收集的代码片段进行的二次整合 Browser Support 7+ ✔ Latest ✔ Latest ✔ Latest ✔ Latest ✔ 6.1+ ✔ Installing npm install bes-jstools --save Using nodejs con

new date() 函数在浏览器中的兼容问题！！

引言: 同一种语言javascript,在不同的浏览器中,存在语言兼容性问题,本质上是由于不同的浏览器是支持的语言标准和实现上各有差异.本文将基于new Date来创建Date对象来分析这个问题. var timestart = '2010-05-04'; var timeend = '2015-04-01'; var time1 = (timestart+' 00:00:00').toString(); var time2 = (timeend+' 23:59:59').toString();

window.close()方法对谷歌和火狐浏览器无效

在近期的项目中,遇到了一个问题,就是用户到新浪支付进行操作,操作成功后,指定到一个网页,需求是点击确定,关闭该网页.需求出来以后认为这种就是小菜一碟,直接用 window.close()方法就可以实现,速速的写好网页,进行测试,网页竟然关闭不了,后来查找w3cschool,是这么解释window.close()的: 方法 close() 将关闭有 window 指定的顶层浏览器窗口.某个窗口可以通过调用 self.close() 或只调用 close() 来关闭其自身. 只有通过 JavaScr

calc函数在浏览器无效

热门专题