ul为无序列表,list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin
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,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设置内边距或者外边距,指的是文字与边框的距离,并不是样式与边框的距离。