<style> .test p{margin:15px 0;border:1px solid #000;} .xx-small p{font-size:xx-small;} .x-small p{font-size:x-small;} .small p{font-size:small;} .medium p{font-size:medium;} .large p{font-size:large;} .x-large p{font-size:x-large;} .xx-large p{font-size:xx-large;} .smaller p{font-size:smaller;} .larger p{font-size:larger;} .float p{font-size:20px;} .percentage{font-size:20px;} .percentage span{font-size:60%;} </style>
<ul class="test"> <li class="xx-small"> <strong>尺寸大小为xx-small:</strong> <p>xx-small尺寸的文字。</p> </li> <li class="x-small"> <strong>尺寸大小为x-small:</strong> <p>x-small尺寸的文字。</p> </li> <li class="small"> <strong>尺寸大小为small:</strong> <p>small尺寸的文字。</p> </li> <li class="medium"> <strong>尺寸大小为medium:</strong> <p>medium尺寸的文字。</p> </li> <li class="large"> <strong>尺寸大小为large:</strong> <p>large尺寸的文字。</p> </li> <li class="x-large"> <strong>尺寸大小为x-large:</strong> <p>x-large尺寸的文字。</p> </li> <li class="xx-large"> <strong>尺寸大小为xx-large:</strong> <p>xx-large尺寸的文字。</p> </li> <li class="samller"> <strong>尺寸大小为samller:</strong> <p>samller尺寸的文字。</p> </li> <li class="larger"> <strong>尺寸大小为larger:</strong> <p>larger尺寸的文字。</p> </li> <li class="float"> <strong>尺寸大小为20px:</strong> <p>20px尺寸的文字。</p> </li> <li class="percentage"> <strong>尺寸大小为20px:</strong> <p>父对象20px尺寸的文字。<span>我的尺寸只是父对象的60%</span></p> </li> </ul>