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頁面相關的一些常見可用字符介紹