HTML中空格的实现方法详解

HTML中空格的实现方法详解

       浏览器总是会截短 HTML页面中的空格。如果在文本中写10个空格，在显示该页面之前，浏览器会删除它们中的9个。如需在页面中增加空格的数量，需要使用 字符实体。即使是一个空格也尽量不要直接在页面中打，因为在大多数编辑器中空格是透明滴，很容易就被删掉；另外，HTML压缩时候，空格很可能被干掉！
1.1 space键直接输入
缺点：
        浏览器在解析 HTML 时，会把连续的空格解析成一个。
1.2 使用HTML中的空格占位符
优点：
        浏览器在解析 HTML 时，写几个空格占位符就占几个空格位。
缺点：
        空格间距非常大时，必须增加多个占位符，导致页面体积变得非常大。
1.2.1常见空格实体介绍
实体名称 简介
  按下space键产生的空格，该空格占据宽度受字体影响明显而强烈。
  等同于字体宽度的一半（如16px字体中就是8px）。其特性：透明；占据的宽
           度正好是1/2个中文宽度；基本不受字体影响。
  等同于一个字体宽度（如16px字体中就是16px）。其特性：透明；占据的宽度
           正好是1个中文宽度；基本不受字体影响。
  占据的宽度比较小。它是em之六分之一宽。
1.2.2常见空格实体编号介绍
    （实体编号）== 普通的英文半角空格
   （实体编号）==  ==  ==no-break space（普通的英文半角空格但不换行）
　（实体编号）== 中文全角空格（一个中文宽度）
  （实体编号）==  == en空格（半个中文宽度）
  （实体编号）==  == em空格（一个中文宽度）
  （实体编号）== 四分之一em空格（四分之一中文宽度）
        相比平时的空格（ ），nbsp拥有不间断（non-breaking）特性。即连续的nbsp会在同一行内显示。即使有100个连续的nbsp，浏览器也不会把它们拆成两行。
1.3实例介绍
实现等宽两端对齐效果：
买 宝 贝：
我的淘宝：
社    区：
方法一：使用空格占位符。
方法二：使用em单位，即1em可认为是一个字符宽度。

<span>买<ins class="half-word"></ins>宝<ins class="half-word"></ins>贝：</span><br>
<span>我的淘宝：</span><br>
<span>社<ins class="two-word"></ins>区：</span>

.half-word{
display: inline-block;
width: 0.5em;
}
.two-word{
display: inline-block;
width: 2em;
}

1.4相关CSS属性
1.4.1 white-space属性
        用于设置文本中空格的处理方式。white-space：pre；时，浏览器会保留文本中的空格和换行。特别适合于在网页中显示程序代码。
例：

<div style="white-space:pre">
int sub(int x,int y){ 
int z; 
if(x&gt;y)z=x-y;
else z = y-x; 
return z; 
}
</div>

说明：使用HTML的<pre>标签也可以达到类似的效果，但<pre>标签有一些不太好的特性，不如使用CSS的white-space属性更方便。
1.4.2 letter-spacing属性
        用于设置文本中字符之间的间隔，它的取值可以是一个带单位的长度值，浏览器会在字和字之间设置指定长度的空白。
例：
<div style="letter-spacing:30px">
欢迎光临！
</div>
说明：若文本中有英文单词，则空白会加在字母之间，而不是单词之间。
1.4.3 word-spacing属性
        用于设置文本中单词之间的间隔，它的取值可以是一个带单位的长度值，浏览器会在单词和单词之间设置指定长度的空白。
例：
<div style="word-spacing:30px">
Happy new year!
</div>
说明：HTML是以空格来区分单词的，它会把单词间的空白按指定长度显示。
1.4.4 text-indent属性
        用于设置首行缩进，它的取值可以是一个带单位的长度值，浏览器会在段落的首行开始处设置指定长度的空白。
例：
<div style="text-indent:2em">
欢迎光临！
</div>
说明：em是一个相对长度单位，2em 表示要缩进两个字的距离。