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

    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. maven入门(6)maven的生命周期

    1. 三套生命周期     Maven拥有三套相互独立的生命周期,它们分别为clean,default和site. 每个生命周期包含一些阶段,这些阶段是有顺序的,并且后面的阶段依赖于前面的阶段,用户和 ...

  2. bootstrap 之下拉多选

    效果如图: 一.HTML代码 <label class="col-sm-1 control-label text-right" for="ds_host" ...

  3. 高级控件 popwindow 与gridview的组合应用

    Gridview 的布局设置 <GridView android:layout_width="wrap_content" android:layout_height=&quo ...

  4. 基于DFS的拓扑排序

    传送门:Kahn算法拓扑排序 摘录一段维基百科上的伪码: L ← Empty list that will contain the sorted nodes S ← Set of all nodes ...

  5. logback生成多个不同的日志文件

    用logback生成日志文件做日志分析,日志写到多个文件中 http://stackoverflow.com/questions/2488558/logback-to-log-different-me ...

  6. anaconda的使用

    1. 查看已安装的库 pip list conda list 其中,pip list 只能查看库,而 conda list 则可以查看库以及库的版本 2. 安装或更新库 pip install scr ...

  7. JS面向对象之原型链

      对象的原型链 只要是对象就有原型 原型也是对象 只要是对象就有原型, 并且原型也是对象, 因此只要定义了一个对象, 那么就可以找到他的原型, 如此反复, 就可以构成一个对象的序列, 这个结构就被成 ...

  8. 文件上传详解 (HTML FILE)

    FileUpload 对象 在 HTML 文档中 <input type="file"> 标签每出现一次,一个 FileUpload 对象就会被创建. 该元素包含一个文 ...

  9. spark-shell报错:Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/hadoop/fs/FSDataInputStream

    环境: openSUSE42.2 hadoop2.6.0-cdh5.10.0 spark1.6.0-cdh5.10.0 按照网上的spark安装教程安装完之后,启动spark-shell,出现如下报错 ...

  10. Multipath在OpenStack中的faulty device的成因及解决(part 2)

    | 版权:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接.如有问题,可以邮件:wangxu198709@gmail.com 简介 在上次的文章M ...