Introduction to HTML Space Notation nbsp; ensp; emsp;

The html space symbol nbsp; ensp; emsp; introduces and implements Chinese alignment,
1. Differences between spaces

• & nbsp; Blank box with half-width continuous rows (recommended)
• & ensp; halfwidth Space
• & Amp; emsp; fullwidth Space

Description:

& nbsp;: This is the most commonly used space, that is, the space Generated by pressing the space key. In HTML, if you use the space key to generate this space, the space will not be accumulated (only one space is counted ). It can be accumulated only when html Object Representation is used. The width occupied by the space is significantly affected by the font. In the inline-block layout, it will cause some minor damages, and it is an indispensable element in the alignment layout at both ends.

& ensp;: This space has a very robust feature, that is, itThe occupied width is exactly 1/2 Chinese characters.And is basically not affected by the font.

& emsp;: This space also has a very stable feature, that isIt occupies exactly one Chinese width.And is basically not affected by the font.

2. Application scenarios

For   and   can be used in some Chinese layout alignment, the following HTML code:

<ul>
< Li class = "Li" > last name &amp; emsp; &amp; emsp; first name: < input type = "text" / ></li>
< Li class = "Li" > Hand &amp; ENSP; machine &amp; ENSP; number: < input type = "text" / ></li>
< class = "Li" > email: < text / ></li>
</ul>

Implementation results:

It is worth noting that the Chinese Alignment Method of the preceding blank characters is not fully compatible with ie6. (Who is still compatible with IE6, so it is very useful .)

3. New Space members & # x3000

In most editors, spaces are transparent drops, which are easily deleted. In addition, spaces are also deleted during HTML compression, so you need to convert the writing format.

On the web page, there are generally three types of writing:

• For example, enter “Copyright “-©.
• Web characters,©
• CharCode:©

And the above , Is a web character with a specific name. However, I am not sure whether the spaces in the fullwidth correspond to each other.& + KeywordsSo, use the tool to convert it to the charCode character representation, that is,　

•  → 
•  → 

Character usage tips:

1. Use the character output in HTML&#xWith the charCode value;
2. In JavaScript files to prevent escape by garbled characters\uWith the charCode value;
3. In a CSS file, such as a CSS pseudo elementcontentAttribute, directly use\With the charCode value.

Therefore, I want to refer to the “I” Chinese Characters in HTML, JS, and CSS:

• 我
• \u6211, Suchconsole.log(‘\u6211’);
• \6211, Such.xxx:before { content: ‘\6211’; }

Considering direct　 This form is exposed in HTML and may be read by the screen reader and other auxiliary devices, thus affecting the normal reading flow. Therefore, we can further optimize the use of tags and use pseudo elements, such:

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

Html code:

<ul>
<li class="li">22995;<span class="full"></span><span class="full"></span>input type="text" /></li>
<li class="li">span class="half"></span>span class="half"></span>21495;input type="text" /></li>
<li class="li">
</ul>

CSS code:

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

The runtimeStyle object attribute is used above, which is exclusive to IE.

The following describes the differences between style, current style, runtimeStyle, and getComputedStyle. the test in IE is as follows.

Html code:

<Div id = "tt" style = "color: blue;"> here is the difference between style, currentStyle, and runtimeStyle. </div>

Js Code:

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

Note:

Obj. style: This method can only be used by JS to obtain values written in the style attribute in HTML tags (style = “…”), The attribute defined in <style type = “text/css”> cannot be obtained.

In IE, the obj. current style method is used, while FF uses the getComputedStyle method.

“DOM2 style” enhances the document. defaultView and provides the getComputedStyle () method. This method accepts two parameters: the element to obtain the calculated style and a pseudo element string (for example, “: after “). If the pseudo element information is not required, the second parameter can be null. The getComputerStyle () method returns a CSSStyleDeclaration object containing all the calculated styles of the current element.

Its syntax is:Document. defaultView. getComputedStyle (‘elemental ‘, ‘pseudo class ‘)Internet Explorer 9 and later versions support this method. IE8 and earlier versions do not support this method.

Summary:

PassDocument. defaultView. getComputedStyle ()Obtain the background color. Different browsers may return different colors and convert them to RGB format or color values.

IE passedCurrentStyleThe color value obtained by the method does not convert the color to the RGB format.

Original Source:

The html space symbol nbsp; ensp; emsp; introduces and implements Chinese alignment,