HTML空格符號 nbsp; ensp; emsp; 介紹以及實現中文對齊的方法

一：不同空格符合的區別

•   半角的不斷行的空白格（推薦使用）
•    半角的空格 
•    全角的空格

詳細的含義：

 ：這是我們使用最多的空格，也就是按下space鍵產生的空格。在HTML中，如果你用空格鍵產生此空格，空格是不會累加的（只算1個）。要使用html實體表示才可累加。該空格占據寬度受字體影響明顯而強烈。在inline-block布局中會搞些小破壞，在兩端對齊布局中又是不可少的元素。

 ：此空格有個相當穩健的特性，就是其占據的寬度正好是1/2個中文寬度，而且基本上不受字體影響。

  ：此空格也有個相當穩健的特性，就是其占據的寬度正好是1個中文寬度，而且基本上不受字體影響。

二：使用場景

對於 和 在一些中文排版對齊方面可以使用，如下html代碼：

<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>

實現的效果如圖所示：

值得注意的是：上面的空白字符中文對齊方法在IE6下不能完全兼容。（現在誰還在兼容IE6呢，所以還是非常有用的。）

三：空格新成員&#x3000

大多數編輯器中空格是透明滴，很容易就被刪掉；另外，HTML壓縮時候，空格也會被刪除掉，所以需要轉換書寫形式。

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

• 直接，例如搜狗輸入法輸入“版權” – ©.
• web字符，©
• charCode表示：©

而上面的 ,  就是具有特定名稱的web字符。但是，恕我寡聞，我並不清楚全角空格是否有對應& + 關鍵字示意，所以，就使用工具轉成了charCode字符表示，也就是這里的　

•   →  
•   →  

字符使用技巧：

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; }

html代碼：

<ul>
    <li class="li">姓<span class="full"></span><span class="full"></span>名：<input type="text" /></li>
    <li class="li">手<span class="half"></span>機<span class="half"></span>號：<input type="text" /></li>
    <li class="li">電子郵箱：<input type="text" /></li>
</ul>

css代碼：

.half {
    *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');
}
.full {
    *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' ');
}
.half:before { content: '\2002'; speak: none; }
.full:before { content: '\2003'; speak: none; }

上面用到了runtimeStyle這個對象屬性，這個是IE專屬的。

下面簡單介紹下style、 currentStyle、 runtimeStyle以及getComputedStyle的區別，在IE下測試如下。

html代碼：

<div id="tt" style="color:blue;">這里是來檢測style,currentStyle,runtimeStyle的區別</div> 

js代碼：

var myDiv = document.getElementById("tt");
myDiv.runtimeStyle.color="black"; 
console.log(myDiv.currentStyle.color);  //black
console.log(myDiv.runtimeStyle.color);  //black
console.log(document.defaultView.getComputedStyle(myDiv, null).color); //rgb(0, 0, 0)
console.log(myDiv.style.color);         //blue

說明一下：

obj.style：這個方法只能JS只能獲取寫在html標簽中的寫在style屬性中的值（style=”…”），而無法獲取定義在<style type="text/css">里面的屬性。

IE中使用的是obj.currentStyle方法，而FF是用的是getComputedStyle 方法 。

“DOM2級樣式”增強了document.defaultView，提供了getComputedStyle()方法。這個方法接受兩個參數：要取得計算樣式的元素和一個偽元素字符串（例如“:after”）。如果不需要偽元素信息，第二個參數可以是null。getComputerStyle()方法返回一個CSSStyleDeclaration對象，其中包含當前元素的所有計算的樣式。

其語法為：document.defaultView.getComputedStyle('元素', '偽類')；IE9及以上支持該寫法，IE8以及以下不支持。

總結一下：

通過document.defaultView.getComputedStyle()得到背景色，不同瀏覽器得到的不一樣，可能會返回將所有顏色轉換成RGB格式，也可能是顏色值。

IE通過currentStyle方法得到的顏色值沒有將顏色轉化成RGB格式。

詳細了解：《js中使用document.defaultView.getComputedStyle()、currentStyle()方法獲取CSS屬性值》

參考地址：

小tips: 使用&#x3000;等空格實現最小成本中文對齊

CSS 聽覺參考手冊

web頁面相關的一些常見可用字符介紹