作者信息

长期闲置

长风破浪会有时,直挂云帆济沧海。

最近文章
内存条有什么用937
es模块能在node中执行吗603
nodelist是什么意思626
视频教程分类
推荐视频教程
  • php程序员小白到大牛三个月集训php程序员小白到大牛三个月集训
  • Laravel 9 学习正当时—保姆级教程,想学不会都难!Laravel 9 学习正当时—保姆级教程,想学不会都难!
  • 千万级数据并发解决方案(理论+实战)千万级数据并发解决方案(理论+实战)
  • Laravel基础与实战(模块化)Laravel基础与实战(模块化)
  • 首页 >web前端 >前端问答 > 正文

    css3中calc怎么设置除法

    原创2022-06-06 16:37:13761 关注公众号:每天精选资源文章推送

    在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中文网其它相关文章!

    20期PHP线上班

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

  • 相关标签:css
  • 推荐:PHP从基础到实战教程视频

    相关文章

    相关视频


    专题推荐