你的位置:首页 > 软件开发 > 网页设计 > CSS3 calc()函数使用

CSS3 calc()函数使用

发布时间:2017-08-22 12:00:10
1、calc是什么?calc是英文单词calculate(计算)的缩写,用于动态计算长度值。calc()函数支持 "+", "-", "*", "/" 运算;+ 和 - 运算符的两边必须始终要有空 ...

1、calc是什么?

calc是英文单词calculate(计算)的缩写,用于动态计算长度值。

  • calc()函数支持 "+", "-", "*", "/" 运算;
  • + 和 - 运算符的两边必须始终要有空白符。比如 calc(50% -8px) 会被解析成为一个无效的表达式:一个百分比后跟一个负数长度值。而 calc(8px + -50%) 会被解析成为一个长度后跟一个加号再跟一个负百分比。

    4、示例代码

    <!DOCTYPE html><html> <head>  <meta charset="utf-8" />  <title>CSS3 calc()函数应用</title>  <style>   * {    padding: 0;    margin: 0;   }      .test {    width: calc(100% - 50px);    border: 1px solid red;   }  </style> </head> <body>  <div class="test">我的宽度为100% - 50px</div> </body></html>

    效果:

    CSS3 calc()函数使用

     

    原标题:CSS3 calc()函数使用

    关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。