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

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種書寫：

• 直接，例如搜狗IME輸入“著作權” – ©.
• 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);  //blackconsole.log(myDiv.runtimeStyle.color);  //blackconsole.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頁面相關的一些常見可用字元介紹