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; }
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/18738.html