width:100vh有感而发
在看一个网页的代码是看到
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有感而发的更多相关文章
- width:100vh与min-height:calc(100vh + 51px)
vh:相对于视窗的高度,那么vw:则是相对于视窗的高度. “视区”所指为浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及 ...
- CSS3与页面布局学习总结(一)——概要、选择器、特殊性与刻度单位
web前端开发者最最注的内容是三个:HTML.CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能 ...
- CSS3中的px,em,rem,vh,vw辨析
1.px:像素,精确显示 2.em:继承父类字体的大小,相当于"倍",如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端 em换算工具:h ...
- 超绚丽CSS3多色彩发光立方体旋转动画
CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.css3动画的属性主要分为三类:transform.transition以及anim ...
- 关于H5从PC端切换到移动端,屏幕显示内容由横向转为竖向的研究!
1.前言: 在项目中,我们常会遇见在手机端需要横屏观看的效果,而在pc端则默认切换到竖屏的样式. 或者是,UI提供的图是一个长图,但是在移动端我们需要让这个图在手机横屏时显示. 以上两个都需要我们实行 ...
- 移动端常见bug汇总001
点击样式闪动 Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景. A:根本原因是-webkit-tap-highlight-color,这个属性 ...
- css - 小程序样式
/* * @Author: WJ_LONG * @Date: 2018-09-15 17:25:37 * @Last Modified by: WJ_LONG * @Last Modified tim ...
- css - 公众号样式
/* * @Author: WJ_LONG * @Date: 2018-09-06 15:32:06 * @Last Modified by: WJ_LONG * @Last Modified tim ...
- 如何用纯 CSS 创作一根闪电连接线
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RBjdzZ 可交互视频 ...
随机推荐
- Python内置函数(52)——getattr
英文文档: getattr(object, name[, default]) Return the value of the named attribute of object. name must ...
- SpringCloud的DataRest(四)restful特性展示
一.get - list - http://10.110.20.16:8391/BusiSys/company?page=0&size=5&sort=comp_id,asc 二.pos ...
- ios开发常识(1)开发语言和参考资料
学iphone开发用的语言是object-c,object-c和c++,java还是有很大区别,如果你坚持学习iphone开发的话可以不学c++,java,直接学习这个语言,先入为主,可能觉得这个语言 ...
- 算法 排序lowB三人组 冒泡排序 选择排序 插入排序
参考博客:基于python的七种经典排序算法 [经典排序算法][集锦] 经典排序算法及python实现 首先明确,算法的实质 是 列表排序.具体就是操作的列表,将无序列表变成有序列表! 一 ...
- scrapy.Spider的属性和方法
scrapy.Spider的属性和方法 属性: name:spider的名称,要求唯一 allowed_domains:允许的域名,限制爬虫的范围 start_urls:初始urls custom_s ...
- requests-证书验证
import requests #response = requests.get('https://www.12306.cn') #print(response.status_code) #以上会显示 ...
- Python 破解带密码保护的Zip文件
今天发生了个有趣的事情,有个朋友发了一个带密码保护的Zip文件给我,却不给我密码,我就琢磨这怎么可以'猜'到密码呢? 经过一系列的尝试,最终使用python把这个密码给'猜'出来了.要想写出破解密码的 ...
- ConcurrentHashMap基于JDK1.8源码剖析
前言 声明,本文用的是jdk1.8 前面章节回顾: Collection总览 List集合就这么简单[源码剖析] Map集合.散列表.红黑树介绍 HashMap就是这么简单[源码剖析] LinkedH ...
- SpringMVC之数据传递二
上一篇学习了从url或view中传数据到Controller中,今天学习下数据从Controller传到view中,主要有4种. 一.ModelAndView 处理方法返回值类型为 ModelAndV ...
- C# 打开文件夹和保存文件夹
OpenFileDialog sfd = new OpenFileDialog(); sfd.ShowDialog(); this.textBox1.Text = sfd.FileName; Save ...