CSS中空格的寫法
| 字元以及HTML實體 | 描述以及說明 |
|---|---|
|
|
這是我們使用最多的空格，也就是按下space鍵產生的空格。在HTML中，如果你用空格鍵產生此空格，空格是不會累加的（只算1個）。要使用 html實體表示才可累加。為了便於記憶，我總是把這個空格成為“牛逼(nb)空格(sp – space)”，雖然實際上並不牛逼。該空格佔據寬度受字型影響明顯而強烈。在inline-block佈局中會搞些小破壞，在兩端對齊佈局中又是不可少 的元素。是個讓人又愛又恨的小東東。 |
|
  |
該空格學名不詳。為了便於記憶，我們不妨就叫它“惡念(e n-ian)空格”。此空格傳承空格家族一貫的特性：透明 |
|
  |
該空格學名不詳。為了便於記憶，我們不妨就叫它”惡魔(e m-o)空格”。此空格也傳承空格家族一貫的特性：透明滴！此空格也有個相當穩健的特性，就是其佔據的寬度正好是1箇中文寬度，而且基本上不受字型影響。 |
|
  |
該空格學名不詳。我們不妨稱之為“瘦弱空格”，就是該空格長得比較瘦弱，身體單薄，佔據的寬度比較小。我目前是沒用過這個東西，這裡亮出來是讓其過一下群眾演員的癮。 |
其中的 和 ，由於具有某一超讚的特性，使其可以登上web屆的舞臺！什麼特性呢？如上表加粗展示，1. 透明； 2. 寬度正好跟中文正好是1:2
<ul>
<li class="li">姓  名：<input type="text" /></li>
<li class="li">手 機 號：<input type="text" /></li>
<li class="li">電子郵箱：<input type="text" /></li>
</ul>
當中文和英文混雜的時候，使用 ,  等空格實現冒號的完美對齊還是有些困難的，除非英文使用的是等寬字型，於是乎，我們就可以使用普通的 空格做英文字元的寬度調節。
　
「叉三千」指什麼呢？哈哈，其實是全形空格。
中文字型都是等寬的，一個全形空格的寬度就是一個普通中文的寬度。所以，上面的demo中 空格換成全形空格也是可以滴！
但是，我們不能直接在頁面中打全形空格，因為在大多數編輯器中空格是透明滴，很容易就被刪掉；另外，HTML壓縮時候，空格很可能被幹掉！咋辦？需要轉換書寫形式。
在web頁面上，一般有3種書寫：
- 直接，例如搜狗輸入法輸入“版權” –
©. - web字元，
© - charCode表示：
©
而上面的 ,  就是具有特定名稱的web字元。但是，恕我寡聞，我並不清楚全形空格是否有對應& + 關鍵字示意，所以，就使用工具轉成了charCode字元表示，也就是這裡的　，又稱「叉三千」！
稍等，你剛說了工具，什麼工具！?
哈，這位同學好敏銳，我是有一個私藏的小工具，可以把任意字元轉換成HTML識別格式，若有興趣，您可以狠狠地點選這裡：任意字元轉換成HTML識別格式工具頁面
使用了這個工具，你會發現 ,  原來是相鄰兄弟關係：
 →  → 
再科普點關於字元的實用知識吧：
1. HTML中字元輸出使用&#x配上charCode值；
2. 在JavaScript檔案中為防止亂碼轉義，則是\u配上charCode值；
3. 而在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; }
這樣，佔位的空格字元即不能讀，也不能選了。