前端自適應佈局方法總結
阿新 • • 發佈:2019-01-30
點選上方藍色字型【學習web前端】可【快速關注】
一欄固定一欄自適應
實現程式碼:
右兩欄固定,中間自適應
方法一 :使用float浮動
自身浮動法的原理就是使用對左右使用分別使用float:left和float:right,float使左右兩個元素脫離文件流,中間元素正常在正常文件流中,使用margin指定左右外邊距對其進行一個定位。
方法二:使用絕對定位
絕對定位法原理是將左右兩邊使用absolute定位,因為絕對定位使其脫離文件流,後面的center會自然流動到他們上面,然後使用margin屬性,留出左右元素的寬度,既可以使中間元素自適應螢幕寬度。
方法三:使用負margin(聖盃佈局)
聖盃佈局的原理是margin負值法。使用聖盃佈局首先需要在center元素外部包含一個div,包含div需要設定float屬性使其形成一個BFC,並設定寬度,並且這個寬度要和left塊的margin負值進行配合,具體原理參考這裡。這裡對聖盃佈局解釋特別詳細。
方法四:使用flex(css3新特性)
宣告 | 文章著作權歸作者所有,如有侵權,請聯絡小編刪除。
如果大家對特效或者小遊戲開發學習感興趣的話,可以加入小編學習交流QQ群(462411750),點選【閱讀原文】即可加入.每晚8點我都會在公開講座上免費為大家分享一些特效及小遊戲開發案例。帶你從零開始,學習製作特效或小遊戲。讓我們相互陪伴,共同成長!
猜你喜歡的文章點選“閱讀原文”即可加入免費學習做遊戲/專案。