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

The html space symbol nbsp; ensp; emsp; introduces and implements Chinese alignment,
I. 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.

II. Application scenarios

For& Ensp;And& Amp; emsp;You can use the following html code for Chinese typographical alignment:

<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, currentStyle, 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. currentStyle method is used, while FF uses the getComputedStyle method.

"DOM2 style" enhances 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.

For details, see document. defaultView. getComputedStyle () and currentStyle () methods in js to get CSS attribute values.

Reference address:

Small tips: Use & # x3000; and other spaces to achieve minimum cost of Chinese alignment

CSS audio Reference Manual

Common available Characters Related to web pages

Alibaba Cloud Hot Products
Elastic Compute Service (ECS)	Dedicated Host (DDH)	ApsaraDB RDS for MySQL (RDS)	ApsaraDB for PolarDB(PolarDB)	AnalyticDB for PostgreSQL (ADB for PG)
AnalyticDB for MySQL(ADB for MySQL)	Data Transmission Service (DTS)	Server Load Balancer (SLB)	Global Accelerator (GA)	Cloud Enterprise Network (CEN)
Object Storage Service (OSS)	Content Delivery Network (CDN)	Short Message Service (SMS)	Container Service for Kubernetes (ACK)	Data Lake Analytics (DLA)
ApsaraDB for Redis (Redis)	ApsaraDB for MongoDB (MongoDB)	NAT Gateway	VPN Gateway	Cloud Firewall
Anti-DDoS	Web Application Firewall (WAF)	Log Service	DataWorks	MaxCompute
Elastic MapReduce (EMR)	Elasticsearch