css 属性 calc 的使用

calc 的用法

用于动态计算元素的长度
支持加、减、乘、除运算
运算优先级规则与数学运算优先级规则一致
运算符之间需要使用空格隔开，否则不会识别生效

calc 的使用示例

缝隙长度已知，计算元素的宽高

<div class="father"><div class="child">1</div><div class="child">2</div><div class="child">3</div>
</div>

.father {width: 200px;height: 100px;background: #ccc;
}
.father .child {/* 想要动态设置元素的宽高 *//* 距离父元素上下 20px，左右 10px，并且横向均匀分布 *//* 宽度的设置 *//* 横向，包含 3 个子元素和 4 个缝隙，每个缝隙的宽度为 10px，那么 3 个子元素需要平均分除去缝隙剩下的宽度 */width: calc((100% - 40px) / 3);margin-left: 10px;/* 高度的设置 *//* 纵向，包含 1 个子元素和 2 个缝隙，每个缝隙的宽度为 20px，那么 1 个子元素的高度就是整个的高度除去缝隙剩下的高度*/height: calc(100% - 40px);margin-top: 20px;background: #fff;float: left;text-align: center;
}

元素宽高已知，计算缝隙的长度

<div class="father"><div class="child">1</div><div class="child">2</div><div class="child">3</div>
</div>

.father {width: 200px;height: 100px;background: #ccc;
}
.father .child {/* 想要动态设置元素的宽高 *//* 宽度定死为 50px *//* 横向，包含 3 个子元素和 4 个缝隙，每个缝隙需要去平均分父元素除去子元素的剩下的宽度 */width: 50px;margin-left: calc((100% - 50px * 3) / 4);/* 高度定死为 50px *//* 纵向，包含 1 个子元素和 2 个缝隙，每个缝隙需要去平均分父元素除去子元素的剩下的高度 */height: 50px;/* 在盒子模型中，margin 和 padding 的百分比都是相对于父元素的宽度说的，所以这里无法用 100% */// margin-top: calc((100% - 50px) / 2);margin-top: calc((100px - 50px) / 2);background: #fff;float: left;text-align: center;
}

css 属性 calc 的使用相关推荐

前端css单位小结：vh、vw、百分比、rem、px、计算属性calc
写在前面: 本文作为本人学习总结之用,同时分享给大家~ 个人前端博客网站:zhangqiang.hk.cn 欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步! 前端c ...
CSS 计算属性 calc()的完整指南（下）
从之前的文章:CSS 计算属性 calc()的完整指南(一),我们可以学习到几个方面: calc() 只作用于属性值 calc() 用于长度和其他数值不能在媒体查询中使用混合单位与预处理器数学比 ...
css里calculate,calc() ---一个会计算的css属性
最近这个月一直在赶项目开发,遇到的问题和学到的前端知识没有更新到博客园,现在闲了下来,就整理一下前端知识. 在项目开发中,在样式这方面花费的时间较多,因为针对于数字的变化特别多,本人不爱记数字,在看设 ...
css中会计算的属性,2017年12月聚合文章--calc() ---一个会计算的css属性 | 码友网
最近这个月一直在赶项目开发,遇到的问题和学到的前端知识没有更新到博客园,现在闲了下来,就整理一下前端知识. 在项目开发中,在样式这方面花费的时间较多,因为针对于数字的变化特别多,本人不爱记数字,在看设 ...
calc() ---一个会计算的css属性
最近这个月一直在赶项目开发,遇到的问题和学到的前端知识没有更新到博客园,现在闲了下来,就整理一下前端知识. 在项目开发中,在样式这方面花费的时间较多,因为针对于数字的变化特别多,本人不爱记数字,在看设 ...
css中会计算的属性,css3中样式计算属性calc()的使用和总结
calc的介绍在css3样式中有一个类似与函数的计算属性calc(),它主要用于指定元素的长度,无论是border.margin.pading.font-size和width等属性都可以使用calc ...
[译] Font-size：一个意外复杂的 CSS 属性
原文地址:Font-size: An Unexpectedly Complex CSS Property 原文作者:Manish Goregaokar 译文出自:掘金翻译计划本文永久链接:githu ...
Css计算--calc（）方法
概述 calc() 此CSS函数让你在声明CSS属性值时执行一些计算.它可以用在如下场合:<length>.<frequency>, <angle>.<tim ...
使用@supports完美兼容CSS属性
今天写微信小程序遇到一个问题:给page加 150rpx 的 padding-bottom 值,我考虑到 iphone X 系列的底部黑线,参考我之前写的css属性--env()和constant() ...

css 属性 calc 的使用

calc 的用法

calc 的使用示例

css 属性 calc 的使用相关推荐

最新文章

热门文章