FED实验室 - 专注WEB端开发和用户体验

标签:CSS

JAVASCRIPT

主流动画实现方式总结

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

煦涵 2年前 (2015-01-25) 5243℃ 0评论 6 喜欢

CSS(3)

CSS伪类和伪元素的异同

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

煦涵 2年前 (2015-01-20) 2930℃ 2评论 1 喜欢

CSS(3)

第一个CSS变量:currentColor

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

煦涵 3年前 (2014-12-02) 2599℃ 0评论 3 喜欢

CSS(3)

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

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

煦涵 3年前 (2014-11-13) 4406℃ 3评论 9 喜欢

深入CSS属性

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

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

煦涵 3年前 (2014-10-21) 3667℃ 2评论 2 喜欢

CSS预处理

SASS学习

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

煦涵 3年前 (2014-03-18) 2504℃ 0评论 0 喜欢

深入CSS属性

深入CSS属性(六):margin

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

煦涵 3年前 (2014-03-02) 3687℃ 0评论 2 喜欢

深入CSS属性

深入CSS属性(五):min-width

一、基本含义 min-width 属性为给定元素设置最小宽度。它可以阻止 width 属性的应用值小于 min-width 的值。min-width 的值会同时覆盖 max-width 和 width。 二、可取值 常用百分比、固定px|em|ex等,其他属性值如max-content,min-co...

煦涵 3年前 (2014-03-02) 2128℃ 0评论 0 喜欢

深入CSS属性

深入CSS属性(四):vertical-align

一、前言 vertical-align对于初学者最常见的使用是在表格中了,尤其是使用dreamweaver的童学,常见的数top,middle,bottom了,其他的应该很少用到,但是vertical-align的属性之多,所以情况也略显复杂,下面先来看看百度及Google常见问题: 1.verti...

煦涵 3年前 (2014-03-01) 2859℃ 0评论 0 喜欢

深入CSS属性

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

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

煦涵 3年前 (2014-03-01) 4702℃ 0评论 5 喜欢

CSS(3)

深入CSS属性(一):word-break与word-wrap

点击进入:深入CSS属性:CSS文本断行 下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:转载声明:本文标题:深入CSS属性(一):word-break与word-wrap本文链接:http://www.zuojj.com/archives/152.html,转载请注明转自FED实验室-专注...

煦涵 3年前 (2014-02-25) 3542℃ 0评论 1 喜欢

CSS(3)

line-height:1.5 与line-height:150%的区别

line-height的属性值: normal:根据浏览器决定,一般为1.2。 number:仅指定数字时(无单位),实际行距为字号乘以该数字得出的结果。可以理解为一个系数,子元素仅继承该系数,子元素的真正行距是系数与自身元素字号相乘的结果。大多数情况下推荐使用,可以避免一些意外的继承问题。 len...

煦涵 3年前 (2014-02-23) 5187℃ 5评论 4 喜欢

CSS(3)

各浏览器default css 对照表

今天花了近3个小时的时间总结了这个对照表,以备后期参考,以前经常查看一些公司网站的css reset(包括大的互联网公司),大多也都是对所有常见的标签一致使用{margin:0;padding:0},更有甚者,*{margin:0,padding:0},这样的话,页面render的时候会降低渲染效率...

煦涵 3年前 (2014-02-23) 2061℃ 0评论 0 喜欢