原文地址：Building a Trello Layout with CSS Grid and Flexbox 原文作者：Giulio Mainardi 译文出自：掘金翻译计划 本文永久链接：https://github.com/xitu/gold-miner/blob/mas…

如果对 CSS 有过疑问，不妨看一看

第一种方法使用 border 属性 hack 出三角形，并通过对三个元素进行拼接最终实现了平行四边形；而第二种方法则通过 transform: skew 来得到平行四边形。总体来说，第二种方法相对于第一种代码量小得多，而且也很好理解。唯一的不足是无法构造像本站的分页中所使用的梯形。希望本文对各位有所帮助。

浏览器的兼容性越来越好，移动端基本是清一色的webkit，经常会用到css的不同尺寸/长度单位，这里做个整理。 概览 绝对单位 px: Pixel 像素 pt: Points 磅 pc: Picas 派卡 in: Inches 英寸 mm: Millimeter 毫米 cm: …

有很多方法来检查我们的 HTML 代码，发现并解决错误，比如：使用 W3C 标签校验服务 。 另外我们也有简单的方法并且能将其整合到我们的工作流当中来，那就是：使用一些稍微高级的 CSS 选择器来高亮潜在问题区域。有一些简单的错误我们可以用 CSS 选择器来捕捉到他。

媒体查询是一个将很多响应式概念和工具连接在一起的粘合剂。这些查询语句都是简单但是功能很强大的，它们允许我们检测设备属性，定义规则，并根据规则等的不同加载不同的 CSS 属性。例如，你可以为不同的设备优化导航菜单，将桌面浏览器上的完整水平菜单转换为经常在移动设备上遇到的 “汉堡包”（垂直或折叠）菜单结构。

学会调试，终身受益。

从定义上看z-index真的是个很简单的属性，就是描述元素的层叠顺序，但是有时间我们会发现z-index并不会起作用。这时候我们就需要好好的理解一下z-index背后的问题。 我们多知道position的默认值为static,z-index的默认值为auto。当我们抛开posi…