整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
做自适应布局的时候，最常使用的解决方法就是在页面初始化时，利用js去获取宽高再计算。或者就是box-sizing。但接触clac()以后发现，实现自适应原来可以如此简单。
calc()看起来像是一个函数，不太像是在css中的一部分。但它就是属于css3的属性，而且还可以运算。
什么是calc()?
其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。著作权归作者所有。
calc()能做什么？
calc()说白了就是为dom元素提供计算，通过使用百分比、em、px、rem等长度单位值或像素单位值计算出满足条件的宽高。如此一来，自适应的问题可以丢给浏览器去计算。加上使用box-sizing属性，可以实现完美的布局。
calc()的使用方法和规则
calc()括号内使用普通的数学运算表达式，例如：加减乘除四则运算。数值可以使用几乎所有长度单位。但如果没有使用固定布局的元素，因其高度不定，故无法使用百分比进行计算。
语法注意事项
在表达式中使用加减运算符，运算符左右两边必须空格，否则会报错。例如：width:calc(50% - 10px)。而乘除运算符可以不需要空格，但为了规范化，建议也跟加减运算符一致，左右添加空格。
浏览器的兼容性
市面上90%的PC浏览器都支持calc()这个属性。IE9+、FF4.0+、Chrome19+、Safari6+都完美兼容，但是在不同内核的浏览器上，需要在其前面加上各浏览器厂商的识别符。而在移动端则不是很理想，因此推荐用于在pc操作频繁的产品，例如财务系统，erp系统。
SS calc() 属性可以用来计算给定元素的宽度，可以根据其他元素的样式设置来自动调整元素的宽度。
例如，如果要设置一个元素的宽度为父元素的 60%,可以使用以下代码:
width: calc(60% - 2px); 其中，"-2px"是为了留出一些空格，以便与父元素的宽度对齐。这个属性的意思是将元素的宽度设置为父元素的 60%,减去 2 像素的余数。
除了使用绝对值或百分比来设置宽度之外，还可以使用 CSS calc() 属性来计算其他属性。例如，要计算元素的高度，可以使用以下代码:
height: calc(100% - 2px); 这个属性的意思是将元素的高度设置为 100%,减去 2 像素的余数。
可以使用 calc() 函数计算任何差值，包括绝对值、百分比、长度值等等。例如:
width: calc(100% - 20px);
height: calc(50% - 10px);需要注意的是，CSS calc() 属性只能用于基本样式 (如 width、height、margin、padding 等),不能用于伪类 (如:hover、:first-child 等) 或属性 (如 display、transform 等)。
我们非常专注写代码时候，我们往往会无意识的写出一些无效CSS代码。 我把这种称为 “潜意识错误”。 导致这种错误后，我们经常会反问自己：“为什么我写出这样低级错误？” 不过，这些错误都比较好解决，不需要花很多时间，只要纠正一下就行了。
跟着本文看看，我会经常写哪些有趣的 CSS 错误。
我在font-size和font-weight之间经常犯错误，如下所示：
.title {
font-size: bold;
}
我也不知道啥原因，但有时我会忘记写百分比 ：
.title {
opacity: 50;
}
关于 opacity 我还经常犯下面错误：
.title {
/* 现这一点并不容易，你们看出错误在哪里吗? */
opaciy: 0.5;
是 light 还是 lighter ?
.title {
font-weight: light;
}
当你认为属性是padding，而实际上用的是padding-top时，就会发生这种情况:
.section {
padding-top: 10px 20px;
}
人才，优秀 。
对于 CSS Grid 有时我会潜意识的写 grid-column 而不是 grid-template-columns :
.section {
grid-columns: 1fr 1fr 1fr;
}
对于 CSS 变量的使用，我也经常忘记写 var ：
.title {
color: --brand-color;
}
正确的写法如下：
.title {
color: var(--brand-color)
}
对于重置 box-shadow 我经常用 0 来重置：
.title {
/* 非法的 */
box-shadow: 0;
}
正确的写法如下：
.title {
box-shadow: none;
}
隐藏元素可以使用 visibility，但我会经常这样写 ：
.title {
visibility: none;
}
正确的写法如下：
.title {
visibility: hidden;
}
对于 width 有时会脑抽 ，这样写：
.title {
widows: 100px;
}
对于 css 偏移属性，我也会经常这么写:
.elem {
left: 14;
}
少了啥，大家自己体会 。
如果你的代码没有高亮的提示的功能，你也许也会这样写 ：
.elem {
font-size: clac(14px + 1vw);
}
我记得曾经遇到过这样的错误 :
.elem {
color: #red;
}
不多说了，大家自己体会：
.title {
display: absolute;
}
.title {
translate: (-50%, -50%)
}
人才们的 【三连】 就是小智不断分享的最大动力，如果本篇博客有任何错误和建议，欢迎人才们留言，最后，谢谢大家的观看。
作者：Ahmad shaded 译者：前端小智 来源：sitepoint 原文：https://heydesigner.com/css-mistakes-on-autopilot/
*请认真填写需求信息，我们会在24小时内与您取得联系。
