ul li 中的type属性

    disc : CSS1 默认值。实心圆
    circle : CSS1 空心圆
    square : CSS1 实心方块
    decimal : CSS1 阿拉伯数字
    lower-roman : CSS1 小写罗马数字
    upper-roman : CSS1 大写罗马数字
    lower-alpha : CSS1 小写英文字母
    upper-alpha : CSS1 大写英文字母
    none : CSS1 不使用项目符号
    armenianl : CSS2 未支持。传统的亚美尼亚数字
    cjk-ideographic : CSS2 未支持。浅白的表意数字
    georgian : CSS2 未支持。传统的乔治数字
    lower-greek : CSS2 未支持。基本的希腊小写字母
    hebrew : CSS2 未支持。传统的希伯莱数字
    hiragana : CSS2 未支持。日文平假名字符
    hiragana-iroha : CSS2 未支持。日文平假名序号
    katakana : CSS2 未支持。日文片假名字符
    katakana-iroha : CSS2 未支持。日文片假名序号
    lower-latin : CSS2 未支持。小写拉丁字母
    upper-latin : CSS2 未支持。大写拉丁字母

默认为实心小圆点（disc），并且圆点不跟随文字，保存在文字以外

<ul>
    <li>不跟随文字</li>
    <li>呀，不跟随文字</li>
    <li>呀呀，不跟随文字</li>
</ul>

如上图，默认ul有个padding-left:40px;小圆点并不跟随文字，而是在ul的padding中

此时，我们再来看看，如果我们都把默认边距去掉，会发生什么呢？

ul,li{
            margin: 0px;
            padding: 0;
        }

哎呦，奇怪了，我们只是把边距去掉了，为什么我的样式也不见了，其实这个也很好解释，因为我们的样式是不跟随文字的，因此，当我们把边距都去掉，那么这个样式就会被一直往左边挤，而左边又没有足够的空间来放这个样式，它就被挤出了body这个块，这个就类似于我们的内容移除，text-indent:-500px;

我们来测试一下，当我们给ul加个小边距，此时就可以看到这个样式“才露尖尖角”

<style type="text/css">
        ul,li{
            margin: 0px;
            padding: 0;
        }
        .box1{
            margin-left: 6px;
        }
}
<ul class="box1">
    <li>不跟随文字</li>
    <li>呀，不跟随文字</li>
    <li>呀呀，不跟随文字</li>
</ul>

再来测试一次：

定义一个盒子box以及一个ul，ul设置位置与盒子紧挨着,

<head>
    <style type="text/css">
        ul,li{
            margin: 0px;
            padding: 0;
        }
        .boss{
            height:  110px;
            width: 300px;
            margin: 0 auto;
            background: #cccccc;
            position: relative;
        }
        .box1{
            position: absolute;
            left: 100px;
            top: 5px;
        }
        .box{
            height: 100px;
            width: 100px;
            background: green;
        }
    </style>
</head>
<body>
<div class="boss">
    <div class="box"></div>
    <ul class="box1">
        <li>不跟随文字</li>
        <li>呀，不跟随文字</li>
        <li>呀呀，不跟随文字</li>
    </ul>
</div>
</body>
</html>

此时我们可以看到，ul与li都不存在边距，只是右边有个盒子，在屏幕内，样式的小圆点出现在左侧的盒子内

总结：

li 的样式不跟随文字，不一定出现在ul 或li 的盒子内，给ul li设置内边距或者外边距，指的是文字与边框的距离，并不是样式与边框的距离。

总结：

猜你喜欢