css calc运算 |css3漂浮广告效果

css重叠物品，css div 不溢出，数字变化效果css，css3 otf字体，css3新增背景样式，css中线性渐变是什么，css3漂浮广告效果 css calc运算 |css3漂浮广告效果

/* 假设大家已经定义了一个宽度为800px的容器 */
.container {
width: 800px;
}
/* 在容器中放置两个相等宽度的元素 */
.item {
width: calc((100% - 20px) / 2); /* 20px为元素之间的间隔 */
float: left;
margin-right: 20px;
}

calc()函数支持加、减、乘、除四种数学运算。大家可以使用像像素(px)、百分比(%)、视窗单位(vw、vh)等单位来执行这些运算。

/* 在一个相对位置的div中，让它的top、bottom空出页面高度的40% */
.relative-div {
position: relative;
top: calc(40% + 20px);
bottom: calc(40% + 20px);
}

当然，大家还可以结合calc()函数与其他CSS特性一起使用，比如想让一个元素的宽度永远保持4:3的比例：

/* 一个4:3比例的元素 */
.element {
width: calc(100% / 3 * 4);
height: 0;
padding-bottom: calc(3 / 4 * 100%);
}

需要注意的是，calc()函数的表达式必须在计算的最大范围内是合法的，否则会导致CSS解析器错误。

/* 以下代码无效，因为calc()函数的参数超出了浏览器支持的最大范围 */
.item {
width: calc(999999px + 1px); /* 错误 */
}

因此，使用calc()函数时应该在CSS中掌握好数学知识，以保证表达式的正确性，使得页面的布局可以更为灵活、简洁。