空白符对HTML结构的影响与解决方案
2018-06-24 01:34:36来源:未知 阅读 ()
何为空白符?
空白符: 空格、制表符、换行符
注意:浏览器在解析HTML时会把所有空白符合并成一个空格
空白符对HTML结构的影响
HTML5中<textarea>标签placeholder无法正确显示
不好的结构造成意外的结果:
标签换行了:
1 <!--文本域结束标签 换行导致placeholder无法正确表示--> 2 <textarea id="description" name="description" rows="5" cols="30" wrap="physical" placeholder="这是一个多行输入框,输入您的个人描述">
</textarea>
标签之间有空格:
1 <!--文本域标签之间有空格,导致placeholder无法正确表示--> 2 <textarea id="description" name="description" rows="5" cols="30" wrap="physical" placeholder="这是一个多行输入框,输入您的个人描述"> </textarea>
结果:一片空白
原因:因为表单区域中包含了空白符(空格、制表符、换行符),textarea内的空白符被认为是内容,阻止了占位符文本的显示。
正确的操作:
1 <!--文本域开始标签与结束标签紧挨着,placeholder正确表示--> 2 <textarea id="description" name="description" rows="5" cols="30" wrap="physical" placeholder="这是一个多行输入框,输入您的个人描述"></textarea>
结果:占位了!!!
inline-block的默认空白间距
默认情况下,inline-block元素之间大约有“4px”的间距(不同浏览器会有不同的大小)。
1 <ul> 2 <li>item1</li> 3 <li>item2</li> 4 <li>item3</li> 5 <li>item4</li> 6 <li>item5</li> 7 </ul>
1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 ul { 6 list-style: none outside none; 7 padding: 10px; 8 background: green; 9 text-align: center; 10 } 11 ul li { 12 display: inline-block; 13 *display: inline; 14 zoom: 1; 15 background: orange; 16 padding: 5px; 17 }
- 原因:标签之间的空白符造成的。
- 解决:此时可以通过改变HTML的结构,让上一个li的结束标签与下一个li开始相连,去除空白符。
1 <ul> 2 <li>item1</li 3 ><li>item2</li 4 ><li>item3</li 5 ><li>item4</li 6 ><li>item5</li> 7 </ul>
你可以点击这里狠狠尝试demo
当然,空白符也是字符,去除它们也可以通过CSS样式letter-spacing、word-spacing来设定。详情见:如何解决inline-block元素的空白间距
除了相邻之间的Inline-block的空白间距外,像下面这种情况,也会产生空白符
<div class="container"> <img class="img" src="images/mod.jpg" alt=""> </div>
.container {
background: #fc0d0d;
}
.img {
display: inline-block; width: 100%; }
- 结果:容器没有显式设置高度与宽度,但是总会比它的子元素img高出几个像素(图中小熊头像下面的红色部分)
- 解决:把img的display设为block或者上面介绍的方法去除空白符的影响。
存在于文本中的空白符
如下面的换行符,和空格。
<div>They can stay 72-hours within the Shandong province after they have entered China via the Qingdao International Airport.</div>
结果:浏览器解析的时候只保留单词之间的空白符被合并为一个空格。
They can stay 72-hours within the Shandong province after they have entered China via the Qingdao International Airport.
可以通过CSS属性white-space对文本中的空白符进行处理
white-space:normal | pre | nowrap | pre-wrap | pre-line | inherit
normal: 合并空白符,允许自动换行
nowrap: 合并空白符,不允许自动换行
pre-line: 合并空白符(不包括换行符),允许自动换行
pre: 不合并空白符,不允许自动换行
pre-wrap: 不合并空白符,允许自动换行(在pre基础上,保留自动换行)
详情见:demo
补充一点:CSS3新增了两个换行属性word-wrap和word-break。
长文本段落换行:
在Firefox则没有 问题,我尝试用white-spacing属性合并空白符,但是还有有一个空格,如果存在换行的话。
我看了别人的网站,它这里也存在换行了,但是浏览器没有解析它的空格,也没有看到它的代码里有对p作特殊的处理。
所以只能像前面一样改变HTML结构,去除它的空格。但是把所有文本放在一行,得铺在美国去。。。
解决方案:WebStorm可以设置自动换行——File-setting-Editor-General-Soft wrap(勾选Use soft wrap in editor),虽然视觉上是换行,浏览器解析的时候是按同一行文本解析的,所以不会在浏览器上产生空格。
总结
- 一般把元素设为inline-block是为了与其他元素在同一行排列,又或是为了能够应用text-align这样的属性,如果没这些必要,又想要对元素显式设置宽高,就
直接设置display: block。
- 那什么时候适合用inline-block呢?
- float元素脱离了文档流,会对其周围的元素造成影响,而inline-block不会有这些问题。
- 想要通过设置父容器text-align:center让元素居中,这显然用浮动无法做到
- 使元素垂直居中,inline-block元素是沿着默认的基线对齐,可以通过vertical属性设置这个默认基线。
参考资料
- MDN:white-space
- 小火柴的蓝色理想:深入理解CSS中的空白符和换行
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:Bootstrap进度条
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- HTML骨架 2020-06-10
- HTML基础教程_1 2020-06-09
- HTML基础02 2020-06-09
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash