We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
“快问快答” 第一季完结篇。
微信网友 无印良品 提问：
我想问一下，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 | 我要订阅 | 我要打赏
The text was updated successfully, but these errors were encountered:
No branches or pull requests
快问快答（第六期）
技术答疑
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 | 我要订阅 | 我要打赏
The text was updated successfully, but these errors were encountered: