昨晚在開發(fā)案例的時候，發(fā)現(xiàn)思路并沒有偏差，但是對細節(jié)把控得不夠。此案例是兩層3層div嵌套的。加上盒子內(nèi)又有許多元素。

1.

忘記在二級div設(shè)置好height=auto;auto的作用是使盒子根據(jù)元素高度/寬度自動撐開。錯誤設(shè)置為固定高度，從而導致全部內(nèi)容擠在一個固定的盒子內(nèi)。

2.

對position有更深刻的理解。在未知盒子最小高度的情況下。可以根據(jù)盒子內(nèi)元素加上盒子影響高度的屬性來令到盒子垂直居中。就像昨天

.nav{

height:auto;

width:160px;

position:fixed;

left:0;

top:50%;

margin-top: ;<!--使用外邊距將盒子居中-->

}

因為未知子元素對盒子的整體影響，所以上述盒子樣式代碼margin-top尚未設(shè)置。

下面是子元素樣式代碼，嵌套在.nav內(nèi)

.nav-li{

height:40px;

width:160px;

}

為了做到精準定位，

(1)先計算盒子整體總高度。

(2)定義好需要定位的百分比。

(2)確定margin。

margin=盒子整體高度??需要的百分比+/-盒子整體??1/2

3.

像素漏單位不能，該屬性無效（連元素都顯示不出來）

4.position的top 、left、bottom、right的參照物都是元素本身。譬如，top：50%；? 50%指的是元素的百分之五十，可以理解為“相對于頂端，該元素距離頂端的距離為自己高度的50%

講完。