前端工程师总结 第1篇

浏览器的重构指的是改变每个元素外观时所触发的浏览器行为，比如颜色，背景等样式发生了改变而进行的重新构造新外观的过程。重构不会引发页面的重新布局，不一定伴随着回流。

回流指的是浏览器为了重新渲染页面的需要而进行的重新计算元素的几何大小和位置的，他的开销是非常大的，回流可以理解为渲染树需要重新进行计算，一般最好触发元素的重构，避免元素的回流；比如通过通过添加类来添加css样式，而不是直接在DOM上设置，当需要操作某一块元素时候，最好使其脱离文档流，这样就不会引起回流了，比如设置position：absolute或者fixed，或者display：none，等操作结束后再显示。

前端工程师总结 第2篇

做前端这几年，今年是在 GitHub 上最活跃的一年，利用业余时间，创建和维护了 6 个开源项目，还有剩下的 4 个是 2018 年创建的。

今年收获了 2460+ Star，和 920+ Follower ，数据如下：

GitHub 全球排名 2644，中国区排名 426 名左右，不知不觉间，原来已经走的那么远了啊。

但我的技术还很弱，还有很长很长的路要走。

对的事情，只要你坚持，就一定会有收获。

前端工程师总结 第3篇

今年把公众号名更名为 全栈修炼，笔名取名为 夜尽天明。

全栈修炼这个名字，很多人以为说的只是技术吧，但我给它的定位并不止于技术，而是以大前端技术为主，读书笔记、随笔、理财为辅，做个终身学习者，只是这几年都是以大前端技术为主而已。

夜尽天明这个名词是秦时明月里面的，天明是我最喜欢的角色，没有之一，所以笔名取名：夜尽天明。

天明这个角色在秦时明月里面，应该说是一个武功很差，而且脑子也不是很聪明的孩子，但他最大的优点就是充满勇气、不怕失败！而且他的目标就是不断变强，经历了大量磨难和战胜了很多困难后才会慢慢变强。

天明的这些特点都和我很像，唯一不同的是：我只想当一条咸鱼，哈哈哈。

我不喜欢把关注我的人称为粉丝，而更喜欢称他们为读者、后来者，或者是倾听者。

我只是表达我想表达的内容，想不想看是 TA 们的自由，我也不强推给 TA 们。

我很感谢我的读者，我写作的动力中，很大一部分就是读者给的，他们的 点赞、评论、关注 都会成为我的动力。

其实我更新公众号的内容一直比较佛系，有时一天一更，有时一周一更，甚至有时一月一更，非常佛系，名副其实的佛系公众号。

我还记得在一人 70 多人的前端号主群里，我问过大佬们一个问题：写公众号那么累，大佬们为什么而写公众号？

有大佬说是为了保护自己的原创、有大佬说是为了有点影响力、有大佬说不知道为了啥 ... 等等。

我说我是为了钱！相信很多大佬也是这样子吧，只是不说出来而已，觉得谈钱很俗而已。

我就是那么现实，是真的为了钱，谈钱不丢人，靠自己的努力挣钱，有什么丢人的。

它只是一个顺带的、自然而然发生的结果，英文上叫做 consequence，就是结果，而不是 object，object 就是目标。

你只有把另外一件事情作为目标，比如为别人创造价值，钱才会随之而来。

你为别人付出价值，你会得到相应的回报，这个时候，钱会作为一个结果而出现。

当你把赚钱作为目标的时候，你会发现你可能会误入歧途。

每件事情都要谈钱，你会被钱左右，想出各种花招，一遍遍地圈钱、割韭菜。

你甚至会开始追逐高风险和高利润，一心只想一夜暴富，从而丧失很多机会。

思考如何 “赚钱”，如何 “变现”，如何 “收割”，都可能会让你求之不得。

是啊，今年就经历过这种情况，给自己订了读者过万的目标，总是想着如何增加读者，就做了一些不太想做的事情。

比如：加某些大佬的群，把自己发的文章转发到群里面增加阅读量与读者，虽然能增加一定的量，但是我真的不喜欢这样。

就这样引流了大概几次吧，后面被某位大佬踢出群了，哈哈哈。

那次之后就不想做那些违心的事情了，把加的几个群全都退了，还是随心而行吧。

那有好几个公众号大佬，找我互推，但我都拒绝了，还是先扎扎实实做好优质内容再说吧。

认认真真写写技术、写写经验、写有价值的文章，做一个有作品的人。

所以在 2020 年，我给自己的公众号定的价值观是：如何给读者提供更多的价值！

慢慢来，比较快！

我的公众号其实是在 2018 年 6 月就已经在运营了的，一直有更新，到现在都一年半了，读者数量都还没过万，其实也挺失败的。

看到那些写了几个月的公众号，读者数量就过万了，我说我不羡慕是假的。

可能你会说：你说了那么多，还不是为自己的失败找借口。

嗯嗯嗯，你说的对，但我不听你的，哈哈哈~

不过我写技术公众号真的不挣钱、真的挣不了什么钱，对比于主业，可能每月挣的钱都没有工资的千分之一，或者百分之一。

因为我现在还没有把做技术公众号当作自己的副业，而是当作写技术文章的一个动力，更好的辅助我的主业前端生涯的发展而已。

今年从开通流量主以来，靠流量广告挣到的钱都在这里了。

因为我的公众号的文章，没有在文章中间插入广告，虽然靠微信的广告费是挣不了什么钱的。

但是就中间广告与底部广告来说，中间的广告费是比底部的广告费多的。

因为我很注重文章的阅读体验，也很注重文章排版，平时看文章都不想文章中间有广告，所以我就去掉了。

看我文章的读者的阅读体验是比较好的，比如这篇文章的阅读体验是不是很好呢。

2020 年，这些广告费都会用于抽奖送书活动，取于读者，还于读者。

我还记得当前有不少大佬说：每天更新、或者每周更新、写公众号真 TM 的累。

还有不少大佬因为发的文章质量差一点，引用过别人文章的小部分内容，被粉丝喷过、怼过、被说是抄袭、心理压力特别大，每天有 99 次想放弃，觉得自己坚持不下去了。

当时我说管它那么多干嘛，佛系更新 就好。

工作中不能如意的事情已经够多的了，自己的自由时间、自由表达的窗口 如果都不能随意一点，那生活真的没什么乐趣了啊。

因为我也写公众号，有看到有些公众号主，为了整理文章、写作，每天搞到零晨 2 - 3 点，每天只睡 4 个小时，还说先写十几、二十几年，我非常佩服，真的，但我不认同！

他是很拼，但是是在拼命！是有力过猛的表现！这样的姿态又能拼几年呢 ？

看看这些年，二三十岁就猝死的那些人，用力过猛就是其中的一个重要的因素。

动不动就给自己定个十几、二十年的目标，我觉得也不现实，正所谓：计划跟不上变化。

而我更加注重长远、可持续的发展！以人一生的时间来算，真的不必太着急。

虽然经常因为思如泉涌，一个不留意就写文章写到了零晨 1 点的情况也有，但是我平均每天都保证 7 小时的睡眠。

记得 2018 年的时候，技术的公众号还没那么多的，2019 年的时候，已经是到处都是了，几乎掘金首页上分享的文章都是公众号的号主写的。

现在还想靠做技术的公众号获取的收入来致富，或者达到主业的水平，真的很难了。

更何况现在的人已经不是很想在公众号里面看纯技术的文章了，一般都是在技术社区里面看的，而且更想看的是技术外的文章。

更何况现在不是公众号的红利期了，已经是蓝海期了。

毕竟技术人才的基数本来就不大，还都是高学历、高素质的人才。

但是写作的作用大吗 ？

大，非常大，对于职场还是个人生涯来说，写作的作用都非常大，是一个受用终生的技能。

因为写作，认识了很多同样写作的大佬，也有不少猎头找上门来。

但是想靠写技术公众号来致富（看仔细，我是说技术公众号）的机会非常小非常小。

现在经济下行，用户下沉，中老年人的网民基数在增加，应该是写适合中老年人的公众号更简单，更能致富。

以上是我个人的一点见解，不喜欢的，就当我瞎 BB 就好，哈哈哈~

毕竟，我不是人民币，做不到让人人都喜欢。

前端工程师总结 第4篇

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。

当然，初始化样式会对 SEO 有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

最简单的初始化方法是：*{padding:0;margin:0} (不建议)

淘宝的样式初始化：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }

body, button, input, select, textarea { font:12px/, arial, \5b8b\4f53; }

h1, h2, h3, h4, h5, h6{ font-size:100%; }

address, cite, dfn, em, var { font-style:normal; }

code, kbd, pre, samp { font-family:couriernew, courier, monospace; }

small{ font-size:12px; }

ul, ol { list-style:none; }

a { text-decoration:none; }

a:hover { text-decoration:underline; }

sup { vertical-align:text-top; }

ub{ vertical-align:text-bottom; }

legend { color:#000; }

fieldset, img { border:0; }

button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }

前端工程师总结 第5篇

（1）高度尺寸不确定的时候，使用：overflow-y：scroll;

（2）高度尺寸确定的，要么没有滚动条，要么直接出现，不会出现跳动。

（3）css3计算calc和vw单位巧妙实现滚动条出现页面不跳动。

.wrap-outer {margin-left: calc(100vw - 100%);}

.wrap-outer {padding-left: calc(100vw - 100%);}

首先，.wrap-outer指的是居中定宽主体的父级，如果没有，创建一个，然后，calc是css3的计算。

100vw是浏览器的内部宽度，而100%是可用宽度，不含滚动条。

calc（100vw-100%）是浏览器的滚动条的宽度。

前端工程师总结 第6篇

条件HACK：

属性级HACK：

_：选择IE6及以下。连接线（中划线）（-）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线更为合适。*选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界对（*）的认知度更高\9：选择IE6+\0：选择IE8+和Opera15以下的浏览器{background-color:#f1ee18;/*所有识别*/.background-color:#00deff\9; /*IE6、7、8识别*/*background-color:#a200ff;/*IE6、7识别*/（+和#也可）_background-color:#1e0bd1;/*IE6识别*/}

选择符级HACK：

在选择符前面加*，+构成选择符级HACK。

前端工程师总结 第7篇

上图是我女朋友，漂亮吧 。

从 2017 年 10 月 到现在，转眼已经两年多了啊，是时候为她正名了。

这两年多，跟着我南征北战，每天我去上班，她就跟在我身后，但是坐公交或者地铁时，她就坐我前面，被我紧紧的抱在怀里。

你现在看到的文字也是她的功劳，写的每一篇文章，都是她在陪着我，还常常陪我到深夜，敲的每一个跳动的文字都要经过她，如果没有她，你们也看不到这篇文章啊。

她听话、高颜值、好用、耐用。

屏幕前的你是不是很羡慕，我不是在开车，哈哈哈~

其实我说的她，其实是她，是她、是她、是她、就是她

寸 MBP + + 27 寸 1080 显示器，嗯，真香！

如果你要用一种工具用十几年，那就现在开始用它，把它用熟，那它将在你将来的工作中节省掉很大一部分的时间。

而把这部分节省下来的时间用于学习或者其他用途，产生更大的价值！

今年，当年喜欢的人找到蓝朋友了，我也是时候向前看了，浮云莫去求。

我说的那个人，其实是我自己，哈哈哈~

在没有遇到那个属于你的彩虹之前，修炼自己，不为迎合谁，按自己心之所向扎扎实实去努力，积累来自于心底的自信，待那个人出现之时，能以势均力敌的姿态站在 TA 身旁，毕竟，棋逢对手才好玩儿，才会走得更长远，不是吗 ？

前端工程师总结 第8篇

一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。

试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持

前端工程师总结 第9篇

关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）；

如果规定拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）；

提取项目的通用公有样式，增强可复用性，按模块编写组件；增强项目的协同开发性、可维护性和可扩展性;

使用预处理工具或构建工具（gulp对css进行语法检查、自动补前缀、打包压缩、自动优雅降级）；

（1）避免过度约束

/*糟糕*/

ul#nav{..}

/*好的*/

#nav{..}

（2）后代选择符不好

html div tr td {..}

（3）避免链式选择符

/*糟糕*/

. {..}

/*好的*/

.menu-left-icon {..}

（4）使用复合（紧凑）语法

/*糟糕*/

.someclass {padding-top: 20px;padding-bottom: 20px;padding-left: 10px;padding-right: 10px;background: #000;background-image: url(../imgs/);background-position: bottom;background-repeat: repeat-x;}/*好的*/.someclass {padding: 20px 10px 20px 10px;background: #000 url(../imgs/) repeat-x bottom;}

（5）避免不必要的命名空间

/*糟糕*/

.someclass table {..}

/*好的*/

.someclass .otherclass {..}

（6）避免不必要的重复

.someclass {color: red;background: blue;font-size: 15px;}.otherclass {color: red;background: blue;font-size: 15px;}/*好的*/.someclass, .otherclass {color: red;background: blue;font-size: 15px;}

（7）最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么。

（8）避免！important，可以选择其他选择器。

（9）尽可能的精简规则，你可以合并不同类里的重复规则。

前端工程师总结 第10篇

call()方法和apply()方法的作用相同，他们的区别在于接收参数的方式不同。在使用call()方 法时，传递给函数的参数必须逐个列举出来。使用apply()时，传递给函数的是参数数组。

function add(c, d){return + + c + d;}var o = {a:1, b:3};(o, 5, 7); // 1 + 3 + 5 + 7 = (o, [10, 20]); // 1 + 3 + 10 + 20 = 34

前端工程师总结 第11篇

display属性规定元素应该生成的框的类型；

position属性规定元素的定位类型；

float属性是一种布局方式，定义元素在哪个方向浮动。

类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float浮动不起作用，display值需要调整。

注：浮动或者absolute定位的元素，只能是块元素或表格。

前端工程师总结 第12篇

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {background-color: rgb(250, 255, 189); /* #FAFFBD; */background-image: none;color: rgb(0, 0, 0);}

这黄色背景是chrome会默认给自动填充的input表单加上input：-webkit-autofill私有属性。

input：-webkit-autofill{background-color : #FAFFBD ;background-image : none ;color : #000}

第一种情况：input文本框是纯色背景的

可以对input：-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景。

input:-webkit-autofill{-webkit-box-shadow:0 0 0px 1000px white inset;border：1px solid #ccc ！important;}

除了chrome默认定义的background-color，background-image，color不能用!important提升其优先级 ，所以只能用覆盖了。其他的属性均可使用!important提升其优先级。

第二种情况：input文本框使用背景图片

1)、图片不复杂可以使用第一种情况解决，纯色内阴影覆盖。

2)、使用js实现;存在一个问题是使用js方法会导致提交表单的时候无法将value值传过去。

3)、使用form标签上的关闭自动填充功能：autocomplete=_off_。

28、让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing: antialiased;）

-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用

-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

前端工程师总结 第13篇

我平时的零碎时间一般都用来看文章和书籍，但我看的书都不是纸质的书。

因为在十几年的读书生涯，看的纸质书多了，已经厌了，而且携带也不方便，所以我都是在电脑和手机上看文章。

2019年读完的书籍：

还有几本今年没读完的，但还在读的，比如《墨菲定律》《财务自由之路》《半小时中国史》《指数基金从入门到精通》《曾国藩》等等。

我看的书还是比较有功利心的，比如 理财、基金、买房相关的书，读的书对自己有用，才会容易坚持下去。

如果你叫我看些文艺相关的书籍，我看不下去，因为觉得完全没用，或者说对现在我的没用。

如果你是想读书的人，但是还没怎么开始这个习惯，我建议看些能解决你现在刚需的书，对现在的你有用的书，比如：理财类、提升认知的书籍。

有时，功利一点是好事，能让自己有坚持的动力，做完自己想完成的事。

其实我看得最多的还是公众号的优质文章和知识星球的帖子，每天都会看。

可能很多人还不知道 知识星球 这个产品吧，是一些大 V 分享精华内容的地方，很多圈子是要付费加入的。

我是加入了几个付费星球的，比如：张哥的、曹大的、feng 大的。

别人分享的东西也不一定是好的，只吸收对自己认为有用或者真的有用的认知就好。

今年是意识到读书有用，非常有用的一年，早点知道，就会少走很多弯路。

读书对于开放格局非常有帮助，很多前人，历史的经验都在里面。

很多聪明人经常把这两句话挂在嘴边：选择大于努力。

但在我看来，正确选择的本身就需要十倍的努力！

请不要用战术上的勤奋代替战略上的懒惰！努力提升自己的认知才是王道。

很多人都是这样，坚持不了短期吃苦，但坚持长期吃苦却坚持的很好。

多读书，多开拓思维，提高认知，不要人生过半才发现一手好牌被自己打的稀巴烂。

前端工程师总结 第14篇

今年总是觉得时间不够用，真的不够用，所以花钱买时间。

今年花钱来买时间，所花费的钱真不少。

总共 2500元 左右。

在如今信息泛滥的时代，你接收到的有效信息越多，提升的认知越多，你拥有的财富就越多。

你可能看过上面的一段话了，具体的出处，我也不知道了。

当然，上面说到的是钱，其实换成其他东西都是一样的。

无论是学习还是娱乐，拥有优质的资源才是最好的方式，特别是学习。

而找免费资源是一个很耗费时间的事情，好的资源一般都是付费的。

所以在自己的经济条件许可的情况下，花钱来买资源、买时间是很划算的。

如果你觉得买了不学不是浪费了吗，这个得自己权衡，真的需要才买。

对于买视频的 VIP，也是为了省时间。

既然每天那么努力学习，那么自己基本的爱好或者欲望是不是应该满足呢，满足了自己的欲望之后，才有动力继续学习。

比如看电影、电视剧、动漫，最新的动漫都是要付费的，不用付费的都是要上网上找来找去的，质量还不好，可能找的过程所花费的时间都够自己看完整部动漫了。

学习、挣钱、花钱再到学习，形成一个正向循环。

年轻人最值钱的是时间，最缺的也是时间！当然很多人的时间并不值钱。

所以我总是投资我自己，精进自己的专业技能。

在经济允许的范围内，在自己身上投资不要省钱，把自己当做一个产品，你是你这一生最好的产品。

有这个意识，其实哪些钱该花，哪些钱不该花你就清楚了。

前端工程师总结 第15篇

用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。

方法一：首先取消浏览器自动调整功能。

.classstyle{-webkit-text-size-adjust:none; font-size:9px;}

方法二：现在可以使用css3里的一个属性：transform：scale()

p{font-size:10px;-webkit-transform:scale();}是缩放比例

前端工程师总结 第16篇

Flash提供了ExternalInterface接口与JavaScript通信，ExternalInterface有两个方法，call和addCallback，call的作用是让Flash调用js里的方法，addCallback是用来注册flash函数让js调用。

47、元素的alt和title有什么异同？

这两个属性是有些重复了。在不同浏览器里面表现有些不同。在alt和title同时设置的时候，alt作为 图片的替代文字出现，title是图片的解释文字。

前端工程师总结 第17篇

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。

（W3C CSS 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）

一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。

不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。

定位方案：

（1）普通流（normal flow）按照html中的先后位置至上而下布局，行内元素水平排列 ，当前行被占满后换行，块级元素会被渲染为完整的新行。

（2）浮动（floats）。

元素首先按照普通流位置出现，然后根据浮动的方向尽可能的向左向右偏移，与印刷的文本环绕相似。

（3）绝对定位（absolute position）。

绝对定位中，元素会整体脱离普通流BFC正是属于普通流，因此对兄弟元素也不会造成什么影响。具有 BFC 的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并 且 BFC 具有普通容器没有的一些特性。浮动元素，绝对定位元素，display，overflow会触发BFC。

特性：

（1）会阻止外边距折叠。

（2）会包含浮动元素。

（3）阻止元素被浮动元素覆盖。

前端工程师总结 第18篇

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法。比如:first-line、:first-letter、:before、:after等。

在css2之前用的是单冒号，之后css3使用时双冒号。目前除了IE外不兼容双冒号，其他的浏览器兼容双冒号，建议还是使用单冒号。

::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在与dom之中，只存在在页面之中。同理，after是在主体内容之后显示的。想让插入的内容出现在其它内容前，使用::before，之后使用::after；在代码顺序上，::after生成的内容也比::before生成的内容靠后。如果按堆栈视角，::after生成的内容会在::before生成的内容之上

前端工程师总结 第19篇

absolute

生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。

fixed （老IE不支持）

生成绝对定位的元素，相对于浏览器窗口进行定位。

relative

生成相对定位的元素，相对于其正常位置进行定位。

static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。

inherit

规定从父元素继承 position 属性的值。

前端工程师总结 第20篇

第一个字符必须是一个字母、下划线或一个美元符号（$）；其他字符可以是字母、下划线、美元符号或数字。

javascript系统方法

parseFloat方法：该方法将一个字符串转换成对应的小数

escape方法： 该方法返回对一个字符串编码后的结果字符串

eval方法：该方法将某个参数字符串作为一个JavaScript执行

NaN,即非数值（Not a Number）是一个特殊的数值，这个数值用来表示一个本来要返回数值的操作数未 返回数值的情况（这样就不会抛出错误了）。isNaN（）函数，而任何不能被转换为数值的值都会导致这个函数返回true。

前端工程师总结 第21篇

1）有两种，IE 盒子模型、标准 W3C 盒子模型； IE 的 width包含了content，border 和 padding；

2）盒模型：内容（content）、填充（padding）、边界（margin）、边框（border）。

5、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3 新增伪类有哪些？

1）id 选择器（#myid）

2）类选择器（.myclassname）

3）标签选择器（div，h1，p）

4）相邻选择器（h1 + p）

5）子选择器（ul > li）

6）后代选择器（li a）

7）通配符选择器

8）属性选择器（ a[rel = _external_]）

9）伪类选择器（a: hover, li: nth - child）

可继承的样式： font-size font-family color, UL LI DL DD DT text-indent（一些font类和text类都可以继承）

不可继承的样式：border padding margin width height

优先级就近原则，同权重情况下样式定义最近者为准 载入样式以最后载入的定位为准;

载入样式以最后载入的定位为准;

优先级为: !important > id > class=伪类 > tag ； important 比内联优先级高，内联比id优先级高

继承得到的样式的优先级最低。

前端工程师总结 第22篇

1. 把个人博客网站接入到公众号里面 【 完成 】

因为公众号接入个人网站后，不少原本的功能受限了，还要备案很多资料，所以就没接入，而是给自己的网站接入了 GitHub 授权登录，很方便。

所以目标 1 算完成了。

2. 深入 Vue 技术栈的原理与内在实现 【 完成 50% 】

深入 Vue 技术栈过程，是跟着黄轶大佬的开源项目

所以目标 2 算完成了一半吧，2020 年再继续深入。

3. 熟练 React 和 Node 技术栈，可能还要学 Java 【 打脸 】

因为 React 和 Node 两个技术栈在我的日常工作中用不上，所以做完我的网站之后就没有再深入了。

Java 就更用不上，所以也没学。

所以目标 3 打脸了。

4. 学习算法与数据结构 【 完成 】

大概 7 月的时候，学习了算法与数据结构，我是跟着极客时间的课程和 GitHub 上的优秀开源项目学的，其实还没学完，因为 10 月的时候选择了换工作，所以中断了。

不过在学习的过程中，保持着边学边输出的习惯，输出倒逼输入，所以写了 11 篇文章，以加深理解，技术总是要反复学习，往后有时间会再次学习的，特别是数据结构与算法。

所以目标 4 完成了。

5. 英语词汇量达到 7000 【 完成 70% 】

学习英语是个长期的过程，想一蹴而就就达到比较满意的结果，真的不现实。

2019 年，一直有在学英语，都是跟着水滴阅读的原著文章来阅读与理解的。

截止到今天，总共阅读了 6 本英语原著了，分别是

a.《怦然心动》：一个讲述青春期中男孩女孩之间的有趣战争。

我看到知乎上某人对整个故事的评论非常贴切而且精辟：

b.《人性的弱点》：卡耐基的人性系列。

卡耐基-《人性的弱点》，讲到了很多人性有的弱点，进而推出做人要平和、真诚、沟通的成功在于尽量避免争辩，最常见的情况是在争辩中取得了胜利却失去了成功的机会。

c.《人性的优点》：卡耐基的人性系列。

这本书是讲运用心理学的知识，教我们如何战胜忧虑，开创崭新人生。

有空还要把《人性的弱点》和 《人性的优点》的中文版看一遍才行，英语版的有点难，看的不是很懂，哈哈哈~

d.《小王子》

书中以一位飞行员作为故事叙述者，讲述了小王子从自己星球出发前往地球的过程中，所经历的各种历险。从中透视出成年人的某些不好品质，比如空虚，盲目，愚妄和死板教条等。

这个故事还有电影版哦，都不错。

e.《绿野仙踪》

讲述了一个小女孩被飓风刮到奥兹国，和狮子、机器人、稻草人追寻勇气、善心和智慧的历险故事。

f.《爱丽丝梦游仙境》

讲述了一个小女孩为了追逐一只揣着怀表、会说话的兔子而不慎掉入了兔子洞，从而进入了一个神奇的国度并经历了一系列奇幻冒险的故事。

所以目标 5 完成了 70%。

6. 加大运动量，增重 5 斤 【 完成 60% 】

今年也一直保持着锻炼，但是没有加大运动量，因为时间真的少，特别今年的 6、7、8 月的周末不是高温就是下雨。

只增重了 2 斤左右。

因为锻炼没有增加，所以也不想增重太多，不然增加的都是脂肪，我宁愿不要。

所以目标 6 完成了 60%。

7. 坚持写作，运营好公众号 【 完成 90% 】

一直有坚持写作，今年大概写了 24 篇文章吧，包括技术与非技术文章，平均一个月 2 篇。

公众号【全栈修炼】也一直有在更新，只不过更新的频率不定，也和写文章的频率一样，平均一个月 2 篇。

所以目标 7 完成了 90%。

8. 多看书与文章 【 完成 】

今年读完上面写到的 6 本英语原著之外，还读了 7 本中文书，经常看有质量的文章。

所以目标 8 完成了 100%。

9. 逐渐深入其他理财方式 【 完成 】

读了 2 本理财的书籍，基金也买多几种，虽然投入的金额不多。

所以目标 9 算完成了。

10. 培养其他技能 【 完成 】

培养的技能：阅读。包括中文和英文原著阅读。

基本上，今年我没有很大的野心，就是让根基更稳固一点，顺便赚点钱。

自己也还在成长，多学习吧，一步一步走吧。

前端工程师总结 第23篇

计划赶不上变化。

所以，除了 2018 年末定的 2019 目标之外，还做成了如下几个事情。

1. 学习了 TypeScript，并与 Vue 结合，做了个开源项目

2018 年年尾的时候，我就意识到 TypeScript 已然成为了大趋势，所以 TypeScript + Vue 也必然会是趋势了，特别是 将对其有更有好的支持，所以选择学习 TS 。

并与 Vue 结合，加以实践，所以我也算走在了前端技术的前沿吧，想学习 Vue + TypeScript 的前端人员可以看看，为学习即将发布的 做好准备。

开源不易，喜欢的可以给个 Star 。

目前公司的项目用的技术栈就是 TypeScript + Vue，这应该真的是趋势吧，太巧。

2. 玩了一下 VuePress 和 GitBook

3. 新年头彩

2019 刚过完年，回来上班的前一天收到了掘金的好消息，哈哈哈~

感谢掘金。

还有腾讯云的纪念小企鹅，哈哈哈~

感谢腾讯云。

前端工程师总结 第24篇

它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大 的优点，也是其被广泛传播和应用的主要原因；

CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

Copyright © 2013 - 2024 Tencent Cloud.

前端工程师总结 第25篇

新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）

圆角 （border-radius:8px）

多列布局 （multi-column layout）

阴影和反射 （box-Shadow\Reflect）

文字特效 （text-shadow、）

文字渲染 （Text-decoration）

线性渐变 （gradient）

旋转 （transform）

transform:rotate(9deg) scale() translate(0px,-30px) skew(-9deg,0deg) Animation rgba;//旋转，缩放，定位，倾斜，动画 多背景 增加了更多的 css 选择器

p:first-of-type 选择该p元素是其父元素的首个

元素；

p:last-of-type 选择该p元素是其父元素的最后

元素；

p:only-of-type 选择该p元素是其父元素唯一的

元素，还是可以有其他的元素，只要p元素只有一个；

p:only-child 选择该p元素是其父元素的唯一子元素；

p:nth-child(n) 选择属于其父元素的第n个p子元素(排序的时候是和其他子元素一起的排序中选取第几个元素，不是单独p元素排序)；p:nth-child(odd) 匹配所以奇数行;p:nth-child(even) 匹配所有偶数行，元素的第一个子元素索引为“1”。p:nth-child(3n+1)三层循环中的第一行，可以是数字，关键词或公式：使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。

:after 在元素之后添加内容,也可以用来做清除浮动。

:before 在元素之前添加内容

:enabled

:disabled 控制表单控件的禁用状态。

:checked 单选框或复选框被选中。

前端工程师总结 第26篇

把上、左、右三条边隐藏掉（颜色设为 transparent）

div#demo {width: 0;height: 0;border-width: 20px;border-style: solid;border-color: transparent transparent red transparent;}

注：IE6下将边框设置为transparent并不会透明，会产生阴影，可设置为border-style:dashed dashed solid dashed;

用CSS3 transfrom旋转45度实现

-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);

前端工程师总结 第27篇

（1）png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式。

优点是：压缩比高，色彩好。 大多数地方都可以用。

（2）jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的。在www上，被用来储存和传输照片的格式。

（3）gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果时候。

（4）webp格式

是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%，缺点是压缩的时间更久了。兼容性不好，目前谷歌和opera支持。

前端工程师总结 第28篇

样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。

只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。

而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 renderer。