Benjamin - 专注前端开发和用户体验

标签:CSS

JAVASCRIPT

主流动画实现方式总结

相关概念:绘制频率、屏幕刷新频率、硬件加速、60fps 绘制频率: 页面上每一帧变化都是系统绘制出来的(GPU或者CPU)【参考浏览器渲染原理】。但这种绘制又和PC游戏的绘制不同,它的最高绘制频率受限于显示器的刷新频率(而非显卡),所以大多数情况下最高的绘制频率只能是每秒60帧(frame per ...

Benjamin 2年前 (2015-01-25) 4669℃ 0评论 6 喜欢

CSS(3)

CSS伪类和伪元素的异同

今天在微博上看到一些人在讨论:before 和::before的区别,有些细节问题自己也有些模糊,工作之余翻了下W3C规范,总结如下: 1. W3C CSS 2.1 Selectors 对伪类和伪元素没有做出区分,都是使用一个冒号,详细请戳这里 比如 伪类:first-child, 伪元素:firs...

Benjamin 2年前 (2015-01-20) 2756℃ 2评论 1 喜欢

CSS(3)

第一个CSS变量:currentColor

一、基本介绍 CSS变量正慢慢地从最初的草案到浏览器实现。但规范中有个已经存在多年的变量:currentColor。这个CSS特性具有良好的浏览器支持和一些实际的应用,本篇文章,我们来学习和了解它。 引用MDN中的描述: The currentColor keyword represents th...

Benjamin 2年前 (2014-12-02) 2376℃ 0评论 3 喜欢

CSS(3)

你可能不知道的7个CSS单位

如果你是一名前端开发工程师,一般px和em使用频率比较高。但是今天本文的重点是介绍一些我们使用很少、甚至么有听说的单位。 一、重温em <style type="text/css"> body {font-size: 12px;} div {font-size: 1.5em;}...

Benjamin 2年前 (2014-11-13) 4133℃ 3评论 9 喜欢

深入CSS属性系列

深入CSS属性(七):z-index

如果你不是一名csser新手,想必你对z-index的用法应该有个大致的了解了吧,z-index可以控制定位元素在垂直于显示屏方向(Z 轴)上的堆叠顺序,本文不去讲述基本的API如何使用,而是去更深入的了解z-index是如何工作的,使用z-index的时候有哪些问题,以及z-index在日常开发中...

Benjamin 2年前 (2014-10-21) 3202℃ 2评论 2 喜欢

CSS预处理

SASS学习

一、什么是SASS Sass是是一种基于ruby编写的CSS预处理器,诞生于2007年,是最早也是最成熟的一款CSS预处理器语言,它可以使用变量、嵌套、混入、继承,运算,函数等功能,使得CSS的开发,变得简单清晰可维护,同时也大大节省了设计者的时间,提高了效率。Sass最后还是会编译出合法的CSS让...

Benjamin 3年前 (2014-03-18) 2375℃ 0评论 0 喜欢

深入CSS属性系列

深入CSS属性(六):margin

一、属性介绍 margin 属性接受任何长度单位,可以是像素、英寸、毫米或 em。 可取值: auto 浏览器计算外边距。 length 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。 % 规定基于父元素的宽度的百分比计算的外边距。 inherit 规定应该从父元素继承外边距。 二...

Benjamin 3年前 (2014-03-02) 3318℃ 0评论 2 喜欢

深入CSS属性系列

深入CSS属性(三):line-height

一、line-height的定义 line-height(行高),相邻文本行基线间的距离。那什么是基线呢?对于文字“Benjamin-xx工程师”,来说基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿。 二、line-height理解 有的时候我们会遇到,不给盒子设置宽度...

Benjamin 3年前 (2014-03-01) 4238℃ 0评论 5 喜欢