zoukankan      html  css  js  c++  java
  • CSS calc() 函数

    calc()支持CSS3;任何长度值都可以使用calc()函数进行计算;calc()函数支持 "+", "-", "*", "/" 运算; calc()函数使用标准的数学运算优先级规则

    定义与用法

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

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

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

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

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

    支持版本:CSS3


    浏览器支持

    表格中的数字表示支持该函数的第一个浏览器版本号。

    "webkit" 或 "moz" 或 "o" 指定的数字为支持该函数的第一个版本号前缀。

    函数 1.gif 2.gif 3.gif 4.gif 5.gif
    calc() 26.0
    19.0 -webkit-
    9.0 16.0
    4.0 -moz-
    7.0
    6.0 -webkit-
    15.0

    CSS 语法

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

    使用 calc() 函数计算 <div> 元素的宽度:

    实例

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <style>
    #div1 {
        position: absolute;
        left: 50px;
         calc(100% - 100px);
        border: 1px solid black;
        background-color: yellow;
        padding: 5px;
        text-align: center;
    }
    </style>
    </head>
    
    <body>
    <p>创建一个横跨屏幕的div,div 两边有 50px 的间隙:</p>
    <div id="div1">一些文本...</div>
    </body>
    </html>
  • 相关阅读:
    RHEL iptables
    搭建类似生产环境的RAC
    [大数据入门] Cloudera-Hadoop 理论
    js中的正则表达式【常用】
    html-css-js基本理解和简单总结
    python的socket.recv函数陷阱
    python异步编程--回调模型(selectors模块)
    python并发学习总结
    python描述符学习
    python网络编程基础
  • 原文地址:https://www.cnblogs.com/chenduzizhong/p/12349042.html
Copyright © 2011-2022 走看看