分享css中關於空格的寫法詳解

字元以及HTML實體	描述以及說明
 	這是我們使用最多的空格，也就是按下space鍵產生的空格。在HTML中，如果你用空格鍵產生此空格，空格是不會累加的（只算1個）。要使用 html實體表示才可累加。為了便於記憶，我總是把這個空格成為“牛逼(nb)空格(sp – space)”，雖然實際上並不牛逼。該空格佔據寬度受字型影響明顯而強烈。在inline-block布局中會搞些小破壞，在左右對齊布局中又是不可少 的元素。是個讓人又愛又恨的小東東。
 	該空格學名不詳。為了便於記憶，我們不妨就叫它“惡念(e n-ian)空格”。此空格傳承空格家族一貫的特性：透明滴！此空格有個相當穩健的特性，就是其佔據的寬度正好是1/2個中文寬度，而且基本上不受字型影響。
 	該空格學名不詳。為了便於記憶，我們不妨就叫它”惡魔(e m-o)空格”。此空格也傳承空格家族一貫的特性：透明滴！此空格也有個相當穩健的特性，就是其佔據的寬度正好是1個中文寬度，而且基本上不受字型影響。
 	該空格學名不詳。我們不妨稱之為“瘦弱空格”，就是該空格長得比較瘦弱，身體單薄，佔據的寬度比較小。我目前是沒用過這個東西，這裡亮出來是讓其過一下群眾演員的癮。

其中的 和 ，由於具有某一超贊的特性，使其可以登上web屆的舞台！什麼特性呢？如上表加粗展示，1. 透明； 2. 寬度正好跟中文正好是1:2和1:1的關係，於是，一些中文排版對齊什麼的，直接就可以使用這兩個空格調節，如：

<ul>    <li class="li">姓&emsp;&emsp;名：<input type="text" /></li>    <li class="li">手&ensp;機&ensp;號：<input type="text" /></li>    <li class="li">電子郵箱：<input type="text" /></li></ul>

當中文和英文混雜的時候，使用 ,  等空格實現冒號的完美對齊還是有些困難的，除非英文使用的是等寬字型，於是乎，我們就可以使用普通的 空格做英文字元的寬度調節。

　

「叉三千」指什麼呢？哈哈，其實是全形空格。

中文字型都是等寬的，一個全形空格的寬度就是一個普通中文的寬度。所以，上面的demo中 空格換成全形空格也是可以滴！

但是，我們不能直接在頁面中打全形空格，因為在大多數編輯器中空格是透明滴，很容易就被刪掉；另外，HTML壓縮時候，空格很可能被幹掉！咋辦？需要轉換書寫形式。

在web頁面上，一般有3種書寫：

1. 直接，例如搜狗IME輸入“著作權” – .

2. web字元，©

3. charCode表示：©

而上面的 ,  就是具有特定名稱的web字元。但是，恕我寡聞，我並不清楚全形空格是否有對應& + 關鍵字示意，所以，就使用工具轉成了charCode字元表示，也就是這裡的　，又稱「叉三千」！

稍等，你剛說了工具，什麼工具！?

哈，這位同學好敏銳，我是有一個私藏的小工具，可以把任一字元轉換成HTML識別格式，若有興趣，您可以狠狠地點擊這裡：任一字元轉換成HTML識別格式工具頁面

使用了這個工具，你會發現 ,  原來是相鄰兄弟關係：

•   →  

•   →  

再科普點關於字元的實用知識吧：
1. HTML中字元輸出使用&#x配上charCode值；
2. 在JavaScript檔案中為防止亂碼轉義，則是\u配上charCode值；
3. 而在CSS檔案中，如CSS虛擬元素的content屬性，直接使用\配上charCode值。

因此，想在HTML/JS/CSS中轉義“我”這個漢字，分別是：

1. 我

2. \u6211, 如console.log('\u6211');

3. \6211, 如.xxx:before { content: '\6211'; }

考慮到直接　這種形式暴露在HTML中，可能會讓螢幕助讀程式等輔助裝置讀取，從而影響正常閱讀流，因此，我們可以進一步最佳化下，使用標籤，利用虛擬元素，例如：

.half:before { content: '\2002'; speak: none; }.full:before { content: '\2003'; speak: none; }

這樣，佔位的空白字元即不能讀，也不能選了。