下载APP 编程狮,随时随地学编程
返回 首页

CSS拾遗系列

开始阅读
手册说明:

本系列是一个随笔式的学习笔记,主要记录与css相关的一系列内容。

为什么会有这个系列

前段时间在讨论产品的12月份迭代内容时,产品给出的需求是:要求首页改版,并且新版本的首页要求酷炫一点,特出产品的特点以及功能。最后要的要求是,使用前端技术做出一个比较连续的动画。本来我初步的设想是使用js来控制dom元素达到动画的效果,但是经过一些尝试之后,发现实在是太复杂,因为不同动画阶段之间的时序和dom元素之间的协调性不太好控制。后来转向了使用css3来实现动画效果然后再配合js做一些时序工作,发现效果还不错。

温馨提示:如果您想通过边学边练的方式学习CSS,那么请您移步CSS微课

前面说了这么多,其实都是序曲。因为正式因为这件事让我意识到,我应该写一个系列博客来容纳一些关于CSS相关的东西。其实CSS,特别是CSS3,是一个很有搞头的东西,平时在工作中,我也遇到过各种非常巧妙的CSS的小技巧,当然也有遇到各种坑。我觉得把这些记录下来应该是很有意义的吧。

除了上面的理由之外,还有一个原因就是,我本人的CSS能力相比JavaScript而言是较弱的,因为其实我是一个半路出家的FE,之前对这些也没有系统的学习过,很多时候都是现学现卖。所以这个系列博客的另一个作用就是我学习CSS相关知识的一个沉淀。

本系列的文章将会包含如下的几个内容方向,

  • 常用的或者不常用的CSS布局技巧
  • 各种CSS兼容技巧
  • 涉及CSS3的各种酷炫效果研究

可能以后还会增加更多的内容吧。:)


目录

科普

CSS盒模型科普
浅谈CSS中的伪元素和伪类
CSS的长度单位参考
CSS布局模型
CSS控制本文换行:word
认识CSS权重 | 蛋糕仙人 · 技术人需要危机感

技巧

CSS如何让页脚固定在页面底部
CSS如何使元素水平垂直定位
CSS常用布局之宽高自适应
CSS常用布局之各种元素的水平垂直居中
使用::selection自定义选中文本的颜色

研究

WebFont与页面ICON图标研究
CSS动画攻略
CSS选择器的一般性优化建议

CSS3

CSS3新特性概述
初识CSS3选择器
CSS3多列布局
CSS3 Flexbox属性与弹性盒模型
CSS3背景
CSS3渐变
CSS3阴影和反射
CSS3圆角
CSS3媒体查询与自适应网页设计

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }