在web前端開發中，存在有很多的布局模式，這些布局模式各有各的優勢，今天咱們就在說說，前端中的布局方式有哪些

一、Table布局

首先是table布局，table布局是一種非常古老的布局模式，很早之前都是使用table布局的，并且在之前在Dreamweaver甚至可以直接生成table布局的頁面，可想而知，在很早以前，table表格也是非常受歡迎的一種布局模式。那為什么現在不再使用了呢？

table表格布局結構麻煩，創建一行就需要添加 table - tr - td 三個標簽，這樣寫起來是很麻煩的

table樣式不好調整

現在主流的設計頁面以不規則的網頁位置，而table表格在布局上有局限，只能在方方正正的頁面中才能使用

因此現在市面上，基本上沒有用table表格布局的網頁了，目前現在還存在的，又一個叫藍色理想的網站，使用table表格布局的，大家可以參考一下

二、Div+CSS

div+css是現在都比較常用的布局模式，把div作為一個盒模型，用css來做樣式上的調整。

這種布局模式能夠滿足大多數網頁的設計，也是現在前端開發工程師經常使用的布局模式；

但是如果想要讓頁面能夠隨著頁面的變化而變化就不太能實現了

三、響應式布局

響應式布局，說白了就是一個頁面，能夠適應多個終端（PC，移動，平板，手機的橫豎屏都能正常顯示）

響應式布局可以給不同終端的用戶提供更好的用戶體驗，而且現在大屏幕的移動設備越來越多，大家對響應式頁面的體驗也越來越好。

那響應式布局到底怎么做呢？其實很簡單，響應式其實就是css3中新增加的一個知識點，通過Media Query（媒介查詢）來設置讓頁面在不同的頁面都能做到正常適配

這就是一個比較簡單的響應式頁面，在屏幕600到799之間的時候，背景顏色顯示為綠色，內容寬度調整為500px

四、彈性盒子

彈性盒子也是css3中新增加的一種布局模式。

彈性盒子也是一種為了適配不同屏幕的一種布局模式，但是彈性盒子主要是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。

所以一般一個模塊中水平方向上平分顯示的時候會經常使用到彈性盒子

五、圣杯布局

圣杯布局也叫雙飛翼布局，就是兩邊定寬，中間自適應的三欄布局，中間欄要放在文檔流前面以優先渲染

當屏幕水平方向上縮放的時候，左右兩側的內容固定不變，中間內容的寬度會隨著屏幕的變化而變化

在網頁布局中還有其他的布局模式，當然這些布局模式可以疊加選擇，也可以單獨使用。掌握更多的布局模式，能夠讓我們在做頁面的時候有更多的選擇，這樣就能更快的作出，適合在不同屏幕都可以適配的頁面了