发表于 更新于 分类于

手机预览可使用 草料官网，手机和电脑需要在同一个局域网下。

文件结构

1
2
3
4
5
6
7
│  index.css
│  index.html
│  index.styl
├  common
│      base.styl
│      index.styl
│      mixin.styl

这里使用的是 stylus 预处理，真正实现了移动端一像素的 border

这里的公共样式放在了 common 文件夹下， common/index.styl 为导出口，根目录下的 index.styl 只需导入 common/index.styl 就可以了。

HTML 部分代码

1
2
3
4
5
6
7
8
9
10
11
<div class="tab border-1px">
    <div class="tab-item">
        <a href="" class="">商品</a>
    </div>
    <div class="tab-item">
        <a href="" class="">评论</a>
    </div>
    <div class="tab-item">
        <a href="" class="">商家</a>
    </div>
</div>

根目录下的 index.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 引入公共的文件
@import "common/index.styl"
// tab 的样式，使用 flex 布局
.tab
    display: flex
    width: 100% 
    height: 40px
    line-height: 40px
    border-1px(rgba(7, 17, 27, 0.1))  // 使用 border-1px 函数
    .tab-item
        flex: 1
        text-align: center
        & > a
            display: block   // 这里设置 block 可以让 a 元素充满整个 tab-item
            text-decoration: none
            font-size: 14px
            color: rgb(77, 85, 93)

common 文件夹下的 base.styl

1
2
3
4
5
6
7
8
9
10
11
// 适配不同机型 dpr
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
    .border-1px
        &::after
            -webkit-transform: scaleY(0.7)
            transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
    .border-1px
        &::after
            -webkit-transform: scaleY(0.5)
            transform: scaleY(0.5)

common 文件夹下的 index.styl

1
2
3
// 公共的文件出口
@import "./common/mixin.styl"
@import "./common/base.styl"

common 文件夹下的 mixin.styl

1
2
3
4
5
6
7
8
9
10
11
// 设置伪元素, 1px 的下边框
border-1px($color)
    position: relative
    &::after
        display: block
        position: absolute
        left: 0
        bottom: 0
        width: 100%
        border-top: 1px solid $color
        content: " "

编译后的 CSS

根目录下的 index.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
  .border-1px::after {
    -webkit-transform: scaleY(0.7);
    transform: scaleY(0.7);
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .border-1px::after {
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
}
.tab {
  display: flex;
  width: 100%;
  height: 40px;
  line-height: 40px;
  position: relative;
}
.tab::after {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid rgba(7,17,27,0.1);
  content: " ";
}
.tab .tab-item {
  flex: 1;
  text-align: center;
}
.tab .tab-item > a {
  display: block;
  text-decoration: none;
  font-size: 14px;
  color: #4d555d;
}

参考

慕课网

发表于 更新于 分类于

for in

for...in 循环实际是为循环可枚举（enumerable）对象而设计的：

如果表示要迭代的对象的变量值为 null 或 undefined，for...in 语句在 ES5 中不会抛出错误，只是不执行循环体，建议使用 for...in 之前，先检测确认该对象的值不是 null 或 undefined 。

1
2
3
4
5
let arr = null;
for (let prop in arr) {
    console.log(prop);
}
// 不会打印出任何东西

循环一个 {}

1
2
3
4
5
6
7
8
let obj = { a: 1, b: 2, c: 3 };
for(let prop in obj) {
    console.log(prop + ": " + obj[prop]);
}
// 输出
// a: 1
// b: 2
// c: 3

可以用来循环一个数组，但不推荐，因为不像对象，数组的 index 跟普通的对象属性不一样，是重要的数值序列指标。

1
2
3
4
5
6
7
8
9
10
let arr = ["a","b","c","d","e"];
for(let prop in arr) {
    console.log(prop + ": " + arr[prop])
}
// 输出
// 0: a
// 1: b
// 2: c
// 3: d
// 4: e

总之，for...in 是用来循环带有字符串 key 的对象的方法。

for of

ES6 在 for 和 for…in 基础上，新增了一个 for of 循环，在迭代器产生的一系列值上循环。

for...of 循环的值必须是一个 iterable ，或者说它必须是可以转换 / 封箱到一个 iterable 对象的值。iterable 就是一个能够产生迭代器供循环使用的对象。

JavaScript 中默认为（或提供）iterable 的标准内建值包括：

  • Arrays
  • Strings
  • Generators
  • Collections / TypedArrays

默认情况下平凡的对象并不适用 for…of 循环，因为他们并没有默认的迭代器。

循环一个数组(Array):

1
2
3
4
5
6
7
8
9
10
let arr = ["a","b","c","d","e"];
for (let value of arr) {
    console.log(value);
}
// 输出
// a
// b
// c
// d
// e

我们可以使用 const 来替代 let，这样它就变成了在循环里的不可修改的静态变量。

1
2
3
4
5
6
7
8
9
10
let arr = ["a","b","c","d","e"];
for (const value of arr) {
    console.log(value);
}
// 输出
// a
// b
// c
// d
// e

循环一个字符串：

原生字符串值 “gzl” 被强制类型转换 / 封箱到等价的 String 封装对象中，而 Strings 默认是一个 iterable。

1
2
3
4
5
6
7
8
let str = "gzl";
for (let value of str) {
    console.log(value);
}
// 输出
// g
// z
// l

参考

你不知道的JavaScript（下卷）P110

发表于 分类于

CSS半透明边框

假设我们想给一个容器设置一层白色背景和一道半透明白色边框，body 的背景会从它的半透明边框上透上来。如果我们这样写：

HTML 部分

1
2
3
<body>
    <div class="btn">123456</div>
</body>
1
2
3
4
5
6
7
body{
    background: yellow;
}
.btn{
    border: 10px solid hsla(0, 0%, 100%, 0.5);
    background: white;
}

打开浏览器会发现不起作用，因为 background 在 Box Model 中，它是布满整个元素的盒子区域的，并不是从 padding 内部开始（也就是说从 border 就开始啦），但有一点需要注意，background-color 是从元素的边框左上角起到右下角止，而 background-image 却不一样，他是从 padding 边缘的左上角起而到 border 的右下角边缘止。

所以我们需要 background-clip 这个属性，设置元素的背景（背景图片或颜色）是否延伸到边框下面。

MDN: background-clip

1
2
3
4
5
6
7
8
body{
    background: yellow;
}
.btn{
    border: 10px solid hsla(0, 0%, 100%, 0.5);
    background: white;
    background-clip: padding-box;
}

参考

奇妙的 background-clip: text