找到适合自己的前端发展方向

2016年08月26日 by 张 鑫旭 阅读 18253 次, 今日 146 次

前端发展迅猛,除了自身更加厚重外,往前以及往后都有了发展和延伸,当前对前端的要求更高,而人的精力总是有限的,这个时候,就需要我们把有限的精力放在更适合自己发展的方向上,那应该放在哪个方向上呢?本文就将通过我自身的经验、观察和认识,为大家指明前进的道理。

阅读全文…

前端早读课专访

2016年01月13日 by 张 鑫旭 阅读 27220 次, 今日 43 次

前端早读课访谈,分享自己的一些心理历程,以及对前端的一些看法等等。

阅读全文…

深入CSS ::first-letter伪元素及其实例等

2016年09月30日 by 张 鑫旭 阅读 401 次, 今日 266 次

首先,::first-letter本身兼容性非常好,然而,细细体味,会发现,虽然::first-letter兼容性很好,浏览器很早就支持,但是我们实际项目用得并不多,那是因为,我们可以通过嵌套span标签的方式,实现更为广泛更灵活的样式控制。

但是,实际开发场景千千万,总会遇到HTML结构不能改动,或者改动成本很高的的情况,此时::first-letter等就非常有用,而且多半扮演英雄或者救星的角色……

阅读全文…

从height:100%不支持聊聊CSS中的“死循环”

2016年09月16日 by 张 鑫旭 阅读 6896 次, 今日 72 次

大家应该都知道,如果元素没有格式化的高度值,子元素的height百分比高度是不起作用的,常见的就是height:100%无效,而宽度就没有此问题,所以,新人经常会提出的一个问题是:“为何我的div设置了height:100%却没有效果?”

不知道大家有没有思考过这样一个问题。

然后,有同行就提出了这么一个看似很合理的解释,就是,“假如父元素height:auto且没有其他格式化高度,子元素支持height:100%,则很可能会出现高度死循环”。

看似合理,实际上这种解释是表面的,错误的……

阅读全文…

聊聊CSS世界中的margin-box

2016年09月16日 by 张 鑫旭 阅读 3206 次, 今日 50 次

盒尺寸由4个盒子组成,分别是content box, padding box, border box, margin box。这个和盒模型中的几个盒子其实是对应的。但是,对于的CSS关键字中却没有margin-box,唯独缺了margin-box,这是为什么呢?

阅读全文…

-webkit-box-reflect属性简介及元素镜像倒影实现

2016年08月14日 by 张 鑫旭 阅读 5639 次, 今日 29 次

玻璃,水面会有倒影,有时候我们在web中模拟一些效果,或者实现一些质感的时候,也是需要投影效果的。那我们该如何实现呢?本文从-webkit-box-reflect入手,按照浏览器,依次介绍各种投影效果的实现,很多demo,很多截图很多源代码展示,希望本文的内容能够对您的学习有所帮助!

阅读全文…

基于vw等viewport视区相对单位的响应式排版和布局

2016年08月8日 by 张 鑫旭 阅读 7920 次, 今日 22 次

一般而言,屏幕越大,我们希望文字大小也越大,元素的尺寸也能等比例放大,尤其在现在的网页设计风格中。

如果要实现这种弹性自适应效果,目前主流的实现是通过设定根元素的font-size大小,具体元素或模块使用rem或em单位来实现。

使用vm配合calc计算,可以让我们的根元素的font-size大小动态化智能化,可以让我们的布局真正意义适配于各种设备尺寸。

阅读全文…

Safari 3D transform变换z-index层级渲染异常的研究

2016年08月7日 by 张 鑫旭 阅读 4275 次, 今日 19 次

Safari被戏称为新时代的IE6,就是因为其有各种各种奇怪的渲染问题,或明显的渲染bug, 而这些bug都是IE浏览器不会犯的,着实让人头疼。

而本文这里要展示的3D变换影响层级渲染也是Safari浏览器专有的问题,不妨进来看看,说不定下次遇到类似问题就知道是怎么回事,该怎么解决了~~

阅读全文…

如何在CSS中实现父选择器效果?

2016年08月7日 by 张 鑫旭 阅读 6017 次, 今日 21 次

虽然说至今尚无浏览器支持原生的父选择器效果,但是,我们是可以通过其他手段来实现父选择器效果的,虽说不是100%完全,但是,一般的项目需求都是可以满足的,如何实现呢?如果用一句话解释原理就是“把兄弟元素作为祖先元素使用”……

本文其他地方是看不到的哟~~

阅读全文…

简单聊聊CSS选择器中的正则表达式

2016年08月7日 by 张 鑫旭 阅读 6001 次, 今日 23 次

没错,CSS也有正则,CSS装逼两利器:矩阵和正则。本文就简单介绍后面的正则,有示意有代码展示有截图有吐槽,希望本文的内容可以对您的学习有所帮助……

阅读全文…

小tips: PC端传统网页试试使用Zepto.js进行开发

2016年07月20日 by 张 鑫旭 阅读 11057 次, 今日 38 次

Zepto.js设计之初专为移动端,不对一些古董浏览器支持。所以,尺寸很小,我很喜欢。目前,从用户访问情况来看,绝大多数用户使用的是现代浏览器,也就是Zepto支持的浏览器,这让这些浏览器中直接使用Zepto成为了可能……

阅读全文…