CSS

你可能不知道的 background-position

background-position 这个属性相信做过前端的都不会太陌生,尤其是在使用 CSS Sprite 的时候。但是一直以来,它都有一个缺陷——只能相对于容器的左边和上边来定位。这使得很多需求处理起来很 trick。比如,我想让图标定位到容器的左上角,距离上边和右边各 10px。如何实现这种效果呢? 通常情况下,如果容器是定宽的话,我们可以具体的设置 background-position 的 x 和 y 来绝对的定位背景图片的位置。但是如果不定宽话,就稍微麻烦一些,这时我们可能会选择用百分比来大约的定位背景图片的位置,但是不怎么精确,另一种方式就要借助于 JS 计算了:(。 好消息是

  • Kevin Yue
    Kevin Yue
1 min read
CSS 处理神器 —— PostCSS
CSS

CSS 处理神器 —— PostCSS

缘起 之前一直使用 Autoprefixer 来处理 CSS 的前缀,配合着 grunt 或 gulp 等构建工具,用起来非常的方便。但不知从什么时候起,grunt-autoprefixer 的首页不推荐使用了,转而推荐使用 PostCSS。经过一番折腾,发现了 PostCSS 这一神器,推荐给需要的朋友。 PostCSS PostCSS 是一款用 JS 插件来转换样式的工具。 PostCSS 会将 CSS 代码解析成抽象的语法树,并对外提供 API

  • Kevin Yue
    Kevin Yue
2 min read