retina屏会以2个（乃至3个）物理像素来显示一个CSS像素（1px），所以在CSS中指定1px的边框实际占据的却是2个以上物理像素，在retina屏用户体验较差。 问题：只在Firefox and Safari 8+支持，安卓不支持。 border-img属性会将图片（如上…

在移动端 web 页面开发中，为了使 css 中使用的尺寸与设计稿一致，通常会采用 rem 单位配合 lib-flexible 来实现移动端的适配，在 IOS 设备上 flexible.js 会根据设备的分辨率动态的调整 viewport 的 width 和 scale 来达到目的。 但是…

前段时间 @Mirza Joldic 在 Medium 上发布了一篇文章，通过几个 Gif 动态非常形象的阐述了 CSS Grid 的几个核心概念以及使用方法，今天我就借花献佛，用这几张图让初学者快速掌握 CSS Grid 的核心概念和使用技巧。

内容包括： HTML（讲述你不知道的absolute和float关系）和javascript（自己写的一段原生js实现双击切换效果） 最近在一个项目中发现一个自己一直忽视的问题 position 和 float 的混用问题，position定位给我们前端开发中页面的布局带来了很…

老套路有图有真相，这才叫做分享。本文内容是：一个 div 里面，两个子 div 高度自适应（平分父 div 的高度）和元素内容过多的时候，根据需求出现高度滚动条或者宽度滚动条。

CSS 揭秘之多重边框 & 连续的图像边框 & 蚂蚁行军效果边框

翻译自CSS Viewport Units: A Quick Start。此文章简单介绍了视口单位及其应用，用于提升大家css知识的广度 单位意义 CSS中有四个基于视口单位，分别为vh、vw、vmin和vmax。 视口高度（vh）- 这个单位表示视口的高度。1vh等于视口高度…

有关 css in js 的思考和方案

写在前面： 在写页面的时候，偶尔有时会遇到下图这两种情况，一种是单词过长时会溢出div，一种是直接换行，导致出现空白区域。这两个情景就需要word-wrap、word-break这两个属性出场来解决了。闲话不扯了，本文主要内容有：word-wrap和word-break属性介绍…