Open cssmagic opened 7 years ago
前言 在 “快问快答” 这个栏目中，魔法哥会回答具有普遍性的网友提问，希望这些问答对你也有启发；如果你也想提问，直接在 “CSS魔法” 微信公众号内留言就可以了。
在 “快问快答” 这个栏目中，魔法哥会回答具有普遍性的网友提问，希望这些问答对你也有启发；如果你也想提问，直接在 “CSS魔法” 微信公众号内留言就可以了。
微信网友 儿飞 提问：
魔法哥，我想问一下，给一个块（这个块没内容）设置背景图片，希望它自适应高度，能做到么？
让容器适应背景图片的尺寸，应该是不可以的。但反之，让背景图片适应容器的尺寸是可行的，background-size 属性的某些值就是干这个的。感觉你的这个需求应该用 <img> 标签来实现。
background-size
<img>
微博网友 黑子哲** 提问：
魔法哥，我写的一个播放器，动画没兼容好，在手机 Chrome 中可以转动；但是其他浏览器不转。有没有 CSS 动画属性的兼容表啊？感觉手机 UC 浏览器就像是 “新时代的 IE”，好多不兼容。 我改怎么写兼容呢，尽可能让所有浏览器都实现这个转动的效果？我感觉是不是 infinite 这个属性不支持？
魔法哥，我写的一个播放器，动画没兼容好，在手机 Chrome 中可以转动；但是其他浏览器不转。有没有 CSS 动画属性的兼容表啊？感觉手机 UC 浏览器就像是 “新时代的 IE”，好多不兼容。
我改怎么写兼容呢，尽可能让所有浏览器都实现这个转动的效果？我感觉是不是 infinite 这个属性不支持？
infinite
CSS 动画目前的兼容性可以说是非常好的，只要是支持 CSS 动画的浏览器，都完整支持了 animation 属性，无非就是需不需要加前缀的问题。查 CSS 或 JS 特性的兼容性，我一般会到 MDN 去查（比如这个页面的底部就有各浏览器对 CSS Animation 的支持情况： http://t.cn/z8WlQef ）。
animation
应该不会是 infinite 这个关键字不支持。所以还是请你自己查一下是不是 -webkit- 前缀没有加对，或者动画语法有没有写对。
-webkit-
微信网友 零碎，沉默 提问：
老师我想问一个问题，现在清浮动是用 clear: both、overflow: hidden 还是 after 伪类？
clear: both
overflow: hidden
after
你好，::after 是伪元素，不是伪类哦。基于 ::after 伪元素的闭合浮动方案（即 clearfix）是我最推荐的，因为概念比较清楚，而且不牵连其它元素，副作用小。只要容器的伪元素没有被占用，这个方案都是第一选择。
::after
微信网友 Xiaohua 提问：
魔法哥，问下 JS 没有形成编程思维（就是脑袋有流程了，但不知道该如何下手写），该怎么办？别人对我说的经验是多敲代码，多练手，是这样么？ 😳
我估计也是代码写少了。除了多写代码练手之外，还可以找一些大家公认清晰有条理的代码来读一读。
微信网友 赵斌 提问：
你好，想问下，如果现在要选一个 JS 框架来学，选择那个比较好呢？
你是说 MVVM 框架吗？我推荐 Vue.js 😉
一方面是因为目前 Vue 已经足够成熟，工具链也已经比较完善；另一方面是它对新手比较友好。
另外，我之前做过一些简单的网站，也读过几本书，经常逛博客和技术类网站，感觉自己最缺的是实战经验。能不能推荐几个比较好的、综合性比较强的开源实战项目啊？
这还真是不太好找。因为开源项目大多是类库，而我们通常需要的 “实战经验” 并不是开发类库的经验，而是实现业务的经验。所以如果你需要这方面的参考案例，可能只能从书籍或网上教程中去寻找了。
微信网友 小超超 提问：
作为一个写静态网页没问题的刚入门的初学者，不知道该把重心放在那一块。JS 和 jQuery 也刚入门，淘宝和京东都能写出来，请问后续该怎么学习？
一般来说，你接下来至少有三个选择：深入巩固 CSS；深入学习 JS 语言和常用类库；了解并实践一些 MVVM 框架。我不了解你的具体情况，只是粗略说一下我的想法：如果你不着急，可以从左到右来进行；如果你很着急，可以从右到左。
微博网友 DJL箫** 提问：
魔法哥，我最近参加校招，感觉笔试题跟前端根本没什么关系！加上自己又不是计算机专业，基础知识薄弱，笔试基本都过不了，怎么办啊？
你说的这种情况确实就是目前的行业现状。由于前端岗位的需求量在近几年发生了爆发式增长，招人来源不能再像前些年那样局限于后端转岗、设计师转岗和其它行业人士因兴趣转行所带来的流入，而是变成直接吞食计算机专业的毕业生（因为这个渠道的供给量大且稳定）——这跟后端岗位已经没有区别。因此，企业在校招或招收实习生时，往往不区分前后端职位，直接吃下满意者，随后再消化到各个岗位。
在海选阶段的笔试中，基本上也就不再特意区分前后端了。换句话说，这些笔试基本上就是面向计算机专业的学生的。由此产生的结果，就是前端岗位上计算机专业的比例越来越高，最终把其它专业驱逐干净。
那么非计算机专业的同学在计算机原理、算法等方面十分薄弱的情况下，如何找到心仪的前端职位呢？政治正确的回答当然是 “不是计算机专业也要学好这些基本功啊”……但我自己感觉这些知识在前端工程师的发展早期并不是那么急迫，因此，如果你因为某些原因不能/不愿意/没有条件在这个方向上取得进展，也不是无路可走。
我的建议是…………
……
完整文章已收录到 “CSS魔法” 微信公众号，扫码立即订阅：
© Creative Commons BY-NC-ND 4.0 | 我要订阅 | 我要打赏
快问快答（第五期）
技术答疑
Q
微信网友 儿飞 提问：
A
让容器适应背景图片的尺寸，应该是不可以的。但反之，让背景图片适应容器的尺寸是可行的，
background-size属性的某些值就是干这个的。感觉你的这个需求应该用<img>标签来实现。Q
微博网友 黑子哲** 提问：
A
CSS 动画目前的兼容性可以说是非常好的，只要是支持 CSS 动画的浏览器，都完整支持了
animation属性，无非就是需不需要加前缀的问题。查 CSS 或 JS 特性的兼容性，我一般会到 MDN 去查（比如这个页面的底部就有各浏览器对 CSS Animation 的支持情况： http://t.cn/z8WlQef ）。应该不会是
infinite这个关键字不支持。所以还是请你自己查一下是不是-webkit-前缀没有加对，或者动画语法有没有写对。Q
微信网友 零碎，沉默 提问：
A
你好，
::after是伪元素，不是伪类哦。基于::after伪元素的闭合浮动方案（即 clearfix）是我最推荐的，因为概念比较清楚，而且不牵连其它元素，副作用小。只要容器的伪元素没有被占用，这个方案都是第一选择。前端学习建议
Q
微信网友 Xiaohua 提问：
A
我估计也是代码写少了。除了多写代码练手之外，还可以找一些大家公认清晰有条理的代码来读一读。
Q
微信网友 赵斌 提问：
A
你是说 MVVM 框架吗？我推荐 Vue.js 😉
一方面是因为目前 Vue 已经足够成熟，工具链也已经比较完善；另一方面是它对新手比较友好。
这还真是不太好找。因为开源项目大多是类库，而我们通常需要的 “实战经验” 并不是开发类库的经验，而是实现业务的经验。所以如果你需要这方面的参考案例，可能只能从书籍或网上教程中去寻找了。
Q
微信网友 小超超 提问：
A
一般来说，你接下来至少有三个选择：深入巩固 CSS；深入学习 JS 语言和常用类库；了解并实践一些 MVVM 框架。我不了解你的具体情况，只是粗略说一下我的想法：如果你不着急，可以从左到右来进行；如果你很着急，可以从右到左。
职业发展建议
Q
微博网友 DJL箫** 提问：
A
你说的这种情况确实就是目前的行业现状。由于前端岗位的需求量在近几年发生了爆发式增长，招人来源不能再像前些年那样局限于后端转岗、设计师转岗和其它行业人士因兴趣转行所带来的流入，而是变成直接吞食计算机专业的毕业生（因为这个渠道的供给量大且稳定）——这跟后端岗位已经没有区别。因此，企业在校招或招收实习生时，往往不区分前后端职位，直接吃下满意者，随后再消化到各个岗位。
在海选阶段的笔试中，基本上也就不再特意区分前后端了。换句话说，这些笔试基本上就是面向计算机专业的学生的。由此产生的结果，就是前端岗位上计算机专业的比例越来越高，最终把其它专业驱逐干净。
那么非计算机专业的同学在计算机原理、算法等方面十分薄弱的情况下，如何找到心仪的前端职位呢？政治正确的回答当然是 “不是计算机专业也要学好这些基本功啊”……但我自己感觉这些知识在前端工程师的发展早期并不是那么急迫，因此，如果你因为某些原因不能/不愿意/没有条件在这个方向上取得进展，也不是无路可走。
我的建议是…………
……
……
往期回顾
© Creative Commons BY-NC-ND 4.0 | 我要订阅 | 我要打赏