睡觉之后

最近流行一个新词,叫“睡后收入”,你是不是想歪了,我也是。

网络上对睡后收入的解释是:不需要花费多少时间和精力,也不需要照看,就可以自动获得的收入,所以也称“被动收入”。

详细点的解释如下图:

看了解释联想下自己现在的处境,觉得税后收入都是个问题,更别说“睡后收入”了,简直是不存在的。

跟几个朋友聊起“睡后收入”这个话题。

有个说:我现在每天一觉醒来又还房贷又还信用卡的,“睡后收入”没有,“睡后债务”倒是不少!

另一个说:我每天很会做白日梦,还经常琢磨中了彩票该怎么花,“睡前收入”蛮高的,一觉醒来,什么收入都变成了空。

还有个调侃说:我的“睡后收入”,取决于我睡了谁……

说到底,我们都是一群没有“睡后收入”的人,唯一的“睡后收入”也就是银行卡里和余额宝里的那点利息,每天两三毛而已。

没有“睡后收入”的人活得就像是“隐形贫困人口”,表面上看起来很富有,实际上却非常穷;外表光鲜靓丽,背后却乌烟瘴气;看上去锦衣玉食,实际上却连抽纸都要一节一节算着用。

难听点说就是驴屎蛋子外边光,偶尔还伴随月经式的焦虑,即使每月工资五万、十万都毫无安全感,因为一旦停止了工作就没有了其他的收入来源。

再看看那些有“睡后收入”的人,他们的人生和心态跟没有“睡后收入”人的人生和心态都不一样。

他们不用装得很富有,因为他们实际就很富有;他们不用担心丢了工作要怎么生活,不用因为工资高而选择一份自己不喜欢的工作,他们更多的是利用钱生钱,然后去做想做自己喜欢的事情,而不是让自己沦为钱的奴隶。

其实提到“睡后收入”我们第一反应会想到的还是买房或是租房,这种睡后收入是最直接的。

东野圭吾的《解忧杂货店》里,来自未来的小偷三人组,给生活在过去的晴美女士提议,要她在接下来的几年内,彻底研究证券交易和买卖不动产方面的知识,并存钱购买不动产。

简单来说,也就是先“炒房”,再把炒房赚的钱投入股市……

晴美听从了建议,购买的房子短短一年涨价了三倍,股价也不断上升,她彻底变成了一个亿万富翁。在睡梦中,晴美比别人多得了十倍百倍的收益,使现有的资产不断膨胀上升。

而“睡后收入”的增多,也给晴美的下半生增添了不一样的色彩。

原来的晴美很穷,一心想着如何赚钱,甚至自甘堕落。

现在的晴美有了钱,对钱反而看得不是那么重了。她开始捐款帮助孤儿院的孩子们,为他们提供更好的生活环境,用善良挽救了一个个无家可归的小生命。

一个人在自顾不暇时,对别人施展善意是有心无力的。“睡后收入”的增多改变了晴美的心态,让她在学会自爱的同时,学会了关爱他人。

现实中像晴美这样抢得先机,靠投资房产,不费吹灰之力就实现“睡后收入”最大化的人也有,经常听说某某人在零几年房价便宜的时候,在北京买了几套房,现在每年靠租金都能收入上百万,根本不用工作,生活很有安全感,不怕丢了工作,也不怕生活支出太大。

但毕竟我们大部分人都是普通人,没有那么多的资产、没有把握住时机、也没有那种远见去投资很多房产,所以不能靠租金实现这种无忧的财富自由。

我们大部分人还是要靠自己的努力先挣得第一桶金,再慢慢地去投资理财,实现自己理想中的财富自由。

认识一个作家朋友,最开始在杂志社上班,工作虽轻松,但薪水也少得可怜。

看着银行卡上龟速增长的金额,她心里很着急。于是她利用下班的时间尝试各种兼职,先在网上写文,然后去各大论坛、qq群、媒体群等搜集资料,对比各个平台的写作风格,尝试投稿。写出一定成绩后,她开始混迹各种文案群、广告群,接一些公关软文。

仅三个月,周围就有三家杂志固定征用她的稿子了,保守估计能赚4000元左右。就这样,她越做越好,把所有的稿费收入统一购买了债券理财,一年下来,能攒下十多万。

后来,她辞了职,专心在家码字,还连续出了几本畅销书,开办了一个写作课程,帮学员推荐签约挣稿费,现在报名的学员人数也有几千人,每年光靠书的版税和课程收入就能给她带来几百万的收益。

她很有商业头脑,利用赚来的钱又去投资了其他项目,毫不夸张地说,她每天睡着觉,就有大把大把的银子进账。“睡后收入”帮她走上了财富巅峰,改变了她以前的生活状况,也让她不再为下半生的生活担忧。

“睡后收入”不断增加的这个作家朋友,消费观也在跟着变化,以前舍不得花钱,买个东西要纠结很久。现在,只要能帮她提升自我、提高生活水平的东西,她都不心疼。

钱花的越来越多,人变的越来越优秀,生活越来越好,挣得也越来越多。感觉整个人生都进入了一个良性循环的状态。

我们谈“睡后收入”,其实是在谈我们的收入结构,是在谈如何实现财富自由。

“有睡后收入”的人生和“没睡后收入”的人生,是完全不一样的。

你的“睡后收入”决定了你收入的多少,也决定了你的下半生的生活状态。

富人之所以富是因为富人会创造金钱,他们会思考致富,而不是努力致富。他们会研究各种赚钱的方法,而不是只靠工资赚钱。

Vue 3.0

Vue.Js在17、18年发展迅速,用户数和粉丝量呈指数级增长,火了之后呢,作者和社区也撑不住了,肯定要更新啊,老子学不动,也要更。

作者尤大神说,vue3.0方案已经在拟行当中了,可如今很多web前端居然连vue2.0还不熟悉,甚至不会用,很多国企项目还在jquery,现在vue、react已经成了初级前端的基本技能,各位前端仔们,你不慌吗?

从2017年到现在,前端开发行业内并不平静。受到资本寒冬导致互联网和创业市场整体遇冷的影响,前端岗位需求有很大程度上的收缩。尤其是最近,连阿里也缩减了社招hc,"凛冬已至"的寒意扑面而来......

一边是互联网红利期过后,市场回归理性,找工作艰难的抱怨声四起;但一边却是前端技术也异常活跃,薪水和地位继续见长。

看似矛盾的两种情景并存,不禁让人疑惑:这两年,前端程序员们究竟过得怎么样?

初级前端——“冰”

初级前端程序员供给泛滥,待遇恶化,发展遇冷。对于初级人员来说,前端市场的确已经进入全面清理期,面临着较大淘汰风险,优胜劣汰带来的是人才质量的整体提高,这就不难理解为什么有很多人抱怨找工作难了。

中高端前端——“火”

形成鲜明对比的是:中高级工程师议价能力向好,越来越吃香

由于前端技术栈的不断更新,效率提高,同样的前端人数,能完成比以前更多的职责范围。在不少企业,1个优秀的前端工程师就能搞定Web和移动端的开发,甚至负责一部分后端。

还是那句话:在激烈竞争下,经受住考验的永远是那批更优秀的人。中高端人才缺口大,议价能力越来越强,以至于拉高了整个市场的平均薪资水平。

那么,随着企业(尤其是一线互联网公司)招聘要求越来越高,什么样的前端人更受青睐?

1. 基础扎实,对具体主流技术栈要求趋严

2. 更看重技术广度,兼具跨终端和后端开发能力

3. 更加重视综合能力和职业素养

因此,基础薄弱的新人和没有及时构建竞争力的“老程序员”,都要注意积累扎实的基本功、技术广度与深度,以及职业素养,才能抓紧时间“游回岸上”。

近几年,CSS领域出现了一些复杂的专用布局工具,用以代替原有的诸如使用表格、浮动和绝对定位之类的各种变通方案。Flexbox,或者说是弹性盒子布局模块(Flexible Box Layout Module)是这些新布局工具中的第一个,接着是CSS网格布局模块(CSS Grid Layout Module)。我们会在本文给出一个易于理解的flexbox入门介绍。

随着CSS网格布局的引入,你可能会问flexbox布局是否真的还有必要。虽然它们所能做的事情有一些重叠,但其各自在CSS布局中有着非常特别的目的。一般来说,flexbox在一维场景(比如,一串类似的元素)下有最佳应用,而网格是二维场景下理想的布局方案(例如整个页面的元素)。

即便如此,flexbox仍可以用于整个页面的布局,这样它能为那些还不支持网格布局的浏览器提供合适的兼容处理。(必须承认,网格布局正在大多数现代浏览器中快速得到支持,不过对flexbox的支持仍然更为广泛,所以如果你想让你的布局在稍微老旧的浏览器中也生效,使用flexbox作为网格布局的降级方案是很容易的)。

使用Flexbox的好处

flexbox的一些好处是:

  • 页面元素能被任意方向地放置(靠左、靠右、从上往下甚至从下往上)
  • 布局内容的可视顺序能够被反转或重排
  • 元素大小能“弹性”适应可用空间,并根据容器或者兄弟元素进行相应地对齐
  • 能轻松实现等列宽布局(与每一列里面的内容无关)

为了阐述其多样的属性和可能性,让我们假设下面有这样的布局用例:

<div class="example">
  <header>
 header content here
  </header>
  <main class="main">
    <nav>
 nav content here
    </nav>
    <div class="content">
 main content here
    </div>
    <aside>
 aside content here
    </aside>
  </main>
  <footer>
 footer content here
  </footer>
</div>

首先,是把元素一起放进.main里,比如,<nav>和<aside>。如果没有flexbox,我们可能会把三个元素全部进行浮动,但想让它按理想的方式工作显得并不直观。而且,按传统的方式做这件事会出现一个众所周知的问题:每一列仅仅和它的内容一样高。因此,你可能需要把三个元素都设置为统一的高度,或者使用某种黑科技。

让flexbox来救场吧。

让我们Flex

flexbox的要点是出现在display属性上的flex值,它需要被设置在容器元素上。如此设置会让它的子元素变成“弹性项目(flex item)”。这些弹性项目拥有一些易于使用的默认属性。比如,它们被紧挨着放置,那些没有特别指明宽度的元素自动占满了剩余的空间。

因此,如果你给.main设置了display:flex,它的子元素.content就被自动挤在<nav>和<aside>之间。不需要再多余的计算,多么方便是吧?作为附加奖赏,所有三个元素神奇地拥有了相同的高度。

.main {
 display: flex;
}

请查看下面的例子,包含了所有的细节:flexbox-demo-1(https://gitee.com/GrapeTech/flexbox-demo/blob/master/flexbox-demo-1.html)。

项的顺序:Flebox的order属性

另外一个flexbox的能力,是能够轻松改变元素的显示顺序。让我们假设你为一个客户制作了上面的布局,而她现在想要.content出现在<nav>之前。

通常,你需要深入到HTML源码中去,在那里改变元素的顺序。而有了Flexbox,你可以完全使用CSS完成这项任务。只需把.content的order属性设置为-1,那么这一列就会出现在前面,这本例就是最左边。

.main {
 display: flex;
}
 
.content {
 order: -1;
}

本例中,你不需要改变其他列的order。例子在flexbox-demo-2(https://gitee.com/GrapeTech/flexbox-demo/blob/master/flexbox-demo-2.html)。

如果你倾向于显式地为每一列指定order,你可以将.content的order设为1,把<nav>的order设为2,把<aside>的设为3。

HTML源码独立于CSS的Flexbox样式

但你的客户并不满足。她想让<footer>成为页面的第一个元素,显示在<header>之前。那好,同样的,flexbox是你的朋友(虽然像在此例中,可能你得跟你的客户好好谈谈,而不是跟随指示)。因为你不仅要重排列内部元素,还要重排外部的,display:flex规则将被设置在<div class=”example”>之上。注意这里是如何在页面中嵌套使用flex容器来达到你想要的效果的。

因为<header>,<main class=”main”>和<footer>相互堆叠着,你需要首先设置一个垂直上下文,它能够通过设置flex-direction:column来快速完成。还有,<footer>的order被设置为-1,如此一来它就出现在页面的最上头。就这么简单。

.example {
 display: flex;
 flex-direction: column;
}
 
footer {
 order: -1;
}

所以,如果你想把一行元素修改为一列,或者相反,你可以使用flex-direction属性,并设置它相应地为column或row(row是默认值)。

完整的例子在flexbox-demo-3(https://gitee.com/GrapeTech/flexbox-demo/blob/master/flexbox-demo-3.html)。

然而,强大的能力也到来了更多的责任:谨记,一些用户可能会使用键盘来导航你的基于flexbox的网站,如果你HTML源码中元素的顺序和屏幕上显示的有所出入,那么无障碍访问的能力就成为需要认真对待的问题。如果想了解得更多,请不要错过HTML源码顺序 vs CSS显示顺序,网站无障碍访问和易用性的专家Adrian Roselli针对这个问题给出了深入讨论。

如何在Flexbox中对齐子项

Flexbox能非常直观地处理子项的水平对齐和垂直对齐。

你可以使用align-items对flex容器中的所有子项设置统一的对齐。如果你想给个别元素设置不同的对齐方式,使用align-self。元素的对齐方式跟它所在父容器的flex-direction有关。如果它的值是row(意味着元素水平排列),对齐方式是指在垂直轴上。如果flex-direction被设置为column(意味着元素垂直排列),对齐方式就是指在水平轴上。

例如,你让一些元素在容器中分别有不同的对齐方式,你需要:

  • 设置每个元素的align-self属性为合适的值。可能的值有:center,stretch(元素撑满它的容器),flex-start,flex-end和baseline(元素被放置在父容器的baseline上)
  • 把容器元素设置为display:flex
  • 最后,注意父容器的flex-direction属性,因为它关系到子元素的对齐方式。
.example {
 display: flex;
 flex-direction: column;
}
 
.red {
 align-self: center;
}
 
.blue {
 align-self: flex-start;
}
 
.pink {
 align-self: flex-end;
}

试试在下面的例子中,把父容器的flex-direction在row和column之间切换,看看它们引起的实时变化。

例子flexbox-demo-4.html(https://gitee.com/GrapeTech/flexbox-demo/blob/master/flexbox-demo-4.html)。

如果想要容器中所有的元素有统一的对齐方式,你可以在容器上使用align-items。可以的值有center,flex-start,flex-end,stretch(默认值:子项被拉伸以适应它们的容器)和baseline(子项被放置在父容器的baseline上)。

.example {
 display: flex;
 align-items: center;
}

像往常一样,试着把父容器的flex-direction在row和column之间切换,看看它们如何影响着你设置align-items值时所发生的作用。

例子flexbox-demo-5.html(https://gitee.com/GrapeTech/flexbox-demo/blob/master/flexbox-demo-5.html)

在Flexbox里两端对齐

另一个控制对齐的属性是justify-content,当你想让多个元素等分空间时非常有用。

可接受的值有:center,flex-start,flex-end, space-between(元素利用主轴之间的空间而排布)和space-around(元素利用主轴之前、之间和之后的空间而排布)。

例如,在之前你一直使用的简单HTML模板里,你可以在<main>里找到三个元素:<nav>,.content和<aside>。之前,它们都被挤在页面的左边。如果你想让它们之间有一些空间,但是不让第一个元素的左边有空间,也不想让最后一个元素的右边有空间,你可以把.main(即它们的父容器)里的justify-content设置为space-between。

.main {
 display: flex;
 justify-content: space-between;
}

也试一下设置为space-around,观察不同的结果。例子在flexbox-demo-6(https://gitee.com/GrapeTech/flexbox-demo/blob/master/flexbox-demo-6.html)。

在上面的例子中,我同样把<header>中的文字水平和垂直对齐了,分别是把justify-content(水平居中)和align-items(垂直居中)都设置为center。

header {
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}

Flexbox中弹性子项的大小

使用flex属性,你能够对照flex容器中其他元素来控制弹性子项的大小。

这个属性是以下独立属性的简写:

  • flex-grow:一个数字,指明元素如何相对其他flex项来拉伸
  • flex-shrink:一个数字,指明元素如何相对其他flex项来收缩
  • flex-basis:元素的长度。可接受的值有:auto,inherit或者一个数字后面紧跟着%,px,em或其他长度单位。

例如,想得到三个等宽的列,只需给每一列设置flex:1,其他什么都不用做:

nav, aside, .content {
 flex: 1;
}

如果你需要.content占据<nav>和<aside>的两倍宽,那么就把.content设为flex:2,让其他两个为1。

例子在flexbox-demo-7.html(https://gitee.com/GrapeTech/flexbox-demo/blob/master/flexbox-demo-7.html)。

那仅仅是对flex属性最简单的应用。同样可以设置flex-grow,flex-shrink和flex-basis这些值,不过那超出本文的话题范围了。

进一步的资源

如果你准备好继续前进,并想学着精通flexbox的更多东西,请查看下面的资源:

  • Flexbox SitePoint上Guy Routledge制作的一个付费课程
  • Building Mega Menus with Flexbox
  • How 3 Modern Tools are Using Flexbox Grids
  • Make Forms Fun with Flexbox.

总结

如你所见,如果我们想控制元素在网页中的布局,flexbox可以让我们的生活更加轻松。它非常稳固和可靠,让以前那些我们每天使用的诸如使 让容器坍缩之类的奇技淫巧,成为了过去。

像我们说的,如今,在针对整个页面进行布局时,CSS网格是更好的方案,但我们仍然值得去了解flexbox能做的那些事情。flexbox的最佳应用场景,体现在对元素的一维排列上,但如果有需要,它也能在稍老旧的浏览器中,为CSS网格布局提供方便的替代方案。

原文发布于微信公众号 - 李才哥(liqi13695515224)

原文发表时间:2018-11-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券