Open cssmagic opened 7 years ago
“快问快答” 第一季完结篇。
微信网友 无印良品 提问：
我想问一下，vertical-align 该怎么用？我在网上也看过很多资料，感觉写得都不是很准确。有可能是我自己没理解到，但实际测试的时候根本不是网上说的那样。
vertical-align
你好，vertical-align 分为表格单元格和行内布局两种场景，基本是两回事儿。后者很难理解，我的建议是不要死磕，好在实际开发中用得不多（可以绕过）。
这类问题还是建议参考《CSS 权威指南》的讲解，如果英语能力不错的话可以参考 MDN。
微信网友 王旭 提问：
您好，我想问下子 div 的高度怎么和外面容器的高度自动保持一致？在不用定位的情况下。
div
你的需求似乎是两列等高？第一选择自然是 FlexBox。
如果你的用户的浏览器还不能很好地支持 FlexBox，那还可以试试下面这两种方法：
display: table-cell
padding-bottom
margin-bottom
overflow: hidden
不过这两种方法只适用于通过背景色来体现列高度的情况，如果列有边框就不合适了。
微信网友 叶子 提问：
你好，魔法哥，我想问下关于 JS 怎么学才好？我没有编程基础，JS 编程有些困难。
JS 语言还算比较容易入门的，而且任何一个浏览器都可以成为试验田。所以不要有顾虑，想学就去学吧！
往期的 “快问快答” 里提到过一些 JS 入门的建议，你可以参考一下。
微信网友 程迦 提问：
你好，我是一名初学前端者，想请你推荐一下比较新的、靠谱的书籍或者网站，谢谢！
如果是初学者的话，我应该还是会推荐那些经典老书。请参见往期的 “快问快答”。
已经有《CSS 权威》和《精通 CSS》了，还需要吗？
在 CSS 方面，先看这两本应该够了。关于推荐的 JS 入门书，请参见 “快问快答” 第一期。😃
微信网友 胜利即是正义 提问：
魔法哥，最近有点迷茫了，来回在啃《JS 权威指南》、《JS 高级程序设计》、《精通 JS》三本书，每次一到 Ajax 那一块就不知道怎么办，因为不知道从何练起。而且想学习一门框架，求推荐，看了下 React 有点不太容易懂。
先不要看原生的 Ajax 实现，先用库（比如 jQuery）来写 Ajax。练习 Ajax 需要在本地搭一个简单的静态 web 服务器，用于响应前端发来 Ajax 请求。从最简单的开始，jQuery 的 $(elem).load(url) 方法可以直接请求 HTML 片断并填充到指定容器中，你写个基本的更新局部内容的 Ajax 效果就会逐渐有感觉了。
$(elem).load(url)
你目前的阶段可能不适合直接硬啃 React。建议打好 JS 基础，有了一定的网页开发经验之后，可以看看 Vue 这个框架。
微信网友 蛋炒饭 提问：
魔法哥你好，我自学前端有半年多的时间了，HTML/CSS/JS 基本都算熟悉，看了几本经典书，自己也做了几个模仿别人的网站，但是感觉自己的代码有很多不足的地方需要优化。最近在看 JS 面向对象编程方面的书，但是感觉有点一知半解，不知道是该继续看面向对象的内容还是研究其他的，没有方向。 另外我上传了一个仿京东商城的网站（此处已略去地址），希望你能抽空看一下给出宝贵建议，谢谢！
魔法哥你好，我自学前端有半年多的时间了，HTML/CSS/JS 基本都算熟悉，看了几本经典书，自己也做了几个模仿别人的网站，但是感觉自己的代码有很多不足的地方需要优化。最近在看 JS 面向对象编程方面的书，但是感觉有点一知半解，不知道是该继续看面向对象的内容还是研究其他的，没有方向。
另外我上传了一个仿京东商城的网站（此处已略去地址），希望你能抽空看一下给出宝贵建议，谢谢！
关于 JS 面向对象，如果你暂时还没有感觉，可以先放一放，可能时候还没到。简单的业务需求采用过程式编程方法就可以解决，没必要硬上 OO。先去看看 JS 的其它实践和理论，说不定哪天自然就悟通了。
另外，关于仿站，我在往期的 “快问快答” 中提到过如何通过仿站来提高水平，你可以参考一下。
你上传的这个仿站作品我粗略看了一遍，基本的交互效果都有了，挺不错的。但界面之下的前端基本功还是欠缺了一些，我挑一些有代表性的问题指出来，供你参考，也供其它读者参考：
图片格式是有讲究的，需要根据图片的特点来选择合适的格式，不要一存为 JPG 或 PNG。PNG 也有 8 位 / 24 位色深、1 位 / 8 位透明之分，需要留意。现在大多数刚入行的前端工程师都对图像处理和优化一无所知，如果你掌握了，这就是你的优势。
页面布局是错位的，一定要记得在不同分辨率下测试你的作品。
部分链接文字在悬停状态下的颜色和背景色设成一样了，无法阅读，这应该是你的疏忽。新手多毛糙，如果你细心，这就是你的优势。
页面元素的结构太过扁平，建议按功能区块收拢为树形。这样不论是看代码还是写代码，都可以一级一级深入，由整体到细节，便于控制关注点。
代码风格不严谨，在缩进时混用空格和 tab。真的不怕被同事打死吗？
在 CSS 中，同一属性的加前缀写法建议放在标准写法的前面，让标准写法来兜底，理论上更安全一些。你有些地方是这样写的，有些地方又不是，不一致。另外，现在大家实际上都是用工具来自动加前缀了，前端工程也是要了解一些的。
font-family: "Microsoft Yahei" 这种写法不好。一来不要只面向 Windows 用户写样式（说白了就是不要只面向自己），二来需要指定一个通用字族（比如 Sans-Serif）。光写一个微软雅黑，意味着你对非 Windows 用户的显示效果没有任何控制力。
font-family: "Microsoft Yahei"
Sans-Serif
JS 代码一看就是新手写的。比如 if (foo !== bar) {return false} else {return true} 这样的代码应该简化成 return foo === bar；代码缺少组织和约束，一堆函数都泄漏到全局作用域了，等等。
if (foo !== bar) {return false} else {return true}
return foo === bar
浏览器环境比较凶险，新手写原生 JS 一般是写不好的，比如 window.onload === function () { ... } 这种代码只能出现在 demo 中，不可能用在生产环境。还是加个 jQuery 来帮你解决基本问题吧。
window.onload === function () { ... }
JS 的各种命名不规范，比如写 OO 时，类的名字应该名词，方法名应该是动词，等等。
我猜你的代码应该是纯手写的。其实上面很多问题 IDE 都会帮你报出来。用好工具，事半功倍。加油加油！
微信网友 XXig 提问：
老师您好，我毕业前在学校工作室做了近两年项目，边上课边工作，做的工作就是美工（设计 + 前端布局）。自己慢慢摸索，也有了一定的成长。毕业之后，我去外面招聘时，发现自己掌握的技能十分尴尬——既不是设计也不是前端。因为我专业是计算机，设计方面的知识完全欠缺，说白了自己就是个素材搬运工，会用设计软件罢了；至于前端，只会 DIV + CSS + 简单的 JS 效果，而 Ajax 之类数据交互是完全不会的。发现这个问题之后，我下了个决心，放弃设计方面的扩展，主攻前端。作出这个决定我也很无奈，因为对于设计我还很是喜欢的，反而对于 JS 是有点头疼，所以我也不知道这个决定是否正确。或者说如果还有别的发展方向，该是什么呢？
看到你的情况我也觉得有些遗憾。互联网行业经过这几年的飞速发展，岗位分工已经相当细化和明确。在学校时多接触一些方向是不错的，而找工作时确实要瞄准一个点。不过你还相当年轻，目前先选定一个方向，后面仍然有很大的调整余地。
你决定放弃设计、选择前端，已经说明了你内心的取舍。编程本来就不是容易的事，入门遇到困难是再正常不过的。既然选择了前端，就耐心走下去。把设计先放下，作为业余爱好也是不错的，当你积累了一定的前端经验之后，将来如果转行做网页设计或产品策划，也是一种难得的优势。
微博网友 Wadehe** 提问：
你好，我是一名三本的大四学生。自学了前端，觉得能力已经到了能够胜任实习生的程度了，可是简历频频被拒……校招进大公司我是不奢求了，只想去个小的、能学到东西的创业公司，可是到现在连个面试机会都没有。能帮我看看是什么问题吗？下面是我的自己做的一些小作品（此处已略去地址），如果觉得对于胜任实习生还是太菜的话就直接让我回炉重造吧 😂
顺便问一下，你是哪个专业的？
我是计算机的……可是大三下学期才开始学编程，之前都搞平面设计去了。学前端到现在大概是半年，也知道自己基础不行，现在在狂补计算机网络、操作系统、数据结构、算法等知识。 中间还有俩月是去做专业的嵌入式小项目了没碰前端，实际大概就四个多月。我想说的是自己也不笨，学习能力也不算差吧，还是说真的是我能力问题呢？
我是计算机的……可是大三下学期才开始学编程，之前都搞平面设计去了。学前端到现在大概是半年，也知道自己基础不行，现在在狂补计算机网络、操作系统、数据结构、算法等知识。
中间还有俩月是去做专业的嵌入式小项目了没碰前端，实际大概就四个多月。我想说的是自己也不笨，学习能力也不算差吧，还是说真的是我能力问题呢？
你的情况跟上面的一位同学十分相似，可以参考我给他的建议。关于你的仿站作品，也可以自查一下我给他提出来的那些问题——如果你也有类似的问题，说明你的基本功还是不够好。
这并不是笨不笨的问题，而是有没有学到位的问题。四个月的时间学习前端，确实不算长。继续加油吧！
后记 “快问快答” 这个栏目已经写到第六期了，累计回答了近 50 位网友的问题。在一行行问答之间，我可能帮你解决了眼前的小问题，也可能无意中影响了你的人生大方向。我相信，把这些问答记录下来并分享出来，获益的将远远不止这 50 位朋友——这便是这个栏目创立的初衷啦！ 写到这里，我打算让这个栏目暂时告一段落了。因为一方面，大家遇到的问题都是类似的，尤其是最近这两期，大家的问题已经开始有重复的趋势了；另一方面，我还有更多类型的文章想写，还有更多的惊喜要带给大家，要继续关注 “CSS魔法” 微信公众号哦！
“快问快答” 这个栏目已经写到第六期了，累计回答了近 50 位网友的问题。在一行行问答之间，我可能帮你解决了眼前的小问题，也可能无意中影响了你的人生大方向。我相信，把这些问答记录下来并分享出来，获益的将远远不止这 50 位朋友——这便是这个栏目创立的初衷啦！
写到这里，我打算让这个栏目暂时告一段落了。因为一方面，大家遇到的问题都是类似的，尤其是最近这两期，大家的问题已经开始有重复的趋势了；另一方面，我还有更多类型的文章想写，还有更多的惊喜要带给大家，要继续关注 “CSS魔法” 微信公众号哦！
本文在 “CSS魔法” 微信公众号首发，扫码立即订阅：
© Creative Commons BY-NC-ND 4.0 | 我要订阅 | 我要打赏
快问快答（第六期）
技术答疑
Q
微信网友 无印良品 提问：
A
你好，
vertical-align分为表格单元格和行内布局两种场景，基本是两回事儿。后者很难理解，我的建议是不要死磕，好在实际开发中用得不多（可以绕过）。这类问题还是建议参考《CSS 权威指南》的讲解，如果英语能力不错的话可以参考 MDN。
Q
微信网友 王旭 提问：
A
你的需求似乎是两列等高？第一选择自然是 FlexBox。
如果你的用户的浏览器还不能很好地支持 FlexBox，那还可以试试下面这两种方法：
display: table-cell样式。padding-bottom和负的等值的margin-bottom，然后给容器加overflow: hidden来把超出部分裁掉。不过这两种方法只适用于通过背景色来体现列高度的情况，如果列有边框就不合适了。
前端学习建议
Q
微信网友 叶子 提问：
A
JS 语言还算比较容易入门的，而且任何一个浏览器都可以成为试验田。所以不要有顾虑，想学就去学吧！
往期的 “快问快答” 里提到过一些 JS 入门的建议，你可以参考一下。
Q
微信网友 程迦 提问：
A
如果是初学者的话，我应该还是会推荐那些经典老书。请参见往期的 “快问快答”。
在 CSS 方面，先看这两本应该够了。关于推荐的 JS 入门书，请参见 “快问快答” 第一期。😃
Q
微信网友 胜利即是正义 提问：
A
先不要看原生的 Ajax 实现，先用库（比如 jQuery）来写 Ajax。练习 Ajax 需要在本地搭一个简单的静态 web 服务器，用于响应前端发来 Ajax 请求。从最简单的开始，jQuery 的
$(elem).load(url)方法可以直接请求 HTML 片断并填充到指定容器中，你写个基本的更新局部内容的 Ajax 效果就会逐渐有感觉了。你目前的阶段可能不适合直接硬啃 React。建议打好 JS 基础，有了一定的网页开发经验之后，可以看看 Vue 这个框架。
Q
微信网友 蛋炒饭 提问：
A
关于 JS 面向对象，如果你暂时还没有感觉，可以先放一放，可能时候还没到。简单的业务需求采用过程式编程方法就可以解决，没必要硬上 OO。先去看看 JS 的其它实践和理论，说不定哪天自然就悟通了。
另外，关于仿站，我在往期的 “快问快答” 中提到过如何通过仿站来提高水平，你可以参考一下。
你上传的这个仿站作品我粗略看了一遍，基本的交互效果都有了，挺不错的。但界面之下的前端基本功还是欠缺了一些，我挑一些有代表性的问题指出来，供你参考，也供其它读者参考：
图片格式是有讲究的，需要根据图片的特点来选择合适的格式，不要一存为 JPG 或 PNG。PNG 也有 8 位 / 24 位色深、1 位 / 8 位透明之分，需要留意。现在大多数刚入行的前端工程师都对图像处理和优化一无所知，如果你掌握了，这就是你的优势。
页面布局是错位的，一定要记得在不同分辨率下测试你的作品。
部分链接文字在悬停状态下的颜色和背景色设成一样了，无法阅读，这应该是你的疏忽。新手多毛糙，如果你细心，这就是你的优势。
页面元素的结构太过扁平，建议按功能区块收拢为树形。这样不论是看代码还是写代码，都可以一级一级深入，由整体到细节，便于控制关注点。
代码风格不严谨，在缩进时混用空格和 tab。真的不怕被同事打死吗？
在 CSS 中，同一属性的加前缀写法建议放在标准写法的前面，让标准写法来兜底，理论上更安全一些。你有些地方是这样写的，有些地方又不是，不一致。另外，现在大家实际上都是用工具来自动加前缀了，前端工程也是要了解一些的。
font-family: "Microsoft Yahei"这种写法不好。一来不要只面向 Windows 用户写样式（说白了就是不要只面向自己），二来需要指定一个通用字族（比如Sans-Serif）。光写一个微软雅黑，意味着你对非 Windows 用户的显示效果没有任何控制力。JS 代码一看就是新手写的。比如
if (foo !== bar) {return false} else {return true}这样的代码应该简化成return foo === bar；代码缺少组织和约束，一堆函数都泄漏到全局作用域了，等等。浏览器环境比较凶险，新手写原生 JS 一般是写不好的，比如
window.onload === function () { ... }这种代码只能出现在 demo 中，不可能用在生产环境。还是加个 jQuery 来帮你解决基本问题吧。JS 的各种命名不规范，比如写 OO 时，类的名字应该名词，方法名应该是动词，等等。
我猜你的代码应该是纯手写的。其实上面很多问题 IDE 都会帮你报出来。用好工具，事半功倍。加油加油！
职业发展建议
Q
微信网友 XXig 提问：
A
看到你的情况我也觉得有些遗憾。互联网行业经过这几年的飞速发展，岗位分工已经相当细化和明确。在学校时多接触一些方向是不错的，而找工作时确实要瞄准一个点。不过你还相当年轻，目前先选定一个方向，后面仍然有很大的调整余地。
你决定放弃设计、选择前端，已经说明了你内心的取舍。编程本来就不是容易的事，入门遇到困难是再正常不过的。既然选择了前端，就耐心走下去。把设计先放下，作为业余爱好也是不错的，当你积累了一定的前端经验之后，将来如果转行做网页设计或产品策划，也是一种难得的优势。
Q
微博网友 Wadehe** 提问：
A
顺便问一下，你是哪个专业的？
你的情况跟上面的一位同学十分相似，可以参考我给他的建议。关于你的仿站作品，也可以自查一下我给他提出来的那些问题——如果你也有类似的问题，说明你的基本功还是不够好。
这并不是笨不笨的问题，而是有没有学到位的问题。四个月的时间学习前端，确实不算长。继续加油吧！
往期回顾
© Creative Commons BY-NC-ND 4.0 | 我要订阅 | 我要打赏