• 技术文章 >web前端 >前端问答

    css3中calc怎么设置除法

    长期闲置长期闲置2022-06-06 16:37:13原创185

    在css3中,可以利用“/”运算符设置calc()函数的除法运算,该函数用于动态计算长度值,参数可设置为一个数学表达式,结果将采用运算后的返回值,语法为“长度属性: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>

    输出结果;

    29.png

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

    以上就是css3中calc怎么设置除法的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:onclick是不是jquery事件 下一篇:css样式中font是什么
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• CSS中用于隐藏的属性是什么• css底部双描边是什么属性• CSS里面能用odd吗• css怎么隐藏元素但不占空间• css3中倾斜的函数是什么
    1/1

    PHP中文网