html空格符

【html空格符】html空格符主要应用场景在web前端开发的时候经常遇上。其实html空格符的意境往往在于开发人员处理html空格符时样式不好看，很难调。我是一个网站开发人员，对html空格符的了解我深有体会，在我以前帮客户开发程序的时候，有一次遇上了一个html空格符的问题，折腾了半天最终也解决不了。我稍后会告诉大家为什么解决不了，其实这并不是什么难题，仅仅只是一个细节而已，那么这个细节主要影响到了什么?我都会举例说明。

我们先来理解下html空格符，然后用例子来结合说明。

有一种场景是这样的，就是我们在仿站的时候，比如首页banner的地方，往往会有导航的超链接，而超链接与超链接之间会有一个竖线，这个是时候会用到html空格，实际上就是在编写代码时，换行的时候，实际上也是一个空格，因此得想办法除去这个空格，不然间隔的竖线看起来就会像是双影一样，很模糊得到不到应有的效果，这个地方的描述可能有一些技术人员听起来就十分的模糊，实际上如果有实战开发经验的coding就知道了。实际上html空格符在一般情况下是指空格 (space)、制表符 (tab)、换行符 (CR/LF) 。

其实如果我们查看一个网页的HTML源码，那么源码中的空白符往往就是我们所谓的空格，哪怕是连续的多个空白，实际上也会被认为是一个，也就是说当出现连续的多个空白符号时会被自动合并成一个了。那么如果逆向思维，我们需要的是多个连续的空白而不是只要一个空白又怎么办呢?有些技术人员一下子就想到了，我们使用原样输出的命令

标签就好了。实际上除了这个方法，也可以用css来控制的，所以经我们制作网页的时候，都会说需要的是DIV+CSS的，而不需要table表格的，也是证明在web2.0中CSS+DIV显得尤为重要。实际上在CSS中对于空白来说最重要的就是white-space 这个属性了：

normal默认。空白会被浏览器忽略。

pre空白会被浏览器保留。其行为方式类似 HTML 中的标签。

nowrap文本不会换行，文本会在在同一行上继续，直到遇到标签为止。

pre-wrap保留空白符序列，但是正常地进行换行。

pre-line合并空白符序列，但是保留换行符。

inherit规定应该从父元素继承 white-space 属性的值。

注释：任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。所有浏览器都支持 white-space 属性。在使用的时候要注意各浏览器的CSS hack。

那么我们又回到文章前面，如果说遇上html空格符影响了css样式的时候，如果你实在无法解决的话，你可以做一个小图片，那小图片是一个竖线的样子，这样的话就可以在导航与导航之间合适的位置放置这个图片即可。所以解决问题的方法是多种多样的，对于html空格符灵活运用即可，该合并时要会合并，而不需要合并时则随机应变即可。