數(shù)科干貨
前端淺談-常見布局介紹
前端
前端，通俗點來講，主要是指用戶在瀏覽器上瀏覽的網(wǎng)頁。而前端開發(fā)，就是設計并實現(xiàn)這個網(wǎng)頁界面的過程。在這一過程中，頁面上的每個區(qū)域都可以看作是元素。
我們平時上網(wǎng)沖浪，經(jīng)常會接觸到不同的網(wǎng)頁，但其實一個網(wǎng)頁頁面的展示可以是多種多樣，每一個頁面都有其獨特的布局風格。頁面布局對于前端開發(fā)是必不可少的一個環(huán)節(jié)，而布局方式也有很多，比如靜態(tài)布局、彈性布局、浮動布局、定位布局等。接下來由我向大家介紹幾種常見的布局。
靜態(tài)布局
靜態(tài)布局，是傳統(tǒng)的網(wǎng)頁設計布局網(wǎng)頁布局有哪幾種，就好比拼圖，從下往上，從左往右，依次放置。這種布局中的元素往往是固定的，看起來比較直觀，但同時也缺乏靈活性。分辨率不同的電腦得到的顯示效果也各不相同。在現(xiàn)在的絕大多數(shù)系統(tǒng)中，開發(fā)者一般會采用更為靈活的布局方式。
彈性布局
彈性布局，是指將頁面的一部分區(qū)域當作一個容器，容器內(nèi)的元素自動有序排列。這種布局方式最大地特點就是可以自動擴展和收縮容器成員，最大限度地填充可用空間。以我們集團OA系統(tǒng)的個人門戶模塊為例，其中個人數(shù)據(jù)版塊（如下圖所示）就可以看作是一個容器，容器內(nèi)橫向排列了三個元素（待辦事宜和我的會議、協(xié)作、我的文檔和我的日程），三個元素之間所占空間比例是1:1:1的，彈性布局可以設置每個元素的比例值，從而改變元素的空間大小。當容器內(nèi)存在多余的空間時，還可以把多余的空間劃分給各個元素網(wǎng)頁布局有哪幾種，實現(xiàn)對空間的最大利用。
浮動布局
浮動布局，它的特點是可以使兩個原本各自獨占一行的元素并排顯示。以集團門戶為例，其中有很多地方都用到了浮動布局：比如藍色頂部欄內(nèi)的鬧鈴圖標，它沒有像其它元素從左到右依次排列，而是位于最右側(cè)，這是因為它具有右浮動屬性；再比如流程中心和我的郵件這兩個模塊，也都設置了浮動屬性，因為正常情況下這兩個模塊是上下排列，通過添加左浮動屬性，從而實現(xiàn)從左側(cè)開始依次排列。除此之外，還可以通過內(nèi)外間距的控制，使元素之間分布有序，不會擠在一起。
以上介紹了前端三種常見布局方式，除此之外還有其他一些各具風格和特色的布局方式，可用于特定的應用場景。正是這些不同特點的布局匯聚在一起，組成了現(xiàn)在PC、手機、手持設備等多姿多彩的頁面。
END