关于css基本语法正确的是

详细介绍css中的数学表达式calc()

啊？你问我关于 calc() 的事吗？上周有一个客户项目让我很头疼，不妨和你聊聊。

上次在杭州做项目的时候，遇到了一次恶作剧的操作。
当时有设计师要求中间栏的宽度为总宽度减去两侧固定栏的宽度，然后留出2 0px的边距。
如果只用百分比的话，肯定不行。
如果你想更难地计算，你就必须使用 calc。
例如，如果编写 .center{width:calc(1 00%
2 00px
2 00px
2 0px);}，则计算结果是减去 4 2 0px。
但是如果整体宽度减小得不够怎么办？你要注意危险——如果结果是负值，宽度等属性会被直接处理为0。
我记得调试了很长时间，屏幕上显示了一条窄条，这根本不是预期的自适应效果。

而且使用这个东西的时候一定要注意空格。
之前有一个实习生写了 .box{border:calc(1 px+1 px)solid black;} ，结果出错了。
加号两侧没有空格。
直接 CSS 解析失败，整个布局混乱。
我告诉他加空格就可以了，他还是不信，不过他改了一下就没事了。
这个细节非常重要。

兼容性也相当困难。
我记得2 02 2 年做过一次旧系统升级，IE9 下无法使用calc进行后台定位。
我当时真的认真思考过这个问题但最终我不得不使用JS来动态计算该值。
但现在各大浏览器都支持了，除非你还得维护IE1 1 ，那就是另外一回事了。

最好将其用于响应式布局。
例如，我曾经在上海调过一个应用程序。
header 的高度应该随着视口的高度而变化，但是固定的标签栏是 8 px 高，所以我不得不编写 .header{height:calc(1 00vh
8 px);} 或者创建一个三列布局，如 .right{width:calc(1 00%
1 00px
4 0px);} 在你的示例中，中间列的宽度会自动填充，这特别方便。

不过话说回来，如果你能用JS，就尽量用JS。
特别是对于需要根据用户行为动态改变的值，使用Calc进行困难的计算很容易出现错误。
比如我去年在深圳调试了一个轮播镜像。
必须根据图像计算高度并使用 Calc 进行编程。
结果，在更改小图像时，标题崩溃了。
最后还是改成JS动态获取图片高度比较靠谱。

无论如何，这取决于你。
Calc 适合简单的动态计算。
如果比较复杂或者不确定，就用JS。
我还在思考这个问题。

CSS语法空格和大小写

坦率地说，CSS 不区分空格或大小写，但不要让这个看似简单的规则欺骗了您。
扩展时，间距主要影响可读性。
例如，我去年运行了一个 3 000 级别的项目，在一行中写入 margin:0;padding:0 导致调试时出现混乱，因此适当添加空格是一个很好的做法。
还有一点是属性名不区分大小写，但是class和id与HTML结合使用时区分大小写。
去年，我的一个同学尝试将