這個(gè)世界上很多東西看似都是“多余”的，但我們又聽說(shuō)過(guò)“書到用時(shí)方恨少”，css也是一樣，我想很多前端工程師在日常項(xiàng)目中使用到的css屬性大多也是非常常規(guī)的，比如尺寸、邊距、邊框、定位等等，而有的屬性卻很少用到，當(dāng)然這里要說(shuō)的列表屬性列表屬性也是如此。

在HTML中，我們通常認(rèn)為有三種列表標(biāo)簽，即ol、ul、dl。我們經(jīng)常用到的當(dāng)然是ul，其次就是dl，而有序列表ol幾乎很少用到。最近在寫一個(gè)文章內(nèi)頁(yè)樣式，因?yàn)樾枨笮枰托枰玫搅薿l有序列表，結(jié)果發(fā)現(xiàn)一個(gè)小小的細(xì)節(jié)，讓我意識(shí)到不太常用的屬性我們應(yīng)該也值得去注意，當(dāng)然我自己這次做這個(gè)項(xiàng)目前就已經(jīng)了解接下來(lái)我要說(shuō)的（當(dāng)然css有一些比較不常用的屬性可能我自身也很少用到甚至從來(lái)沒(méi)用到）。

以上就是一個(gè)默認(rèn)狀態(tài)下（我們不定義ol的屬性時(shí)），我們會(huì)發(fā)現(xiàn)兩個(gè)問(wèn)題，當(dāng)然不能稱之為錯(cuò)誤，因?yàn)檫@樣的樣式就不能說(shuō)不行，只是我覺得可能有的人會(huì)覺得別扭，特別是應(yīng)用到我們中文列表中（也許有的屬性本身就為英文而生，而考慮到其他情況于是誕生了更多屬性吧，哈哈）。

1、序列都“跑”到模盒的外面去了，當(dāng)然我可以用邊距進(jìn)行調(diào)整；

2、到序列位數(shù)不一致時(shí)就會(huì)出現(xiàn)“左不對(duì)齊”，而我們習(xí)慣的是“左對(duì)齊”，這點(diǎn)在我想到列表屬性前，我沒(méi)想到其他的CSS屬性，也許有更好的吧。

這里我用的是list-style-position: inside；不看參考手冊(cè)，我們大概就能從字面上理解就是一個(gè)關(guān)于列表序號(hào)風(fēng)格的位置屬性，而我選擇的屬性值大概就是處于“模盒內(nèi)部”的。至于是不是這樣，我們就來(lái)對(duì)照參考手冊(cè)解釋下幾個(gè)常見列表屬性。

1、list-style

這個(gè)屬性其實(shí)跟background屬性一樣，我自己通俗理解為“總屬性”，也就是個(gè)綜合屬性，同類的還有border、font等等。因此list-style-type、list-style-position、list-style-image可以說(shuō)是它的組成部分。也就是它是在一個(gè)聲明中設(shè)置所有的列表屬性，至于到底是什么，在下面分別講下面的屬性就知道了。其實(shí)它的寫法就是下面三種屬性值的組合，而且是沒(méi)有先后順序的。

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

這個(gè)代碼其實(shí)跟下面的代碼一樣的效果

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

2、list-style-type

這個(gè)屬性就是指列表序號(hào)的類型，常用的屬性值有none（無(wú)標(biāo)記）、 disc（ 默認(rèn)，實(shí)心圓）、 circle（ 空心圓）、square（ 實(shí)心方塊）、 decimal （數(shù)字），當(dāng)然還有更多屬性值，具體可以參考參考手冊(cè)。

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

3、list-style-image

這個(gè)屬性用于定義列表序號(hào)的前面的圖片，而它的值一般只有三個(gè)，none(沒(méi)有)、url（圖片地址）、inherit（繼承父級(jí)）。語(yǔ)法跟上述類似。

4、list-style-position

這個(gè)屬性相對(duì)于前面的用的不是特別多，因?yàn)槲覀儽旧韔l標(biāo)簽就用得不是特別多，就如前面所說(shuō)它是用于設(shè)置列表項(xiàng)標(biāo)記的放置位置。常用的屬性值有inside（內(nèi)部）、outside（左側(cè)，默認(rèn)值）、inherit（繼承父級(jí)）。

就如前面所說(shuō)，實(shí)際上我們?nèi)粘Ｊ潜容^少用到這些屬性的，因?yàn)槲覀兒芏鄷r(shí)候一用到列表可能直接就是list-style:none，相當(dāng)于禁用列表屬性的默認(rèn)值，然后通過(guò)其他的方式來(lái)做。但我相信，知道多一些總會(huì)更好，更何況有時(shí)候確實(shí)用得著的。