css中calc没有效果

2024-09-02

css3的calc属性不生效问题

css3的 calc:计算属性.由于自己做的项目中这个属性不常用到,偶尔用一次还没效果. 后来研究了下是因为运算符两边没加空格. 错误示例:.content{width:calc(100%-50px)}这样是不生效的运算符"+ - * /"左右两边均要留空格正确示例:.content{width:calc(100% - 50px)}

css 中calc无效属性值问题

width:calc(50%-20px); 这样书写是无效的因为calc中计算的两个因子同运算符号之间必须存在空格:

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

css中calc()的使用

calc()是css3中新出现的特性,可以用于动态计算,非常方便. 首先是兼容性再来看看怎么使用 html{ font-size: 20px; } div{ width: calc(50% - 1px); height: calc(100px + 1rem); } 要注意的是,计算符号两边需要留空格. 非常的简单易用.

使用fliter实现ie下css中rgba的效果

直接举例吧background-color: rgba(255,255,255,0.8); 设置背景颜色为白色,不透明度设为80% 在ie下可以用fliter这一属性进行设置: filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#C8ffffff,endColorstr=#C8ffffff); 具体的设置情况可以看一下这个链接:https://segmentfault.com/a/1190000002433305 其中

CSS中新属性calc()

CSS3的calc()使用原文: http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html © w3cplus.com calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性能实现自适应的布局,首先让我想到的是box-sizing,但跟我说还可以计算,这让我不得不想起calc().因

如何在CSS中映射的鼠标位置，并实现通过鼠标移动控制页面元素效果

映射鼠标位置或实现拖拽效果,我们可以在 JavaScript 中做到这一点.但实际上,在CSS中有更加简洁的方法,我们可以在不使用JavaScript 的情况下,仍然可以实现相同的功能! 只使用CSS就可以实现模仿鼠标"点击和拖动"效果,让我们来看看如何获得用户的鼠标位置,并将其映射到 CSS 自定义属性:--positionX 和 --positionY 中.下面是具体实现步骤. 初始化我们的第一个 demo 将使用 --positionX 和 --positionY 自定义属性来

理解CSS中的数学表达式calc()

前面的话数学表达式calc()是CSS中的函数,主要用于数学运算.使用calc()为页面元素布局提供了便利和新的思路.本文将介绍calc()的相关内容定义数学表达式calc()是calculate计算的缩写,它允许使用+.-.*./这四种运算符,可以混合使用%.px.em.rem等单位进行计算兼容性: IE8-.safari5.1-.ios5.1-.android4.3-不支持,android4.4-4.4.4只支持加法和减法.IE9不支持用于backround-position [注意

css中的数学表达式calc()

前言数学表达式calc()是CSS中的函数,主要用于数学运算.使用calc()为页面元素布局提供了便利和新的思路. 概念数学表达式calc()是calculate计算的缩写,它允许使用+.-.*./这四种运算符,可以混合使用%.px.em.rem等单位进行计算 [兼容性] IE8-.safari5.1-.ios5.1-.android4.3-不支持,android4.4-4.4.4只支持加法和减法.IE9不支持用于backround-position [注意]+和-运算符两边一定要有空白符(

纯html+css中实现静态选座位效果技巧（input+label使用小技巧）

很多时候,我们想通过html+css的方式实现排列在后方的代码在选中状态下,能控制排列在前的代码的样式.那么要怎么实现呢?在这里我就要用1个小技巧来完成. 众所周知的,我们css中的选择器通常只能向下或者同级向下选中,而不能向上选中,这样就对于想控制前面样式的时候带来麻烦.input+label关联的方式即可实现,因为input和label是通过id值来进行关联的,而html中规定了,id值必须唯一,那么我将input放置在html的body下的任意位置,均可实现关联,所以为了实现后方代码控制前

CSS中@support的用法及其calc、media用法

背景: 一次偶然的机会遇到一个朋友在刷css的库其中有这样一道题(css变量如何定义,calc, support, media),我看一眼熟悉而陌生,知其一而不知其二,叔可忍婶不可忍,马上就度娘起来,看一看它的真面目. 一 support 了解到了@support的这个属性,记录下:CSS中的@support主要是用于检测浏览器是否支持CSS的某个属性,其实就是条件判断,如果支持某个属性,你可以写一套样式,如果不支持某个属性,你也可以提供另外一套样式作为替补.但是这里有一点需要注意的是:@sup

css中图片有缩放和转动效果

现在html中利用div来包裹住一张图片. <div class="xuanzhuan"> <img src="images/top.png" alt=""> </div> 然后在css中利用固定定位来将图片固定好,再利用动画的效果即可出来. .xuanzhuan { position: fixed; top: 20%; right: 10%; animation: haha 1s ease-in-out 0s

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

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

css中的视距perspective和视差效果

概述之前觉得2个效果很叼,一个是3D翻转效果,另一个是视差效果.今天好好的研究一下,把心得记录下来,供以后开发时参考,相信对其他人也有用. 3D翻转 3D翻转效果其实非常简单,其实就是perspective属性的一个运用.perspective属性就是视距的意思.下面是一个鼠标放上去图片就会翻转的小示例,看看就会了: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

不可思议的纯 CSS 滚动进度条效果

结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的过程中遇到的一个类似的小问题.其实即便让我借助 Javascript ,我的第一反应也是,感觉很麻烦啊.所以我一直在想,有没有可能只使用 CSS 完成这个效果呢? 分析需求第一眼看到这个效果,感觉这个跟随滚动动画,仅靠 CSS 是不可能

利用CSS函数calc(...)实现Web页面左右布局

前言因为自己的网站需要,想要做一个左右布局的页面: 左边是导航菜单之类的东西.右边是文档内容(因为最近看的一些软件的文档页面都是这么布局的): 左边固定宽度——300像素.右边使用剩余的宽度: 左边.右边的高度都是100%,浏览器的滚动条不能出现: ... 最终效果如下:div#layout包含左边的div#cool和右边的div#colr 过程实现上面的页面过程中,遇到了两个难点: 1.设置div#coll的display为inline-block时,滚动条出现了: -下面的代码出现滚动条

CSS中背景图片的background-position中的left top到底是相对于谁的？

在学习的时候遇到了如下问题: CSS中背景图片的background-position中的left top到底是相对于谁的,content-box?padding-box?border-box? background属性中的backgound-image和background-color相对的box是一致的吗? 如何做到背景图片位于容器的右边10px,底边10px? 首先我们来看一下盒模型:盒模型从外到内依次为:margin-box,border-box,padding-box,content-

如何在CSS中使用变量

前言 CSS变量(官方称为自定义属性)是用户定义的值,它可以在你的代码库中设置一次并多次使用.它们使管理颜色.字体.大小和动画值变得更加容易,并确保整个web应用的一致性. 举个例子,你可以将品牌颜色设置为一个CSS属性(--primarycolor: #7232FA),并在任何使用品牌颜色的组件或样式中使用这个值(background: var(--primarycolor);). 除了更加简洁以及不重复的代码,CSS变量可用于构建调色板,提高响应能力,并创建动态类型系统. 定义CSS变量要

Css中的两个重要概念：块状元素和内联元素

一.display:block display:block就是将元素显示为块级元素,一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(height)起作用.常见块状元素为div和p. 块元素(block element) address - 地址 blockquote - 块引用 center - 举中对齐块 dir - 目录列表 div - 常用块级容易,也是CSS layout的主要标签 dl - 定义列表 fieldset -

CSS3中的动画效果记录

今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform 属性允许你修改CSS可视化模型的坐标控件.使用transform,元素可以安装设定的值变形.旋转.缩放.倾斜. 语法: transform : none | <transform-function> [ <transform-function> ]* 也就是: transform: r

CSS中一些常见的兼容性问题

CSS中一些兼容性问题就是浏览器兼容,而这些浏览器兼容问题主要是Ie和FF之间的争斗. CSS hack中的一些事: 我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样式,所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做 CSS hack. CSS hack主要有三种:IE条件注释法.CSS属性前缀法.选择器前缀法. (1)IE条件注释法,即在正常代码之外添加判别IE浏览器或对应版本的条件注释,符合条件的浏览器或者版本号才回执行里边的代码. 1 <!--[