Q:視頻中的.main中的float是不是可以去掉呢,因?yàn)?ct已經(jīng)清除浮動(dòng)了汰聋。
A:?jiǎn)渭兊姆乐垢冈厮莸脑捒梢圆患泳ィ欢鵀榱嗽O(shè)置三欄式布局,之后需要將aside模塊設(shè)置負(fù)邊距山宾,使其上移,如果main不設(shè)置float的話鳍徽,aside就無法上移资锰,因?yàn)閴K級(jí)元素都占了一行。
Q:視頻中的第四個(gè)樣式:.main .wrap可以刪去main阶祭,直接設(shè)置wrap吧绷杜。
A:經(jīng)測(cè)試刪除后正常。
負(fù)邊距在讓元素產(chǎn)生偏移時(shí)和position: relative有什么區(qū)別?
負(fù)邊距的設(shè)置像素時(shí)是相對(duì)自己偏移濒募,按百分比設(shè)置偏移時(shí)是按照父容器的百分比鞭盟,并且偏移后原始位置不保留。
如圖瑰剃,將父容器設(shè)置為1000px齿诉,main設(shè)置為50%,當(dāng)column1設(shè)置負(fù)邊距-20%時(shí),移動(dòng)了200px粤剧;所以是根據(jù)父容器的寬度設(shè)定的歇竟。
這里有個(gè)小問題,我對(duì).mian添加了相對(duì)定位抵恋,再讓column1偏移焕议,藍(lán)色的方塊會(huì)被擋上,請(qǐng)問是為什么呢弧关?
相對(duì)定位是相對(duì)自己偏移盅安,并且偏移后原始位置保留。
使用負(fù) margin 形成三欄布局有什么條件?
1.三欄放在一個(gè)容器中世囊,并且浮動(dòng)宽堆。
2.中間窗體寬度100%,左右固定寬高茸习。
3.兩欄設(shè)置負(fù)邊距。
圣杯布局的原理是怎樣的? 簡(jiǎn)述實(shí)現(xiàn)圣杯布局的步驟
1.父容器內(nèi)設(shè)置三個(gè)浮動(dòng)div壁肋,注意使用偽類清除浮動(dòng)号胚。
2.其中第一個(gè)主模塊寬度設(shè)置為100%,其他兩個(gè)寬度自定義浸遗。
3.父容器設(shè)置左右內(nèi)邊距猫胁,寬度為兩邊欄寬度。
4.左邊欄設(shè)置margin-left:100%跛锌,右邊欄設(shè)置margin-left:-寬度弃秆。
5.兩邊欄設(shè)置相對(duì)定位,分別左右移動(dòng)自己寬度大小髓帽。
雙飛翼布局的原理? 實(shí)現(xiàn)步驟?
1.父容器設(shè)置三個(gè)浮動(dòng)div菠赚,第一個(gè)主盒子需增加一個(gè)div,注意使用偽類清除浮動(dòng)
2.主盒子寬度100%,左右兩邊盒子寬高自定
3.左邊的設(shè)置margin-left:-100%,右邊的設(shè)置為margin-right:自己的寬度
4.為主盒子的子div設(shè)置左右外邊距郑藏,大于左右兩邊盒子的寬度