在看一个网页的代码是看到

    width:100vh 

  纳尼。。。这这我怎么没有见过,这是个什么属性,随之有看到 min-height:calc(100vh + 51px);这尼玛又是怎么用的....

  感叹入行已整整两年却...

  先介绍一下vh:相对于视窗的高度,那么vw:则是相对于视窗的宽度

  “视区”所指为浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

  详细vh的用法,大家可以参考http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/

  这就是差距人家两年前的已经在玩的东西现在自己还是小白。。

  calc是英文单词calculate(计算)的缩写,是CSS3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。

  故大家应该清楚calc的用法了。详细还得自己研究一下。

  重点不是将这个,而是今天看到这个一个属性,我接下来都看到些什么,看到坚持写博客好几年的同学自己感到惭愧,而且看到他们写的内容都是那么真实,都是一步一步的走过来的,中间节选一段文字与君共勉:

  四月前,低迷、失志踌躇不前形容自己再好不过,中途来了一次彻底的醒悟,于是
  我发现自己变得勤奋了,我发现自己乐于付出了,因为我知道安逸的生活磨砺不出优秀的能力,没有能力的人何来安逸?
  于是我清晰了自己的理想,明确了自己的目标
  天道酬勤,敢于自省且突破自身的人总会得到上天的眷念,前提是你是不是正在作死!
  想找个好点的工作安逸度日,一点一点的吃着老本,甚至还感觉游刃有余?
  不再精进自己的能力,做着毫无工作量的事情,却又抱怨自己的才华得不到施展?

  于是,突破不了工作的困局就一再的消磨自己的意志,
  丧失了思想会看不清东西,失去了眼界就是折翼的雄鹰,生活带来的是活生生的真实,最后只会发现很无力

  我们无力改变生活的一切,是因为我们没有改变的担当,我们缺乏直面变化的勇气,我们不敢改变自己的根本原因还是我们安于现状
  简言之,贪生怕死

  想获得更多,就需要折腾的勇气,突破不了工作的困局就突破自身的瓶颈
  工作与理想总要有一个在路上!人不能没有希望,处于困境的人需要改变不是环境而是自己

  改变会带来痛苦吗?勤奋会带来痛苦吗?
  有能力才能阻止改变,敢做就要有敢死的气魄

  我可以清晰明白的告诉你,你所认为的痛苦不是真正的痛苦,真正的痛苦是无能!
  无能最是痛苦,无奈最是痛苦,不停的后悔,不停的自责最是痛苦,勘不破,最是迷障!
  在信息爆炸的年代,生活本来就很浮躁了,我们不能随波逐流,我们需要重新踏上征途,我们应该给自己一个目标
  我们必须还自己一个理想,哪怕他不能实现!至少你努力过,一旦你努力了却发现理想好像可以更高点,这才是真实
  有了目标有了理想,就需要不懈的奋斗,不要贪生怕死,不要舍不得付出,生活需要不是一时的冲劲,而是持之以恒的付出,
  所以,兄弟姐们请找回自己的初心!

做好前端

  咳咳,好久没有水一发了,久不出江湖,我竟然忘了我最初的爱好是武侠,甚至说书也是我的理想工作之一
但是,兄弟们,我不得不说前端是一个值得你们付出的工作,甚至整个程序是值得你倾尽全力的工作,因为我们的工作很有趣,我们几乎每天都有新的BUG 
我老大刚刚才花了一个多小时找到一个我刚埋的坑(其实是他在我这里提交的代码!哼),所以我们工作看着无时无刻不对着电脑,好像无事可做
其实我们天天工作是换样的,总会有一个彩蛋让你猜到,当你解决疑难BUG时候的惊喜是其它工作来不得的,至少他没那么多
所以,要做好前端首先要爱好前端,首先要热爱自己的工作,知道自己的工作是很有趣的

关于离职

  最近有一个师妹说她想离职,问我可以推荐个工作不,对于离职这个事情,我其实是有不同的想法的

一个人进入优秀的团队,再遇到一个好的老大,那简直就是中了彩票一样,不知不觉自己就成长起来了

但是,这种几率却很低,所以多数朋友的工作是不如意的,不如意的原因各种各样,但是我还是认为责任主要在自己,因为没有团队会放弃创造价值的人

你在团队不如意,一定是你自己不努力,如果你努力了仍然不如意,就是你努力的时间不够长,如果你自己真的做的很好了还是不如意的话

我就建议你离职了,因为经过你如此的工作,离职涨个50%完全不是问题,问题是你是不是真的在努力

所以有不如意想离职的朋友,我其实是不建议的,有为了钱而离职的朋友,我更建议你为了发展而离职

如何成为优秀的前端

  如何成为优秀的前端明我不是优秀的前端,我甚至不是一个合格的前端,优秀前端是我一年后的目标,有一次看到我的名字和汤姆大叔与正美一并出现,吓

我虽然不是一个优秀的前端,但是我明显感觉我正在向一个靠谱前端靠近,所以这方面我还是有些经验可以与大家交流的

书籍推荐

书籍这个事情贵精不在多,我这里推荐两本即可:

《javascript高级程序设计》

《CSS权威指南》

为什么只推荐两本呢?因为我发现很多朋友看书其实是有问题的,我个人看JavaScript高级程序设计至少三篇,其中写了很多demo

而很多朋友看书就跟看连环画似的,第一次看一个星期就看完了,我是该说你悟性高呢还是喜欢装B啊,这种书要细看,要慢慢看,要反复看

学习要有成果,学习要有效率,比如这小半年我就干了这些事情,是拿的出来的:

那各位看书后,或者看博客后会留下痕迹么,如果留不下痕迹,那么多数就给忘了

看经典的书切记要细,切记要看懂,看不懂就反复看,最后一定要留下学习成果

博客推荐

  除了看书以外就是建议大家写博客了,这个也是一种学习成果,不要怕写不好,写着写着就写好了

  我现在技术博客量是140左右,其中自己满意的博客是10篇左右,所以说,博客质量其实不高,但是高质量博客是精华,哪里又有那么多???

  高手不是一下就来的,简单将我和高手的差距就是:

                      

司徒正美:

公司利益与个人成长,这个更不用说。只有目光短浅的公司,才会用杂牌的组件写码。大公司早已为你准备一整好东西了。而你的任务就是成长到具有写UI组件的地步,进入架构师,为公司的未来挑战做好更多准备(工具)。HTML5对于一般人而言,好像是非常遥远的事,但大公司早已有一帮人用它做出许多好东西,为公司产品的用户体验添砖加瓦。为了积聚这实力,你必须自己暗暗发力,偷偷自己写一套东西。之前人家写过的弹出层,富文本编辑器,语法高亮插件……你一套也不能少,这样你才能接触到之前碰不到的原生API与知识点。如弹出层有关垂直居中的CSS知识点,select穿透问题,富文本编辑器用到的iframe知识点,Range与Selection对象的知识点,语法高亮则是你正则的大检验!如果写业务代码,你写十年,水平还是那样。因此有句话说——“用一年的经验混十年”
"我能力强,我效率高,我应该是公司的关键人物",其实那是错的,不可替代性才是最重要的。如果靠“卖力”增加不可替代性,作用是微乎其微的,还是得靠“高门槛”。我认识的工程师里,越是技术好的工程师越会意识到这个问题,然后去做一些"深度"的发展,这也算是工程师的自我保护吧。说什么做IT没前途,30岁要转行,这只是无能者的藉口。

古人说——“人无远虑,必有近忧”。你平时有这么多空闲时间,为何不努力提升一下自己的水平呢。不去认真阅读一下大师们的框架,不自己写一个框架。记得当初我在博客宣传我的框架,被某个嫉妒的人骂个狗血喷头,两年过去,他消声匿迹,而我,从一个公司的核心前端变为另一个公司的核心前端,现在是去哪儿网的前端架构师。因此要相信自己!不要怕这怕那,有努力就有回报!

总之不管是做什么都要有一个计划,然后去学习,去努力,去坚持,对自己负责,对自己的人生负责。

width:100vh有感而发的更多相关文章

  1. width:100vh与min-height:calc(100vh + 51px)

    vh:相对于视窗的高度,那么vw:则是相对于视窗的高度. “视区”所指为浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及 ...

  2. CSS3与页面布局学习总结(一)——概要、选择器、特殊性与刻度单位

    web前端开发者最最注的内容是三个:HTML.CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能 ...

  3. CSS3中的px,em,rem,vh,vw辨析

    1.px:像素,精确显示 2.em:继承父类字体的大小,相当于"倍",如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端 em换算工具:h ...

  4. 超绚丽CSS3多色彩发光立方体旋转动画

    CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.css3动画的属性主要分为三类:transform.transition以及anim ...

  5. 关于H5从PC端切换到移动端,屏幕显示内容由横向转为竖向的研究!

    1.前言: 在项目中,我们常会遇见在手机端需要横屏观看的效果,而在pc端则默认切换到竖屏的样式. 或者是,UI提供的图是一个长图,但是在移动端我们需要让这个图在手机横屏时显示. 以上两个都需要我们实行 ...

  6. 移动端常见bug汇总001

    点击样式闪动 Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景. A:根本原因是-webkit-tap-highlight-color,这个属性 ...

  7. css - 小程序样式

    /* * @Author: WJ_LONG * @Date: 2018-09-15 17:25:37 * @Last Modified by: WJ_LONG * @Last Modified tim ...

  8. css - 公众号样式

    /* * @Author: WJ_LONG * @Date: 2018-09-06 15:32:06 * @Last Modified by: WJ_LONG * @Last Modified tim ...

  9. 如何用纯 CSS 创作一根闪电连接线

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RBjdzZ 可交互视频 ...

随机推荐

  1. 有货前端 Web-APM 实践

    有货前端 Web-APM 实践 0 背景 有货电商技术架构上采用的是前后端分离,前端是主要以业务展示和接口聚合为主,拥有自己的 BFF (Backend For Frontend),以 nodejs ...

  2. c# 字符串的内存分配和驻留池( 转 )

    刚开始学习C#的时候,就听说CLR对于String类有一种特别的内存管理机制:有时候,明明声明了两个String类的对象,但是他们偏偏却指向同一个实例.如下: string s1 = "he ...

  3. 使用jQuery获取session中存储的list集合

    在网上查找了很多关于jQuery获取session都不可得,如果大家有更好的方式,欢迎留言 这里是使用jQuery发送Ajax请求到后台获取session jsp中没有代码 js代码 <scri ...

  4. 一个适用于单页应用,返回原始滚动条位置的demo

    如题,最近做一个项目时,由于页面太长,跳转后在返回又回到初始位置,不利于用户体验,需要每次返回到用户离开该页面是的位置.由于是移动端项目,使用了移动端的套ui框架framework7,本身框架的机制是 ...

  5. python基础—迭代器、生成器

    python基础-迭代器.生成器 1 迭代器定义 迭代的意思是重复做一些事很多次,就像在循环中做的那样. 只要该对象可以实现__iter__方法,就可以进行迭代. 迭代对象调用__iter__方法会返 ...

  6. SSH端口转发(本地转发、远程转发、动态转发)

    SSH端口转发   一:什么是端口转发?     SSH 会自动加密和解密所有SSH 客户端与服务端之间的网络数据.但是,SSH 还能够将其他TCP 端口的网络数据通过SSH 链接来转发,并且自动提供 ...

  7. [机器学习Lesson4]多元线性回归

    1. 多元线性回归定义 多元线性回归也被称为多元线性回归. 我们现在介绍方程的符号,我们可以有任意数量的输入变量. 这些多个特征的假设函数的多变量形式如下: hθ(x)=θ0+θ1x1+θ2x2+θ3 ...

  8. orabbix插件监控oracle表空间问题

    我们安装好orabbix插件后,查看Tablespaces监控项是发项值为none,第一反应是没监控成功,其实不然. 1.我们打开orabbix监控项参数的路径,下面为Tablespaces的sql代 ...

  9. mybatis学习二

    Mybatis缓存1:缓存的概念    当用户频繁查询某些固定 的数据时,第一次将这些数据从数据库查询出来,保存在缓存中(内存,高速磁盘)中    当下次用户再次查询这些数据时,不用再通过数据库查询, ...

  10. ●BZOJ 3123 [Sdoi2013]森林

    题链: http://www.lydsy.com/JudgeOnline/problem.php?id=3123 题解: 主席树,在线,启发式合并 简单版(只有询问操作):[2588: Spoj 10 ...