多个 ul / ol （无序列表/有序列表）的嵌套时的重叠问题

本来觉得写前端页面也不是一天两天，这样的问题应该是小菜一碟，可真正在做项目调格式的时候却突然懵逼了，想了半天才想明白是什么问题（也有可能因为之前已有的 css 总文件并不是我写的，没找到问题的症结）。如果你是一个前端小白，希望你不要踩这样的坑；如果你是一个入门级选手，希望你在做企业级项目的时候会想到这一点~

下面说正题

首先我搭了一个这样的页面框架

<div class="wrapper">
        <ul>
            <li>
                <span>我是第一个ul下的spanspan>
                <ul>
                    <li>我是第一个li下嵌套ul的第一个lili>
                    <li>我是第一个li下嵌套ul的第二个lili>
                    <li>我是第一个li下嵌套ul的第三个lili>
                ul>
            li>
            <li>我是第一个ul下的第二个lili>
            <li>我是第一个ul下的第三个lili>
        ul>
        <ul>
            <li>
                <span>我是第二个ul下的spanspan>
                <ul>
                    <li>我是第二个li下嵌套ul的第一个lili>
                    <li>我是第二个li下嵌套ul的第二个lili>
                    <li>我是第二个li下嵌套ul的第三个lili>
                ul>
            li>
            <li>我是第二个ul下的第二个lili>
            <li>我是第二个ul下的第三个lili>
        ul>
    div>

此时的显示是这样的

当我添加了 css 样式以后（尽可能复现了一下当时的场景）

.wrapper {
    padding: 10px 10px 30px;
    background: #eee;
    overflow: visible;
}

.wrapper li {
    height: 39px;
    line-height: 39px;
    list-style-type: none;
}

然后就出现了当时遇到的问题（代码是我接触的项目的代码，尽可能精简以精确表达自己观点）。

当时的我一头雾水。。。后来突然发现 li 是定高的！！！因为 overflow 设置为 visible 所以超出高度的部分都显示出来了==还需要说明一点啊，line-height 和 height 两者并没有关联关系~~

当我把 height 注释掉以后，列表就达到了自己想要的效果了。

.wrapper {
    padding: 10px 10px 30px;
    background: #eee;
    overflow: visible;
 }

 .wrapper li {
     /*height: 39px;*/
     line-height: 39px;
     list-style-type: none;
 }

附带说一点，line-height 有三种设置方式，一是使用百分比设置行间距，二是使用像素值设置行间距，三是使用数值来设置行间距。

使用百分比设置时，需要注意在大多数浏览器中默认行高大约是 110% 到 120%。这种方法貌似没怎么用过。使用像素值肯定就不用说了，都是写死的像素值，平时用的最多了。第三种方法感觉挺实用，默认行高大约是1，类似于 word 里单倍行距多倍行距的感觉。

好啦总结完了，继续敲代码~