cal css,CSS calc计算属性
calc()是css3的一个新增的功能,用来指定元素的长度,你可以使用calc()给元素的border、margin、pading、font-size和width等属性动态的设置值。
calc()语法
.element {
width:calc(expression);
}
calc()的运算法则
使用 "+"、"-"、"*" 和 "/" 运算
可以使用百分比、px、em、rem等单位运算
可以混合使用各种单位进行运算
表达式中有 "+" 和 "-" 时,其前后必须有空格。
表达式中有 "*" 和 "/" 时,其前后可以没有空格,但建议保留
浏览器的兼容性
在IE9+、FF4.0+、Chrome19+、Safari6+都得到了较好的支持,使用时同样在其前面加上各浏览器厂商的识别符前缀
.element {
-moz-calc(expression);
-webkit-calc(expression);
-o-calc(expression);
-ms-calc(expression);
calc(expression);
}
应用
众所周知,如果元素的宽度为100%时,其自身不带其它盒模型属性设置还好,如果有别的类似margin、padding或border的属性设置,那将导致盒子被撑破。为了解决撑破容器的问题,以前我们只能计算div.box的宽度,用容器的宽度减去padding和border的值 ,但有时候我们苦于不知道元素的总宽度,比如说是自适应布局,只知道一个百分比值,但其它的值又是*px之类的值,这就比较难解决了。随着css3的出现,其中利用box-sizing来改变元素的盒模型以达到最终想要的效果,但是calc()解决此问题更加方便。
body {
background: #E8EADD;
color: #3C323A;
padding: 20px;
}
.wrapper {
width: 1024px;
width: -moz-calc(100% - 40px);
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
margin: auto;
}
#header {
background: #f60;
padding: 20px;
width: cal(100% - 20px * 2);
}
#main {
border: 8px solid #B8C172;
float: left;
margin-bottom: 20px;
margin-right: 20px;
padding: 20px;
box-sizing: border-box;
width: 75%;
/*
width: 704px;
width: -moz-calc(75% - 20px * 2 - 8px * 2);
width: -webkit-calc(75% - 20px * 2 - 8px * 2);
width: calc(75% - 20px * 2 - 8px * 2);*/
}
#accessory {
border: 8px solid #B8C172;
float: right;
padding: 10px;
box-sizing: border-box;
width: calc(25% - 20px);
/*
width: 208px;
width: -moz-calc(25% - 10px * 2 - 8px * 2 - 20px);
width: -webkit-calc(25% - 10px * 2 - 8px * 2 - 20px);
width: calc(25% - 10px * 2 - 8px * 2 - 20px);*/
}
#footer {
clear: both;
background: #000;
padding: 20px;
color: #fff;
width: cal(100% - 20px * 2);
}
CSS3 calc()
test……
test……
test1……
test2……
test3……
footer
cal css,CSS calc计算属性相关推荐
- css calc 计算属性值
css calc 计算属性值 definition The calc() CSS function lets you perform calculations when specifying CSS ...
- html5的calc,CSS 计算属性 calc()的完整指南(下)
calc() 只作用于属性值 calc() 用于长度和其他数值 不能在媒体查询中使用 混合单位 与预处理器数学比较 本文接着之前未完的工作,恰好是周末,一次把它完成.如果我的工作对你有帮助,希望可以点 ...
- 前端css单位小结:vh、vw、百分比、rem、px、计算属性calc
写在前面: 本文作为本人学习总结之用,同时分享给大家~ 个人前端博客网站:zhangqiang.hk.cn 欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步! 前端c ...
- CSS 计算属性 calc()的完整指南(下)
从之前的文章:CSS 计算属性 calc()的完整指南(一),我们可以学习到几个方面: calc() 只作用于属性值 calc() 用于长度和其他数值 不能在媒体查询中使用 混合单位 与预处理器数学比 ...
- calc( )计算css属性值
calc()是css3的一个新增的功能,用来指定元素的长度.比如说,你可以使用calc()给元素的border.margin.pading.font-size和width等属性设置动态值.calc() ...
- css中会计算的属性,css3中样式计算属性calc()的使用和总结
calc的介绍 在css3样式中有一个类似与函数的计算属性calc(),它主要用于指定元素的长度,无论是border.margin.pading.font-size和width等属性都可以使用calc ...
- css 计算属性的应用_如何使用一点CSS Grid魔术设计计算器应用
css 计算属性的应用 by Deepika Gunda 由Deepika Gunda 如何使用一点CSS Grid魔术设计计算器应用 (How to use a little CSS Grid ma ...
- css之“计算属性“
no,no,no,这和vue的计算属性没有一点关系,所以这次介绍的也和vue无关. 相信大家和我一样,在开发中,也遇到过这样的问题: 我设计样式,多用百分比布局,这样在不同分辨率就不会出现特别大的偏差 ...
- [css] CSS中的calc()有什么作用?
[css] CSS中的calc()有什么作用? 用来计算长宽的属性,非常好用,百分比,px,vh/vm都可参与计算, 不过正如上面的大兄弟说的,运算符的左右要有空格,要不然不生效 个人简介 我是歌谣, ...
最新文章
- Swift语言实现代理传值
- html实现让电脑断网的功能,13. Electron 断网提醒功能的实现
- python【力扣LeetCode算法题库】14-最长公共前缀(列表解压)
- html 弹出遮罩 iframe,iframe正在加载时显示遮罩层 加载完毕后显示iframe
- 使用 Spring Batch 构建企业级批处理应用
- 手机浏览器页面知识收集
- Cython——[AttributeError: ‘MSVCCompiler‘ object has no attribute ‘compiler_so‘]解决方案
- Java二元运算和三元运算速度测试
- 2018/7/7-纪中某C组题【jzoj1494,jzoj1495,jzoj1496,jzoj1497】
- Requests API
- 最完整的android源码获取方法及环境建立
- ehcache讲解及实例
- pytorch 动态图机制
- OpenGL ES API with no current context
- 红米开发版刷机教程_红米K30开发版刷机包(官方完整最新固件升级包MIUI12)
- 高数教材班复习Hint(3.1-3.6)
- javascript继承的几种方式
- OpenCV图形处理基本概念
- 2020年黄历表_2020年黄历表(死亡时辰吉凶对照表)
- ABP-Hangfire定时任务