Hot For Coding

CSS3 calc方法

CSS3有一个calc()方法,应该是calculate的简称,语法

calc(expression)

里面是一个表达式,CSS一直不能做加减运算,这也是CSS不够灵活的地方,但在calc就可以做一些简单的运算

看看W3C对表达式的描述

Required. A mathematical expression. The result will be used as the value
The following operators can be used: + - * /

很明显,这个表达式可以用加减乘除

/*
 * Nichoals Lee www.qttc.net
 */
#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
  text-align: center;
}

表示宽度百分百再减去100像素

你也使用非像素单位,如

/*
 * 琼台博客 www.qttc.net
 */
#div1 {
  position: absolute;
  left: 50px;
  width: calc(90% + 2rem);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
  text-align: center;
}

以上例子就是宽度百分之九十加上2rem长度

分享

TITLE: CSS3 calc方法

LINK: https://www.qttc.net/100-css-calc.html

NOTE: 原创内容,转载请注明出自琼台博客