【转】CSS3的calc()使用——精缩版

前端开发 作者: 2024-08-25 22:40:02
问题:在制作页面的时候,总会碰到有的元素是100%的宽度。如果元素宽度是100%时,只要在元素中添加了border,padding,margin任何一值,都将会把元素盒子撑破(标准模式下,除IE怪异模

什么是calc()?

calc()能做什么?

calc()语法

.elm {
  width: calc(expression);
}

calc()的运算规则

  1. 使用“+”、“-”、“*” 和 “/”四则运算;
  2. 可以使用百分比、px、em、rem等单位;
  3. 可以混合使用各种单位进行计算;
  4. 表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;
  5. 表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。

浏览器的兼容性

.elm {
    /*Firefox*/
    -moz-calc(expression);
    chrome safari
    -webkit-calc(expression);
    Standard 
    calc();
 }
<div class="demo">
     ="box"></div>
</>    
.demo {
    width: 300px;
    background: #60f;
}
.box { 100%; #f60;
    height: 50px;
}

  background:
  height: 50px;
  padding: 10px;
  border: 5px solid green;
}
 #60f;
padding: 3px 0;    
} 5px solid green;
}

    padding: 3px 0;
}
    border: 5px solid green;
width: 90%;写给不支持calc()的浏览器-moz-calc(100% - (10px + 5px) * 2);-webkit-calc(100% - (10px + 5px) * 2); calc(100% - (10px + 5px) * 2);
}
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_68637.html