(轉)CSS中空格的寫法

http://www.zhangxinxu.com/wordpress/?p=4562

字符以及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. 直接，例如搜狗輸入法輸入「版權」 – ©.
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; }

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