魔法哥快问快答（第二季 ‧ 第一期）

前言

魔法哥 “快问快答” 栏目重装上阵，第二季启动！

经常有网友给我留言，咨询问题或寻求建议。我发现很多朋友的疑惑其实是共通的。于是我想，如果把这些问答整理出来让更多的人看到，应该能发挥更大的价值吧！

这便是创立 “快问快答” 这个栏目的初衷。希望这些问答能对你有所启示；如果你也想提问，直接在 “CSS魔法” 微信公众号内留言就可以了。

技术答疑

Q

公众号网友卢通提问：

我想问您一下，所有 CSS 都可以用在任意一个 HTML 元素上吗？

A

理论上是这样。但有些属性对特殊元素不生效，比如给 <html> 设置 display:inline 是不生效的；另外，属性与属性之间也是有制约关系的，比如我们给行内元素设置宽高也是不生效的。

Q

公众号网友 张建辉 提问：

用 CSS 属性 hyphens 来实现连字符断行，为什么没有作用呀？

A

建议看下当前浏览器是不是已经支持 hyphens 了，是不是需要加前缀；另外建议用长一些的单词来试试。

Q

公众号网友 侯志强 提问：

魔法哥，请教个问题。我拿到设计师提供 iPhone 6 的设计稿（@2x 图片），打算用 rem 单位实现大小屏等比缩放的布局效果。于是我设置根节点的字号 font-size: 62.5%（也就是 10px），然后对页面中各元素进行长度换算，就是把设计稿上的像素值除以 2 再除以 10（实际上就是除以 20）就是 rem 单位了。但是在 Chrome 61 版本下，在 Chrome 开发工具中预览元素的计算尺寸却是有问题的，比如 5rem 会被计算为 60px，而不是 50px。请问您知道是什么原因么？

A

为便于重现问题，我写了一个在线 demo： https://codepen.io/cssmagic/pen/VVEwEx

我发现原因是这样的：Chrome 有一个 “最小字号” 的设置，默认是 12px。所以即使 html {font-size: 62.5%} 计算得到 10px，Chrome 也会强制重设为 12px。于是 5rem 就相当于 60px 了。

如果想规避这个问题，又想方便地换算到 rem 单位，可以让 1rem 等于 50px，这样你甚至可以省掉 “除以 2” 这一步。

职业发展建议

Q

公众号网友千里提问：

魔法哥，我想问您个问题，作为一名编程语言初学者，我想学习 Web 前端，但现在企业又要求前端必须至少会一门后端语言。我现在大三，离毕业还有一年多时间，我是应该专注于学习前端还是前端和后端都学？我很困惑，所以想问问您。

A

“至少会一门后端语言”，我理解这个标准是比较宽松的。企业要求这一点，主要希望前后端可以更好地配合与补位。比如前端要有能力独立写模板、改后端 MVC 的 Controller 等等，但应该不至于要求独立写整个后端。所以你自己掌握一下这个度吧，合理分配精力。

Q

公众号网友 Rocken 提问：

我是一个大一学生，就要大二了，但在学习方式上很迷茫。实验室的老师总说看书没用，要参与项目，在项目中去掌握。但我感觉这样的话不会构建全面的知识框架，只能成为所谓的 “小前端”。

我想通过看书，这样是一种主动吸收知识的做法，并且我也感到随着看的书越来越多，大脑里好像有了知识框架的雏形。实验室的老师原来是在中科院工作的，好像权威一样，我不知道是他对还是我对，您能给我点建议吗？

A

我大致明白你的意思了。两条路可以同时走，一边做项目边用边学，一边看书系统地学。两者互补，学以致用，不矛盾的。

另外，您觉得看书数量多好还是深好啊？

看书要多，也要深。如果手里有好几本书，可以先全部扫一遍，然后感觉比较好的书可以深入多读几遍。

Q

公众号网友 Abner 提问：

魔法哥，你好，自从在慕课网里面看到了你的课以后，就开始关注公众号、买书、看文章，一路走来收获满满，非常感谢魔法哥的付出。

但是近期我又开始迷茫了（目前大四）。自己一路踩坑爬坑，终于有了比较好的 JS、CSS 等前端方面的基础知识（基础能打 75 分吧）。现在不满足于 “还原设计稿” 这方面的练习，还想做点其他的练习，以及学习新的内容，特别是想往 Node.js 和 Vue 那边靠拢。奈何找不着一条好的学习和练习路线。而且马上快要毕业了…………

……

完整文章已收录到 “CSS魔法” 微信公众号，微信扫码即可阅读全文：

cssmagic / blog