css 分类

网站全部页面置灰最简单方式是:

html {
  filter: grayscale(100%);
}

fxss原创小于 1 分钟

tailwindcss一览表

引入 tailwindcss 的目的是减少编写 css ，下面列出的是 tailwindcss 一览表：

fxss原创大约 6 分钟

css、scss常用汇总

清除浮动

@mixin clearfix {
  $selector: &;

  @at-root {
    #{$selector}::before,
    #{$selector}::after {
      display: table;
      content: "";
    }
    #{$selector}::after {
      clear: both;
    }
  }
}

.row {
  @include clearfix;
}

fxss原创小于 1 分钟

css适配ios安全区

本文转自： https://vant-contrib.gitee.io/vant/#/zh-CN/style#an-quan-qu

.van-safe-area-top {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top)
}

.van-safe-area-bottom {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom)
}

fxss小于 1 分钟

如何写出一套可维护的CSS库？

fxss小于 1 分钟

移动端1px

写本篇文章的时候是看了移动端1px问题解决方案，这里面介绍了多种解决方案，我本篇文章只着重介绍伪元素先放大后缩小的方法。

可以先点击查看效果链接，建议在Retina屏幕移动端查看：移动端1px，可直接使用手机扫码下方二维码 qrcode_www.fxss.work.png 。

fxss原创大约 1 分钟

Sass 常用混合器

常用混合器，可用 @include 引入混合器。

清浮动

@mixin clearfix {
  $selector: &;

  @at-root {
    #{$selector}::before,
    #{$selector}::after {
      display: table;
      content: "";
    }
    #{$selector}::after {
      clear: both;
    }
  }
}

fxss原创小于 1 分钟

css计数器

本质上CSS计数器是由CSS维护的变量，这些变量可能根据CSS规则增加以跟踪使用次数。这允许你根据文档位置来调整内容表现。 CSS计数器是CSS2.1中自动计数编号部分的实现。计数器的值通过使用counter-reset 和 counter-increment 操作，在 content 上应用 counter() 或 counters()函数来显示在页面上。

fxss原创大约 5 分钟

css 水平垂直居中

下面为公共代码：

<div class="box">
    <div class="small">small</div>
</div>

fxss原创大约 1 分钟

css选择器

[attribute]

例子	例子描述
`[target]`	选择带有 target 属性所有元素。

[attribute=value]

例子	例子描述
`[target=_blank]`	选择 target="_blank" 的所有元素。

fxss原创大约 1 分钟

跳转到: