CSS 布局通过 calc() 变得更加智能
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
若要创建美观的 CSS 布局,首先需要为 Web 应用中放置的所有内容分配大小。一直以来,开发者迫切需要的一项功能是,能够使用各种尺码单位来指定尺寸。例如,如果能够保留 50% 的区域和固定量的空间(例如 10 像素),那就再好不过了。现在,您可以使用 calc()
属性来完成这项工作。您可以在任何使用长度或数字的地方使用此功能,以便将其用于定位对象,或者也用于 rgb()
颜色值,因此它在样式表中拥有很大的作用。
calc() 有什么作用?
calc()
属性可以在样式表中包含 CSS 长度或数量的任何环境中使用。
它提供了两个主要功能,使布局更加灵活:
- 将百分比和绝对值混合使用。
- 使用多种不同的尺寸单位。
将百分比与绝对单位混合
我们来看一个混合使用百分比和绝对单位的示例。假设我们想分配 50% 的可用区域少 50% 的固定像素,那么可以按以下方式编写:
#foo {
width: calc(50% - 100px);
}
<div id="foo">Always 100 pixels less than half the available area</div>
如果背景颜色为绿色,应如下所示:
如果缩小父级大小,则如下所示:
这样做的好处在于,我们始终知道内容的右侧边缘将位于包含区域中间左侧 100px 的位置。通过这种方式组合不同的值类型,您的 Web 应用可以处理不同尺寸设备上的布局,并且控制力比以前要好得多。
混合单位
另一个很棒的功能是,能够将具有不同尺寸的单位结合起来,从而得出尺寸。例如,您可以混合使用“em”和“px”单位,以设置相对于当前字体大小的大小。
#bar {
height: calc(10em + 3px);
}
您可以在此处和此处找到一些合并值的绝佳示例。
试试看
通过 calc()
,您可以使用 +、-、* 和 / 对值进行加减乘除运算,从而允许各种可能性。您可以在可以使用 CSS 长度或数字的任何位置使用 calc()
。我们也正努力尽快为角度和频率属性添加 calc()
。现在,在 Chrome 19(开发者版)中,可以使用 -webkit-calc
属性指定长度的 calc()
属性;自版本 8 起,在 Firefox 中使用 -moz-calc
属性;在 Internet Explorer(自版本 9 开始)中,无前缀属性。请在下面发表评论,告诉我们你的想法。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2012-03-28。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"没有我需要的信息"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"太复杂/步骤太多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"内容需要更新"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻译问题"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/代码问题"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"易于理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"解决了我的问题"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u6700\u540e\u66f4\u65b0\u65f6\u95f4 (UTC)\uff1a2012-03-28\u3002"}
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2012-03-28。"]]