字符介绍
| 字符以及 HTML 实体 | 描述以及说明 |
|---|---|
|
这是我们使用最多的空格，也就是按下 space 键产生的空格。在 HTML 中，如果你用空格键产生此空格，空格是不会累加的（只算 1 个）。要使用 html 实体表示才可累加。为了便于记忆，我总是把这个空格成为“牛逼(nb)空格(sp – space)”，虽然实际上并不牛逼。该空格占据宽度受字体影响明显而强烈。在 inline-block 布局中会搞些小破坏，在两端对齐布局中又是不可少的元素。是个让人又爱又恨的小东东。 |
  |
该空格学名不详。为了便于记忆，我们不妨就叫它“恶念(e n-ian)空格”。此空格传承空格家族一贯的特性：透明滴！此空格有个相当稳健的特性，就是其占据的宽度正好是 1/2 个中文宽度，而且基本上不受字体影响。 |
  |
该空格学名不详。为了便于记忆，我们不妨就叫它”恶魔(e m-o)空格”。此空格也传承空格家族一贯的特性：透明滴！此空格也有个相当稳健的特性，就是其占据的宽度正好是 1 个中文宽度，而且基本上不受字体影响。 |
  |
该空格学名不详。我们不妨称之为“瘦弱空格”，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。我目前是没用过这个东西，这里亮出来是让其过一下群众演员的瘾。 |
其中的 和 ，由于具有某一超赞的特性，使其可以登上 web 届的舞台！什么特性呢？如上表加粗展示，
- 透明；
- 宽度正好跟中文正好是 1:2 和 1:1 的关系
于是，一些中文排版对齐什么的，直接就可以使用这两个空格调节，如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,
body {
background-color: white;
margin: 0;
}
ul {
list-style-type: none;
font-size: 12px;
}
.li {
margin-top: 10px;
font-family: '宋体';
}
</style>
</head>
<body>
<ul>
<li class="li">姓  名：<input type="text" /></li>
<li class="li">手 机 号：<input type="text" /></li>
<li class="li">电子邮箱：<input type="text" /></li>
</ul>
</body>
</html>上面的空白字符中文对齐方法在 IE6 下不能完全兼容
总结
当中文和英文混杂的时候，使用 ,  等空格实现冒号的完美对齐还是有些困难的，除非英文使用的是等宽字体，于是乎，我们就可以使用普通的 空格做英文字符的宽度调节。
- HTML 中字符输出使用&#x 配上 charCode 值；
- 在 JavaScript 文件中为防止乱码转义，则是\u 配上 charCode 值；
- 而在 CSS 文件中，如 CSS 伪元素的 content 属性，直接使用\配上 charCode 值。
因此，想在 HTML/JS/CSS 中转义“我”这个汉字，分别是：
我- \u6211, 如
console.log('\u6211'); - \6211, 如
.xxx:before { content: '\6211'; }
考虑到直接　这种形式暴露在 HTML 中，可能会让屏幕阅读器等辅助设备读取，从而影响正常阅读流，因此，我们可以进一步优化下，使用标签，利用伪元素，例如：
.half:before {
content: '\2002'; /*   */
speak: none;
}
.full:before {
content: '\2003'; /*   */
speak: none;
}