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