Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案！！

随着Web技术不断的革新，CSS近几年也变得多年前要更强大。在Web开发中，CSS是不可或缺的一部分，对于很多Web开发者来说，有很多CSS属性不知道，或者说他们知道，但忘记在最恰当的时候使用最适合的

本文其实应该叫，Web 用户体验设计提升指南。 ... 所谓的用户体验设计，其实是一个比较虚的概念，是秉承着以用户为中心的思想的一种设计手段，以用户需求为目标而进行的设计。设计过程注重以用户为中心，用户体验的概念从开发的最早期就开始进入整个流程，并贯穿始终。 良好的用户体验设计…

在大多数需求中，css3 的 transition / animation 都能满足我们的需求，并且相对于 js 实现，可以大大提升我们的开发效率，降低开发成本。 它的值是一个数列，数与数之间用逗号或者空白隔开，指定短划线(50px)和缺口(50px)的长度。 设置 strok…

在这篇文章我会介绍 9 个使你的 CSS 更加简洁优雅的使用技巧。这些技巧小生经常使用，觉得挺高效实用，所以也就有了这篇文章。 正文现在开始。 1. 建议使用 padding 代替 margin 我们在设计稿还原的时候，padding 和 margin 两个是常用的属性，但我们…

写这篇文章的起因是，当使用样式实现多行文本超出显示省略号的效果的时候，发现有的页面上省略号不是在文字末尾，而是在文字中间。后来查了下竟是跟文字在a链接里显示有关。下面详细说明下。 页面上文字超出部分用省略号表示，有多种方法可以实现，比如利用JS计算字数或是宽度，超出指定长度的字…

SVG sprite其实就是svg的集合。SVG即可缩放矢量图形 (Scalable Vector Graphics)的简称，是一种用来描述二维矢量图形的XML标记语言。SVG图形不依赖于分辨率, 因此图形不会因为放大而显示出明显的锯齿边缘.使用svg格式我们可以直接用代码来描…

CSS的网格布局模块提供了一个基于网格的布局系统，能够以行和列来进行布局，使其更容易设计网页，而不必使用浮标和定位。 display属性被设置为网格或内联网格。 为了使一个HTML元素表现为一个网格容器，你必须设置显示属性为网格或内联网格。网格容器组成的网格项目，网格项目又置于…

1. content-box与border-box的区别及相关计算 当多个元素分配W/H时，有子元素的可根据其子元素的W/H确定其值（具有优先分配W/H的权力）。且子元素一旦固定，其值也不会变化。