Q:視頻中的.main中的float是不是可以去掉呢,因為.ct已經清除浮動了。
A:單純的防止父元素塌陷的話可以不加,然而為了設置三欄式布局,之后需要將aside模塊設置負邊距,使其上移,如果main不設置float的話,aside就無法上移,因為塊級元素都占了一行。
Q:視頻中的第四個樣式:.main .wrap可以刪去main,直接設置wrap吧。
A:經測試刪除后正常。
負邊距在讓元素產生偏移時和position: relative有什么區別?
負邊距的設置像素時是相對自己偏移,按百分比設置偏移時是按照父容器的百分比,并且偏移后原始位置不保留。
如圖,將父容器設置為1000px,main設置為50%,當column1設置負邊距-20%時,移動了200px;所以是根據父容器的寬度設定的。
這里有個小問題,我對.mian添加了相對定位,再讓column1偏移,藍色的方塊會被擋上,請問是為什么呢?
相對定位是相對自己偏移,并且偏移后原始位置保留。
使用負 margin 形成三欄布局有什么條件?
1.三欄放在一個容器中,并且浮動。
2.中間窗體寬度100%,左右固定寬高。
3.兩欄設置負邊距。
圣杯布局的原理是怎樣的? 簡述實現圣杯布局的步驟
1.父容器內設置三個浮動div,注意使用偽類清除浮動。
2.其中第一個主模塊寬度設置為100%,其他兩個寬度自定義。
3.父容器設置左右內邊距,寬度為兩邊欄寬度。
4.左邊欄設置margin-left:100%,右邊欄設置margin-left:-寬度。
5.兩邊欄設置相對定位,分別左右移動自己寬度大小。
雙飛翼布局的原理? 實現步驟?
1.父容器設置三個浮動div,第一個主盒子需增加一個div,注意使用偽類清除浮動
2.主盒子寬度100%,左右兩邊盒子寬高自定
3.左邊的設置margin-left:-100%,右邊的設置為margin-right:自己的寬度
4.為主盒子的子div設置左右外邊距,大于左右兩邊盒子的寬度