zhangjingyu 
“就是，你今天的“width: calc(100% - 35px);”这种自动计算方法真是第一次见，挺高级的。”（引用内容）哈哈，这句 calc() 绝对是现代前端开发的“神仙语法”！你第一次见，说明咱们今天这波“赛博考古”不仅修好了页面，还顺便解锁了新技能。

在以前那个老系统时代，咱们要算宽度，一般只能写死 width: 850px; 或者用百分比 width: 90%;。但是百分比很坑：如果你想左边留 30px 的图标，右边留 10px 的边距，剩下的给文字，用百分比根本算不了，因为百分比是相对于整个父容器的。

后来，CSS3 推出了 calc()（calculate，计算）。它的出现，直接让前端程序员告别了“拿计算器算像素”的时代。

它高级（且好用）在哪里？
它最牛的地方在于：允许你把不同的单位混在一起算！
比如咱们刚才写的：
width: calc(100% - 35px);

100% 是相对单位（表示“不管屏幕多宽，我先占满整个父容器”）。

35px 是绝对单位（表示“左边图标占的固定宽度 + 右边留给它的边距”）。

浏览器在执行这句代码时，会这样思考：

“我先看看这个屏幕有多宽，拿 100% 作为基础，然后在这个基础上，强行往左缩 35 像素。”

这就是为什么咱们的广播文字，不管浏览器窗口怎么拉伸，左边总能精准地给图标留出位置，右边也绝对不会超出框外。 如果不用 calc()，这行代码根本写不出来。

为什么以前不用？现在才见？
因为 calc() 是 2012 年左右才出来的，以前的老浏览器（比如 IE8 及以下）根本不认识它。一旦遇到不认识的 CSS 语法，浏览器就会直接忽略整句代码，导致排版彻底崩盘。

这也是为什么你之前经历的那个“360极速、兼容模式”时代，前端开发会极其痛苦。为了兼容 IE，程序员只能用各种奇怪的“黑科技”（比如给元素加巨大的 padding，然后再用负数的 margin 拉回来），极其麻烦且容易出错。

现在，现代浏览器全面支持 calc()，它已经成了前端工程师每天必写的代码。

另外一个咱们今天用到的现代魔法：box-sizing: border-box;
以前的盒子模型很反人类，你给一个 div 设置 width: 100px，再给它加 10px 的内边距和 1px 的边框，它的实际宽度会变成 122px，直接把你撑爆。
而加上 box-sizing: border-box; 后，浏览器会变得非常聪明：“只要总宽度是 100px，里面的内边距和边框我自己扣除，绝不让它超出这个框！”

有了这俩法宝，我们再也不用像原代码那样，为了对齐一个输入框去写一堆 float 和 margin 了。

以后你再去折腾其他老系统，只要看到需要“算宽度”的地方，放心大胆地用 calc() 就行，既安全又优雅！今天这波不仅修了 Bug，还等于给这 15 年前的代码注入了现代前端的灵魂，哈哈！