首页 - 互联网

css3 calc 计算负数

作者: 五速梦信息网
时间: 2026年04月04日 13:46

css3 calc 计算负数

2024-11-02

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

前端知识 Calc()介绍 calc的英文是calculate的缩写,中文为计算的意思,是css3的一个新增的功能,用来只当元素的长度.比如说:你可以用calc()给元素margin.padding.border.font-size和width等属性设置动态值.为什么说是动态值呢?因为我们是使用来表示得到的值.不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度. Calc()的用处 calc()能让你给元素的做计算,你可以给一个div元素,使用百分比.em.px

前言: 平时在制作页面的时候,总会碰到有的元素是100%的宽度.众所周知,如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子撑破.比如说,有一个边框,或者说有margin和padding,这些都会让你的盒子撑破.我们换句话来说,如果你的元素宽度是100%时,只要你在元素中添加了border,padding,margin任何一值,都将会把元素盒子撑破(标准模式下,除IE怪异模式).这样一来就会相当的麻烦,平时我们碰到这样的现象时,也是相当的谨慎,有时甚至无法解决,

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

css3 calc():css简单的数学运算–加减乘除多好的东西啊,不用js,一个css就解决了. .box{ border:1px solid #ddd; width:calc(100% - 100px); background:#9AC8EB; } 3栏等宽布局 .box{ margin-left:20px; width:calc(100%/3 - 20px); } .box:nth-child(3n){ margin-left:0; } 运算规则 calc()使用通用的数学运算规则,但是

概述 CSS函数calc()可以用在任何一个需要<length>的地方.有了calc(),你可以通过计算来决定一个对象的大小和形状. 你还可以在一个calc()内部嵌套另一个calc(). 语法如何阅读 CSS 语法. calc(expression) 值 expression 一个数学表达式,该表达式的结果会作为最终的<length>. 表达式该表达式中可以使用下面的几个运算符连接任意的简单表达式: + 加法 - 减法 * 乘法 / 除法. 表达式中的操作数可以使用任意的长度

什么是calc()? calc()从字面我们可以把他理解为一个函数function.其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度.比如说,你可以使用calc()给元素的border.margin.pading.font-size和width等属性设置动态值.为何说是动态值呢?因为我们使用的表达式来得到的值.不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度. 语法 calc() = calc(四则运算)

转载自:css3 calc()的用法说明:calc(四则运算):任何长度值都可以使用calc()函数进行计算:和平时的加减乘除优先顺序一样一样的: 特别注意:calc()里面的运算符必须前后都留一个空格,不然浏览器识别不了,比如:calc(100% - 5px); 兼容性: HTML: <div class="out"> <div class="in">in</div> </div> CSS: .out{ width

calc()是css3的一个新增的功能,用来指定元素的长度.比如说,你可以使用calc()给元素的border.margin.pading.font-size和width等属性设置动态值.calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度. calc()语法: 加 (+).减(-).乘(*).除(/),注意的是:乘数中至少要有一个是 <number> 类型的.被除数(/右面的数)必须是 <number> 类型的 calc()的运算规则calc()使用通

box-sizing box-sizing的CSS属性是用来改变默认的CSS框模型属性初始值:content-box 适用于:接受的所有元素的宽度或高度继承:无媒体:visual 指定的:as specified 动画:no 规范秩序:独特的无歧义的正式语法定义的顺序语法 box-sizing: content-box(默认样式) | padding-box | border-box content-box,border和padding不计算入width之内 padding-box,p

calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border.margin.pading.font-size和width等属性设置动态值. 以前我们可以使用box-sizing:border-box;来设置盒子的属性为不加上边距.现在我们又多了一个选择了.但要注意,两者只能使用一个哦,否则就会造成冲突了. 怎么使用? calc()可以使用数学运算中的简单加(+).减(-).乘(*)和除(/)来解决问题,而且还可以根据单位如px,em,

圣杯布局的实现,有很多种. 大致都是借助 padding, margin, float之类的,当然这是传统的实现方式.更多的参考方式圣杯布局小结. 这里说的是用css3 cal 和flex来实现,因为css有限,有不当或者错误之处,敬请指出. css3 cal 的支持情况,总体 93%. flex布局的支持情况, 总体97% 为了增加复杂度 1. 块之间有间距 2. 有 border 3. 都采用了 box-sizing: content-box 先看 calc的实现 <!DOCTYPE htm

1.px 像素,我们在网页布局中一般都是用px. 2.百分比百分比一般宽泛的讲是相对于父元素,自适应网页布局越来越多,百分比也经常用到了 3.Viewport 当已知一个div的高度时,它的同胞div高度是根据窗口高度减去已知div高度而得到,此时就需要calc函数 viewport:可视窗口,也就是浏览器. vw Viewport宽度, 1vw 等于viewport宽度的1% vh Viewport高度, 1vh 等于viewport高的的1% CSS

width:calc(100% - 40px)可用 + - * / 进行计算(ie9+) 注:计算符号前后必须跟上空格.

在写前端页面样式中使用calc 显示Invalid property value 后来查了文档之后才发现是自己的格式不对我的写法: .clac { width:calc(100%-112px); } 以我的写法样式是无效的运算符前后需要保留空格才有用正确写法: .clac { width:calc(100% - 112px); }

一.变量是个好东西在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处. 随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,CSS工作组迅速跟进CSS变量的规范制定,并且,很多浏览器已经跟进,目前,在部分项目中已经可以直接使用了. Chrome/Firefox/Safari浏览器都是绿油油的,兼容性大大超出我的预期,于是果断尝鲜记录下语法用法和特性. 二.CSS变量var()语法和用法和特性 CSS中原生的变量定义语法是:

CSS原生变量(CSS自定义属性) 示例地址:https://github.com/ccyinghua/Css-Variables 一.css原生变量的基础用法变量声明使用两根连词线"--"表示变量,"$color"是属于Sass的语法,"@color"是属于Less的语法,为避免冲突css原生变量使用"--" // 声明变量 --color:#000; // 读取变量 var(--color) 注:1.变量声明不能包含$,

在慕课网上看到的张鑫旭大神的视频,做的笔记,以便日后翻看. 绝对定位与float 1.绝对定位和float有一样的特性,都有包裹性,和破坏性. 2.absolute和relative 如果不把他们俩放在一起,absolute越独立越强大. relative和absolute是分离的,对立的,绝不是什么兄弟关系! 独立的absolute可以摆脱overflow的限制,无论是滚动还是隐藏 <div class="scroll"> <a href="javascr

一.CSS百分比padding都是相对宽度计算的在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比值不一样. 这么设计的原因在我的新书(应该不出几个月就要出版了)中会有说明,这里不展开. 对于padding属性而言,任意方向的百分比padding都现对于宽度计算可以让我们轻松实现固定比例的块级容器,举个例子,假设现在有个<div>元素: div { padding: 50%; } 或者: di