20170820案例问题记录

昨晚在开发案例的时候，发现思路并没有偏差，但是对细节把控得不够。此案例是两层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%

讲完。