mac-hotkeys

Posted on 2025-04-19 Edited on 2025-05-01 In tools
Symbols count in article: 283 Reading time ≈ 1 mins.

MacOS上的快捷键特别多，用好这些快捷键能极大的提高我们的工作效率。

触控板手势

在Mac上用好触控板手势，基本上可以脱离鼠标进行工作。话不多少，直接上图，图片来自知乎。

MacOS 按键符号

MacOS上没有Windows3统上的Ctrl健(使用Command健代替)，而且多了一个Windows系统上没有的Option键。

如果你看到的快捷键是Ctrl，那么在Mac上应该替换为Command，如果是Alt，那么在Mac上应该替换为Option。下面是MacOS上一些常用的按键符号：

vscode-shortcuts

Posted on 2025-04-16 Edited on 2025-04-20 In tools
Symbols count in article: 179 Reading time ≈ 1 mins.

VSCode是如今市面上最流行的IDE了，用好VSCode是每一个前端程序员必备的技能，而VSCode又有大量的快捷键可以使用，下面是一些常用的VSCode快捷键。

说明

在MacOS上请将Ctrl替换为Command，Alt替换为Option

diary-2025-04

Posted on 2025-04-09 Edited on 2025-04-20 In diary
Symbols count in article: 312 Reading time ≈ 1 mins.

2025-04-08

今天是2025年4月8日，星期二，天气晴。
今天王军来大连出差，住中山区新文园大酒店，我正好失业在家，于是就去找他喝酒，晚上是在钱库里自助吃的。十多年没见了，有很多话要说，家长里短的聊了一大通，他第二天还要培训，而我再过一天也要去天津渣打银行报道，所以没有喝太多酒！
期待下次相聚。

CSS中如何隐藏元素

Posted on 2025-04-08 Edited on 2025-04-20 In css
Symbols count in article: 625 Reading time ≈ 2 mins.

概述

CSS中隐藏元素的方法有很多，每种方式都有其适用的场景，在合适的场景下使用合适的方式，能使编程事半功倍。

1. display: none

display: none是最常用的隐藏元素的方法，它会将元素从文档流中移除，元素不占据空间。

1
2
3

.hidden {
  display: none;
}

1	<div class="hidden">This is a hidden element</div>

css-troubleshooting

Posted on 2025-04-06 Edited on 2025-04-08 In css
Symbols count in article: 749 Reading time ≈ 3 mins.

body宽度设置为100%，为啥还有横向滚动条？

问题现象:

这是一个非常简单的例子，创建一个html文件，设置body的宽度为100%，然后在浏览器中打开，发现有横向滚动条。为什么呢？

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      body {
        width: 100%;
      }
    </style>
  </head>
  <body>
    This is body
  </body>
</html>

node-npm-command

Posted on 2025-04-06 Edited on 2025-04-20 In node.js
Symbols count in article: 130 Reading time ≈ 1 mins.

1. npm 安装报错

问题现象：安装npm包时，报错如下：

code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: karma-jasmine-html-reporter@1.6.0
npm ERR! Found: jasmine-core@3.6.0

This is caused by dependency conflict, you can try to install the package with --force or --legacy-peer-deps flag. see here for more details.

css-block-formatting-context

Posted on 2025-04-06 Edited on 2025-04-20 In css
Symbols count in article: 963 Reading time ≈ 4 mins.

CSS Block Formatting Context (BFC)

CSS中的Block Formatting Context(简称BFC - 块级格式化上下文)是一个非常重要的概念，也是前端面试中常考的题目之一，今天我们来彻底学习一下BFC。

什么是BFC?

简单来说BFC是一个独立自治的渲染区域，BFC内的样式和BFC外的样式之间互相不影响。

css-margin-collapse

Posted on 2025-04-04 Edited on 2025-04-20 In css
Symbols count in article: 1.3k Reading time ≈ 5 mins.

什么是外边距折叠（塌陷）

CSS Margin Collapse - CSS外边距折叠（也有叫外边距塌陷的），是指在某些情况下，两个相邻(或嵌套)的元素的外边距会合并成一个外边距，这个现象被称为外边距折叠。

外边距折叠的特征：

外边距折叠只发生在垂直方向上，也就是说只有margin-top或者margin-bottom会折叠，margin-left和margin-right不会折叠。
发生外边距折叠时，会取相邻两个元素的外边距中较大的一个作为折叠后的外边距。
浮动元素和绝对定位元素不会发生外边距折叠。

css-checkbox-customize-style

Posted on 2025-04-03 Edited on 2025-05-24 In css
Symbols count in article: 1.5k Reading time ≈ 5 mins.

如何给 Checkbox 添加自定义样式？

各位老铁大家好，又是一个风和日丽的日子，人生苦短，不能总是留恋美好的风景，亦要时时刻刻学习，所谓活到老学到老。今天我们一起来学习一下如何给 html 中的 ckeckbox 添加自定义样式。

如何在 html 中实现 checkbox？

其实，html 中根本没有checkbox这种控件，也就是说，你不能这样写：

html-tag-label

Posted on 2025-03-30 Edited on 2025-05-24 In html
Symbols count in article: 1k Reading time ≈ 4 mins.

今天我们一起来学习一下html中的label标签。

什么是label？

现实生活中，标签无处不在，比如我们在超市买东西时，商品上都会贴有标签，标签上会标明商品的名称、成分、型号、价格等信息。

Web世界中也有自己的标签，那就是label，它的作用是为控件提供一个说明。以如下登录界面为例，这里的Username和Password就是label，他们表明右侧的输入框分别要输入用户名和密码。label标签的作用就是为控件提供一个标题以说明这个控件的作用。

label标签的使用场景

当然label标签不仅可以用于输入框(input)，还可以用于下拉选择框(select)，单选框(radio)，复选框(checkbox)等控件。

用于下拉选择框

html中使用select + option来完成下拉框的功能。

<div style="padding: 16px; border-radius: 4px; border: 1px solid #ccc;">
  <label for="country">Country:</label>
  <select id="country" name="country">
    <option value="china">China</option>
    <option value="usa">USA</option>
    <option value="uk">UK</option>
  </select>
</div>

渲染结果如下：

用于单选框

对于单选框（radio button），如果要实现互斥效果（多个radio button只能选择其中一个），必须给这些radio button设置相同的name，比如下面两个radio button的name都设置为gender。

<div style="padding: 16px; border-radius: 4px; border: 1px solid #ccc;">
  <span>Gender: </span>
  <label for="male">
    <input type="radio" id="male" name="gender" value="male"> Male
  </label>
  <label for="female">
    <input type="radio" id="female" name="gender" value="female"> Female
  </label>
</div>

渲染结果如下：

用于复选框

html代码如下：

<div style="padding: 16px; border-radius: 4px; border: 1px solid #ccc">
  <label for="subscribe">Subscribe to newsletter:</label>
  <input id="subscribe" name="subscribe" type="checkbox" />
</div>

渲染结果如下：

如何使用label标签

为控件添加label标签主要有两种方式，一种是使用for/id的方式，另一种是使用嵌套的方式。

使用for/id方式提供label标签

首先，定义控件时，为控件提供一个id属性。
然后，在label标签中添加for属性，指定其值为控件的id属性值。

下面的代码中，我们定义了一个文本框控件，设置其id属性值为username，并为它提供了一个label标签，设置其for属性的值为username。这样，label和控件就关联起来了。

1 2	<label for="username">Username:</label> <input id="username" name="username" type="text" />

使用嵌套方式提供label标签

如果不想使用for/id的形式，那么可以直接用label标签包裹住对应的控件

1
2
3

<label>Username:
  <input type="text" name="username">
</label>

label与控件的顺序

无论使用哪种形式，都可以调整label和控件的先后顺序。

这样写法渲染后label在前，输入框在后。

1 2	<label for="subscribe">Subscribe to newsletter:</label> <input type="checkbox" id="subscribe" name="subscribe">

下面的写法渲染后输入框在前，label在后。

1 2	<input type="checkbox" id="subscribe" name="subscribe"> <label for="subscribe">Subscribe to newsletter:</label>

嵌套方式也一样，这样写选然后输入框在前，label在后。

1
2
3

<label>
  <input type="checkbox" name="subscribe"> Subscribe to newsletter
</label>

而下面这样写选然后label在前，输入框在后。

1
2
3

<label>Subscribe to newsletter 
  <input type="checkbox" name="subscribe">
</label>

在实际编程中，对于input输入框来说，一般label在前面，控件在后面。而对于checkbox来说，一般是控件在前而label在后。

label标签有哪些好处？

使用label标签有哪些好处呢？

增强页面的可访问性，label标签不仅从视觉上为控件提供了标题，也为屏幕阅读器提供了可读的信息，这使得有视力障碍的用户也能更好的理解页面内容。
提供用户体验，label标签扩大了控件的可点击区域，即使用户点击label标签也能触发控件的操作。- 以上面第一个例子username控件为例，即使用户点击label标签username，input控件也能获取焦点。