calc()从字面上可以把它理解成为一个函数function,英文单词是calculate(计算),是CSS3的一个新功能,用来显示元素的长度。

他的用途就是,如果你有一个元素,加了padding或者border就超出了原来预想的效果,或者把元素盒子撑破,这时我们就可以用calc()了,

注意:

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

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

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

具体用法也很简单: 

.box{width: calc(100%-30px);padding-top: 30px;background-color: lightskyblue;} 

只是现在只有PC的浏览器可以兼容,在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支,在移动端除了firefox for android 14.0,是没有其他的可以兼容的。

-----------------------------------------------------我是分割线------------------------------------------------------

但是如果你想解决padding或者border造成的额问题,可以给元素加上box-sizing:border-box;这样元素还是原来的大小。不会被撑破。

最新文章

  1. WindowsForm公共控件--2016年12月5日
  2. nodejs学习笔记(1)--express安装问题:express不是内部也或者外部的命令解决方案
  3. 扩展SharePoint链接字段
  4. netty4 Handler的执行顺序
  5. 微软WTL模板库完整版安装(VS2010+windows7X64位环境下)分享
  6. 学会使用Ogitor
  7. Response.Redirect 打开新窗体的两种方法
  8. 【php】对PHPExcel一些简单的理解
  9. SPOJ VLATTICE Visible Lattice Points 莫比乌斯反演
  10. 【USACO 1.5.4】跳棋的挑战
  11. CentOS6下编译安装Python2.7.6方法
  12. IIS - HTTP 错误 500.21 - Internal Server Error 处理程序“WebServiceHandlerFactory-Integrated”在其模块列表中有一个错误模块“ManagedPipelineHandler”
  13. Android消息循环分析
  14. 采用malloc分别分配2KB个人空间,然后,realloc调整到6KB、1MB、3MB、10MB场地,分别这五内存“A”、“B”、“C”、“D”、“E”灌装
  15. 前端javascript基础总结(1)js的构成以及数据类型
  16. Mac入门推荐(写给Mac小白)
  17. android app内部更新适配到8.0
  18. js判断页面在pc端打开还是移动端打开
  19. Python备份MySQL数据库【转】
  20. 【SpringBoot】服务器端主动推送SSE技术讲解

热门文章

  1. note.js使用express创建项目的步骤以及ip和端口配置
  2. Canvas入门04-绘制矩形
  3. JAVA第四周总结与实验2
  4. 杭州集训Day4
  5. [Git] 020 stash —— Git 中的”皮姆粒子“
  6. The order of a Tree
  7. 7.golang的字符串 string
  8. 连连看(简单搜索)bfs
  9. html5动画之等待加载动画
  10. angular 示例项目