• CSS 函数的 8 个妙用

    Posted by : lon.y@qq.com on 2017年7月4日

    CSS 比许多 web 程序员认为的更加强大。这种样式表语言正变得越来越强大,给浏览器带来了原本要用 JavaScript 实现的功能。本文将介绍无需 JavaScript 的 CSS 函数的 8 个妙用。 1. 纯 CSS 的 tooltips 很多网站仍在用 JavaScript 创建 tooltips,但实际上,用 CSS 实现更加简单。最简单的方法是在 HTML 代码的 data 属性中提供 tooltip 文本,比如:data-tooltip="

    阅读全文...

  • 在rem布局下使用背景图片以及sprite

    Posted by : lon.y@qq.com on 2017年7月4日

    现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及我的好友@墨尘写的更轻量级的hotcss。用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景图片。本文就来聊聊这方面的东西。 rem布局 所谓rem布局就是指为文档的根节点<html>元素设置一个基准字体大小,然后所有的元素尺寸都以rem为单位来写。比如将<html>的字体设为100px,如果需要做一个100*200的元素,c

    阅读全文...

  • 在 CSS 中使用功能查询

    Posted by : lon.y@qq.com on 2017年7月4日

    在 CSS 里,有一个你可能没有听过的工具,但是它已经出现一段时间了,而且非常强大。也许,它会成为 CSS 中你最喜欢的东西之一。 那么,是什么呢?就是 @support,也就是功能查询。 通过 @support,你可以在 CSS 中使用一小段的测试来查看浏览器是否支持一个特定的 CSS 功能(这个功能可以是 CSS 的某种属性或者某个属性的某个值),然后,根据测试的结果来决定是否要应用某段样式。比如: @supports ( display: grid

    阅读全文...

  • 雪碧图在缩放场景下的特殊处理

    Posted by : lon.y@qq.com on 2017年7月4日

    回想n年前刚写前端的时候,在处理一个’鼠标hover切换背景图会闪’的问题时,将两张背景图合成一张图片,顺利解决问题。这应该是我第一次用到雪碧图的情况。 雪碧图作为背景在切换时不会有因为需要等待下载而产生的闪现 如今,打开一个站点,呈现铺天盖地的图片资源的页面随处可见。而多数站点更会用一套包含几十个风格统一的图标的图标库,加之移动端的占比与日俱增,雪碧图这项技术被运用的就越来越普遍。 最简单,最实用的使用方法 得益于伪元素的功劳,在不破坏页面结构,不增加多

    阅读全文...

  • 深入理解视觉格式化模型

    Posted by : lon.y@qq.com on 2017年7月4日

    “理论不懂就实践,实践不会就学理论”,非常赞同bluedavy的这句话。实践过程中经常会遇到某个属性的使用,浏览器渲染效果与预期效果不符,虽然通过死记硬背能避免或巧妙应用这种效果,但总感心虚发慌、毫无自信,因为不知晓背后的原理。这时就不要再用“就是这样的”的借口来搪塞自己,我们需要重新认识它。 实践与现象 绝对定位是一种常用的定位方式,也经常会看到一些使用技巧,轻松搞定一些不太容易实现的效果。现介绍两个绝对定位的使用技巧: 1. 绝对定位元素,水平方向(t

    阅读全文...

  • 没那么难,谈CSS的设计模式

    Posted by : lon.y@qq.com on 2017年7月4日

    什么是设计模式? 曾有人调侃,设计模式是工程师用于跟别人显摆的,显得高大上;也曾有人这么说,不是设计模式没用,是你还没有到能懂它,会用它的时候。 先来看一下比较官方的解释:”设计模式(Design pattern)是一套被反复使用、多数人知晓的、经过分类的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问,设计模式于己于他人于系统都是多赢的;设计模式使代码编制真正工程化;设计模式是软件工程的基石脉络,如同

    阅读全文...

  • CSS3初体验之奇技淫巧

    Posted by : lon.y@qq.com on 2017年7月4日

    自CSS3流行以来,虽然以前看过一遍所有的新增属性,但其实在实际项目中用到的少之又少。所以没有形成系统性的认识,以及看到效果立马就能想到解决方案的能力。然后最近正好遇到一个需要绘制大量动画的需求,所以决定趁此机会好好研究一下这个既熟悉又陌生的css3。 在正式开始css3之前,先来介绍一些比较经典的css3实例,让大家好好感受一下css3的魅力,本文会提到以下几个css3的属性: border-radius、::after、attr和content、box

    阅读全文...

  • 前端工程师应该了解的 CSS 进化史

    Posted by : lon.y@qq.com on 2017年7月4日

    CSS生日快乐!你毫无疑问地在你短暂的生命里产生了巨大的影响,永远地改变了网络的审美。 层叠样式表(CSS)就像一位神童,从一开始就展示出了巨大的潜力。当它还在“青春期”努力地寻找兼容性的时候,这种样式语言就已经克服了大部分的障碍并证明了自己足以成为Web技术的基石。 让我们回顾一下迄今为止CSS的一生。 1996年12月—CSS 1 互联网上对CSS正式的介绍要追溯到1996年,万维网联盟 (W3C) 面向全世界发布CSS的时候。CSS并不是当时唯一一种

    阅读全文...

  • 移动端样式小技巧

    Posted by : lon.y@qq.com on 2017年7月4日

    平时在移动端开发拼页面的过程中总会遇到一些问题,主要是各手机webview样式显示效果不一致造成的。以下总结了一些常见坑和一些小技巧,希望对看官有所帮助! 本文只针对两大手机阵营 Android和IOS 中的魅蓝metal 和 iPhone6进行样式对比。 一、line-height line-height经常用于文字居中,当然也有小伙伴会用上下padding去写.but!不管你用padding还是line-height,不同手机显示效果还是…不一样。 一

    阅读全文...

  • 在行内元素前注入一个换行

    Posted by : lon.y@qq.com on 2017年7月4日

    我遇到了一个小问题,我有一个 span 在 header 中,而我想要在 span 的前面产生一个换行。郑重声明,在 span 前面插入一个 <br> 标签当然没问题(而事实上,你还可以显示/隐藏这个标签,这非常有用)。但是…不得不用 HTML 去做一个布局相关的事情始终感觉有点奇怪。 因此,让我们来深入探索一下,在这个探索中,我们会多次说到“然而…”。 Break right after this and before this 块级元素能做

    阅读全文...