这个世界上很多东西看似都是“多余”的，但我们又听说过“书到用时方恨少”，css也是一样，我想很多前端工程师在日常项目中使用到的css属性大多也是非常常规的，比如尺寸、边距、边框、定位等等，而有的属性却很少用到，当然这里要说的列表属性列表属性也是如此。

在HTML中，我们通常认为有三种列表标签，即ol、ul、dl。我们经常用到的当然是ul，其次就是dl，而有序列表ol几乎很少用到。最近在写一个文章内页样式，因为需求需要就需要用到了ol有序列表，结果发现一个小小的细节，让我意识到不太常用的属性我们应该也值得去注意，当然我自己这次做这个项目前就已经了解接下来我要说的（当然css有一些比较不常用的属性可能我自身也很少用到甚至从来没用到）。

以上就是一个默认状态下（我们不定义ol的属性时），我们会发现两个问题，当然不能称之为错误，因为这样的样式就不能说不行，只是我觉得可能有的人会觉得别扭，特别是应用到我们中文列表中（也许有的属性本身就为英文而生，而考虑到其他情况于是诞生了更多属性吧，哈哈）。

1、序列都“跑”到模盒的外面去了，当然我可以用边距进行调整；

2、到序列位数不一致时就会出现“左不对齐”，而我们习惯的是“左对齐”，这点在我想到列表属性前，我没想到其他的CSS属性，也许有更好的吧。

这里我用的是list-style-position: inside；不看参考手册，我们大概就能从字面上理解就是一个关于列表序号风格的位置属性，而我选择的属性值大概就是处于“模盒内部”的。至于是不是这样，我们就来对照参考手册解释下几个常见列表属性。

1、list-style

这个属性其实跟background属性一样，我自己通俗理解为“总属性”，也就是个综合属性，同类的还有border、font等等。因此list-style-type、list-style-position、list-style-image可以说是它的组成部分。也就是它是在一个声明中设置所有的列表属性，至于到底是什么，在下面分别讲下面的属性就知道了。其实它的写法就是下面三种属性值的组合，而且是没有先后顺序的。

ol { list-style:square inside url('img.gif'); }

这个代码其实跟下面的代码一样的效果

ol {
list-style-type:square;
list-style-position:inside;
list-style-image:url('img.gif');
}

2、list-style-type

这个属性就是指列表序号的类型，常用的属性值有none（无标记）、 disc（ 默认，实心圆）、 circle（ 空心圆）、square（ 实心方块）、 decimal （数字），当然还有更多属性值，具体可以参考参考手册。

ul.circle {list-style-type:circle;}
ul.square {list-style-type:square;}

3、list-style-image

这个属性用于定义列表序号的前面的图片，而它的值一般只有三个，none(没有)、url（图片地址）、inherit（继承父级）。语法跟上述类似。

4、list-style-position

这个属性相对于前面的用的不是特别多，因为我们本身ol标签就用得不是特别多，就如前面所说它是用于设置列表项标记的放置位置。常用的属性值有inside（内部）、outside（左侧，默认值）、inherit（继承父级）。

就如前面所说，实际上我们日常是比较少用到这些属性的，因为我们很多时候一用到列表可能直接就是list-style:none，相当于禁用列表属性的默认值，然后通过其他的方式来做。但我相信，知道多一些总会更好，更何况有时候确实用得着的。