CSS 在 Web 内容中使用系统字体 某天（2016.07.12）发现 GitHub 的字体比原来宽了一些，打开开发者工具一看，字体设置中多了两个奇怪的玩意： body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Ro...
CSS 等宽列背后的表格布局算法 引子 网页开发中，经常需要实现等宽列效果，比如 Web App 中的 TabBar、Slider 底部的等宽指示条，而且往往元素的个数是不确定的，无法设定固定的百分比宽度。 虽然借助 flexbox 可以轻松实现： .container { display: flex; } .i...
CSS Flexbox 完全指南 背景 CSS Flexbox Layout（Flexible Box）模块（目前为 W3C 最终草案2016.03.01 更新为 CR —— 候选推荐规范）致力于提供一种更高效的布局方式，即便子项尺寸未知（或动态）的情况下，对齐、分布容器子项之间的空间，因此谓之「flex」。 弹性布...
CSS HTML 和 Body 在 CSS 中的区别 在 CSS 中，<html> 和 <body> 的区别往往被忽略，全局样式或者定义在 <html> 上，或者定义在 <body> 上。实际上，两者是有区别的，不论是 CSS 老鸟还是新手，都应该了解。 HTML 和 Body 如何关联...
CSS :nth-child 和 :nth-of-type 的区别 基本语法 :nth-child(an+b) 选择符匹配有父元素、前面有 an+b-1 个兄弟元素的元素。 element:nth-child(an + b) { style properties } :nth-of-type 选择符匹配有父元素、前面有 an+b-1 个同名兄弟元素的...
classList 五种鲜为人知的 CSS / JS 交互方式 使用 JavaScript 获取伪元素样式属性 众所周知，JS 可以使用 style 属性获取普通元素的 CSS 样式，那伪元素呢？也是可以的。 // Get the color value of .element:before var color = window.getCompu...
CSS 将HTML和CSS解耦 多年来，Web 标准社区一直在谈论关注分离（separation of concerns），就是将 CSS 、JavaScript、HTML 分开放在各自的文件里。我们也已经这样做了。 CSS Zen Garden （CSS 禅意花园）证明相同的 HTML 结构可以通过改变 CSS...
.htaccess 20个来自Html5 Boilerplate的代码片段 前言： 整理文章的时候发现草稿里躺着这样一篇文章——竟然是三年前的了，光阴飞逝啊！Html5 Boilerplate 看似简单，实则是前端优化的集大成者，每个前端开发者都应该仔细阅读其代码，包括注释里的一些链接，你将会受益匪浅。Divya Manian 还写了一本 HTML5 Boi...
Clearfix CSS 浮动清除方法总结 添加额外标记 少年，还记得当年页脚的 <br clear="all" /> 吗？最早、也是W3C推荐的方法，简单明了，缺点就是要添加额外的标记。 <br style="clear:both"/> 浮动父元素（Float...
CSS 那些让 Web开发者们深感意外的事情 作为 Web 开发者，对自己的行业前景，人人都有自己的看法，然而，任何行业都有出人意料的地方。著名的 Web 开发设计博客 Nope.com 曾向他们的读者做了一个调查，请他们列举 Web 开发领域那些让他们感到意外的事情，收到了各种各样的反馈，本文就是这次调查的结果与分析。 一个真...
animation “性感”的CSS链接翻转 鼠标悬停时，链接文字向左或向右舞动、倾斜。为了增强效果，为悬停状态设置不同的颜色（演示）。 [css] .cpojer-links a { display: inline-block; padding: 4px; outline: 0; color: #3a599d; -webkit...
CSS 7个提高用户体验的CSS技巧 CSS之美在于能通过少量的声明并可使网页变得很与众不同。下面是7个CSS小技巧，可以让你的网页更加时尚，让用户获得更佳的用户体验和浏览愉悦感。 改变选中文字的默认颜色 [css] selection { background:#c3effd; color:#000; /* Safar...
CSS 使用CSS3实现Faux列 这是一个CSS3的小技巧，不使用图片便实现Faux Columns。边栏在布局中的问题是它不能随着内容的扩展而延伸到相等的高度。常规的方法是创建一个图片背景应用到内容的父容器上。本文将介绍如何使用CSS3渐变实现相同的效果。 旧的方法 先来回顾一下让边栏背景沿着页面延伸的常规方法。根...
CSS CSS3 Media Queries 详解 说起CSS3的新特性，就不得不提到 Media Queries 。 本文比较详细，所以很多实际中用不到。所以如果只是想简单了解Media Queries，推荐参考 CSS3 Media Queries 。 CSS2.1定义了 Media 的部分，包括类型、组别和规则等。CSS并非为了...
CSS CSS3 Media Queries CSS2允许为特定的媒体指定样式表，如screen（屏幕）和print（打印），CSS3通过添加media queries（媒体查询库）使其更加有效。CSS3可以通过添加查询语句来确定不同的媒体类型，应用不同的样式表。例如为大的显示器指定一个样式表，为移动设备指定另一个样式表。有了这...
CSS CSS3 Media Query：移动 Web 的完美开端 移动时代，是任何 Web 设计与开发者都不能忽视的一个时代，总有一天，你设计的东西将被显示在两种屏幕上，桌面大屏幕和移动小屏幕，如何让同一个网站同时适应完全不同的两种尺寸 的屏幕，这是一个很久以来都没有完美解决方案的问题，直到有了 CSS3。 CSS3 的 Media Queries...
CSS CSS 3渐变跨浏览器实现 CSS渐变大约两年被Webkit浏览器引进，但是由于和大多数浏览器不兼容而很少使用。现在Firefox 3.6+开始支持CSS渐变，我们可以用样式创建渐变而无须使用图片。本文将介绍如何使用CSS创建支持主流浏览器的渐变：IE, Firefox 3.6+, Safari, Chrome...