利用钙（）属性在CSS3用公式表达的尺寸值

We want to achieve adaptive page layout, usually because of the existence of the margin, and more trouble; sometimes want to achieve adaptive width of input box, but also because of the presence of margin or padding, which is quite complicated, and because the browser compatibility which will lead to inconsistent results.CSS3 adds new attribute box-sizing to a certain extent to solve the above problems. 在今天的文章中，我们使用CSS3属性的另一个新的钙（）实现自适应的布局。

钙（）是一个新添加的属性CSS3。它允许您用算术表达式表示长度值，这意味着我们可以使用它来定义div的宽度和设置边距、填充、边框等。
钙（）的操作规则：
1。使用；；；；；；；四个操作；
2。百分比，PX，EM，REM和其他单位可以使用。
三.可以混合使用各种单位进行计算。

使用
（）语法很简单，就像我们学习加（+），减（-），乘（*），和（），使用数学表达式来说明我们年轻的时候。

CSS代码将内容复制到剪贴板。
{。haorooms
宽度：钙（表达式）；
}

所以填充、边距和百分比一起使用，这个问题就可以解决了。

例如，我们缘20px。所以我们可以把它写下来

CSS代码将内容复制到剪贴板。
haorooms {。
宽度：钙（100% 20px）； / /注：减去前后空间，否则可能不起作用！！
}

它也可用于如下：

CSS代码将内容复制到剪贴板。
{。箱
背景：# F60；
身高：50px；
填料：10px；
边境：5px固体绿；
宽度：90%；不支持钙（浏览器）。
宽度：-moz钙（100% -（（10px + 5px）* 2）；
宽度：WebKit的钙（100% -（（10px + 5px）* 2）；
宽度：钙（100% -（（10px + 5px）* 2）；
}

样品
实例1：位于外部边界的页面上的块元素。

CSS代码将内容复制到剪贴板。
{。旗帜
位置：绝对；
左：40px；
宽度：-moz钙（100% 80px）；
宽度：WebKit的钙（100% 80px）；
宽度：钙（100% 80px）；
边框：黑色固体1px；
盒子的影子：1px 2px；
背景颜色：黄色；
填料：6px；
文本对齐：中心；
}

示例2：自动调整窗体的大小并使其适应容器

CSS代码将内容复制到剪贴板。
输入{
填料：2px；
显示块；
宽度：-moz钙（100% 1em）；
宽度：WebKit的钙（100% 1em）；
宽度：钙（100% 1em）；
}

{ # formbox
宽度：-moz钙（100% / 6）；
宽度：WebKit的钙（100% / 6）；
宽度：钙（100% 6）；
border: 1px solid黑；
填料：4px；
}

xml代码将内容复制到剪贴板。

型的东西：