关于背景属性的部分的知识还有很多其他的妙用，比如网页中很多比较多的小标签是如何进行实现的，先看一下演示吧！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span{ display: inline-block; width:18px; height: 20px; background-image: url("http://dig.chouti.con/images/icon_18_118.png?v=2.13"); background-position: 0 -100px; } </style> </head> <body> <span></span> <span></span> </body> </html>
通过使用这个，可以使一个长条图片只显示一部分，然后通过调整background-position: 0 -100px;来调整具体需要显示的是那一部分
然后接着是文本属性，类似于word中的段落
font-size: 10px;
text-align: center; 横向排列
line-height: 200px; 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效
text-indent: 150px; 首行缩进
letter-spacing: 10px;
word-spacing: 20px;
text-transform: capitalize;
没注明的好像已经忘记了，下次用之前可以测试一下，这样可能记得更清楚一些
测试案例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer .item { width: 300px; height: 200px; background-color: chartreuse; display: inline-block; } </style> </head> <body> <div class="outer"> <div class="item" style="vertical-align: top">ll </div> <div class="item"> </div> </div> <script> </script> </body> </html>
然后是图形的边框属性：
border-style: solid;
border-color: chartreuse;
border- 20px; 简写：border: 30px rebeccapurple solid;ul,ol{ list-style: decimal-leading-zero;
list-style: none; <br> list-style: circle; list-style: upper-alpha; list-style: disc; }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a{ display: inline-block; background-color: #2459a2; width: 100px; height: 100px; } </style> </head> <body> <a>111</a> <a>222</a> <a>333</a> </body> </html>
inline-block默认的空格符就是标签与标签之间的空隙造成的。
(1) 我们可以通过margin:-3px来解决，但是
1.我们布局肯定很多元素，不可能每个都添加margin负这样维护成本太大了
2.我们线上代码如果压缩，那么我们就不存在哪个4px的问题了，那么我们的margin负就回造成布局混乱！
(2)我们可以给几个标签加一个父级div，然后：
div{word-spacing: -5px;}
这个东西的引入合理的解决了内联和块级标签各自的固有属性限制，技能像块级标间一样设置长宽，也可以和内联标签一样分享同一行，很多网页选项文头就是这么实现的。
the end