昨晚在开发案例的时候，发现思路并没有偏差，但是对细节把控得不够。此案例是两层3层div嵌套的。加上盒子内又有许多元素。
1.
忘记在二级div设置好height=auto;auto的作用是使盒子根据元素高度/宽度自动撑开。错误设置为固定高度，从而导致全部内容挤在一个固定的盒子内。
2.
对position有更深刻的理解。在未知盒子最小高度的情况下。可以根据盒子内元素加上盒子影响高度的属性来令到盒子垂直居中。就像昨天
.nav{
height:auto;
width:160px;
position:fixed;
left:0;
top:50%;
margin-top: ;<!--使用外边距将盒子居中-->
}
因为未知子元素对盒子的整体影响，所以上述盒子样式代码margin-top尚未设置。
下面是子元素样式代码，嵌套在.nav内
.nav-li{
height:40px;
width:160px;
}
为了做到精准定位，
(1)先计算盒子整体总高度。
(2)定义好需要定位的百分比。
(2)确定margin。
margin=盒子整体高度✖️需要的百分比+/-盒子整体✖️1/2
3.
像素漏单位不能，该属性无效（连元素都显示不出来）
4.position的top 、left、bottom、right的参照物都是元素本身。譬如，top：50%； 50%指的是元素的百分之五十，可以理解为“相对于顶端，该元素距离顶端的距离为自己高度的50%
讲完。
