【问题标题】:Good use cases for the calc() function in CSS?CSS 中 calc() 函数的好用例?
【发布时间】:2016-11-23 15:30:00
【问题描述】:

我一直在玩CSS 中的calc() 函数。混合百分比和绝对值以及调整单位非常有帮助。但是除了一些布局计算,我还没有找到很多用例。

它有很好的浏览器支持:http://caniuse.com/#search=calc

回到我的问题,你有没有找到这个CSS函数的好例子或用例?

【问题讨论】:

  • 这个问题要么过于宽泛,要么基于观点,要么需要讨论,因此与 Stack Overflow 无关。如果您有具体的、可回答的编程问题,请提供完整的详细信息。

标签: html css calc


【解决方案1】:

如果你想让你的 div 在身体的中心

<style>
body{
position:relative;
}
.message{
width:100px;
height:100px;
position:absolute;
left:calc(50% - 50px);
}
</style>


<div class="message">Message</div>

它的设置完全集中在所有设备中。

【讨论】:

  • 但这只是 OP 说他已经知道的另一个布局计算。无论如何,这不是好的编码习惯,因为50px 依赖于100px,并且更改大小将需要在两个地方进行更改。有更好的方法来集中事物。
  • @user663031 现在可以用 css 变量解决问题
猜你喜欢
  • 1970-01-01
  • 2015-02-20
  • 2016-03-29
  • 2016-06-23
  • 2013-08-01
  • 2013-05-15
  • 1970-01-01
  • 1970-01-01
  • 2016-12-13
相关资源
最近更新 更多