首页  >  文章  >  web前端  >  css3中calc怎么设置除法

css3中calc怎么设置除法

WBOY
WBOY原创
2022-06-06 16:37:133502浏览

在css3中,可以利用“/”运算符设置calc()函数的除法运算,该函数用于动态计算长度值,参数可设置为一个数学表达式,结果将采用运算后的返回值,语法为“长度属性:calc(被除数 / 除数)”;在“/”运算符的前后都要保留一个空格。

css3中calc怎么设置除法

本教程操作环境:windows10系统、CSS3&&HTML5版本、Dell G3电脑。

css3中calc怎么设置除法

calc() 函数用于动态计算长度值。

需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);

任何长度值都可以使用calc()函数进行计算;

calc()函数支持 " ", "-", "*", "/" 运算;

calc()函数使用标准的数学运算优先级规则;

语法为:

calc(expression)

expression 必须,一个数学表达式,结果将采用运算后的返回值。

示例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style>
input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}
#formbox {
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}
</style>
</head>
<body>
<form>
  <div id="formbox">
  <label>Type something:</label>
  <input type="text">
  </div>
</form>
</body>
</html>

输出结果;

css3中calc怎么设置除法

(学习视频分享:css视频教程

以上是css3中calc怎么设置除法的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn