在web前端開發(fā)中，存在有很多的布局模式，這些布局模式各有各的優(yōu)勢(shì)，今天咱們就在說(shuō)說(shuō)，前端中的布局方式有哪些

一、Table布局

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

table表格布局結(jié)構(gòu)麻煩，創(chuàng)建一行就需要添加 table - tr - td 三個(gè)標(biāo)簽，這樣寫起來(lái)是很麻煩的

table樣式不好調(diào)整

現(xiàn)在主流的設(shè)計(jì)頁(yè)面以不規(guī)則的網(wǎng)頁(yè)位置，而table表格在布局上有局限，只能在方方正正的頁(yè)面中才能使用

因此現(xiàn)在市面上，基本上沒(méi)有用table表格布局的網(wǎng)頁(yè)了，目前現(xiàn)在還存在的，又一個(gè)叫藍(lán)色理想的網(wǎng)站，使用table表格布局的，大家可以參考一下

二、Div+CSS

div+css是現(xiàn)在都比較常用的布局模式，把div作為一個(gè)盒模型，用css來(lái)做樣式上的調(diào)整。

這種布局模式能夠滿足大多數(shù)網(wǎng)頁(yè)的設(shè)計(jì)，也是現(xiàn)在前端開發(fā)工程師經(jīng)常使用的布局模式；

但是如果想要讓頁(yè)面能夠隨著頁(yè)面的變化而變化就不太能實(shí)現(xiàn)了

三、響應(yīng)式布局

響應(yīng)式布局，說(shuō)白了就是一個(gè)頁(yè)面，能夠適應(yīng)多個(gè)終端（PC，移動(dòng)，平板，手機(jī)的橫豎屏都能正常顯示）

響應(yīng)式布局可以給不同終端的用戶提供更好的用戶體驗(yàn)，而且現(xiàn)在大屏幕的移動(dòng)設(shè)備越來(lái)越多，大家對(duì)響應(yīng)式頁(yè)面的體驗(yàn)也越來(lái)越好。

那響應(yīng)式布局到底怎么做呢？其實(shí)很簡(jiǎn)單，響應(yīng)式其實(shí)就是css3中新增加的一個(gè)知識(shí)點(diǎn)，通過(guò)Media Query（媒介查詢）來(lái)設(shè)置讓頁(yè)面在不同的頁(yè)面都能做到正常適配

這就是一個(gè)比較簡(jiǎn)單的響應(yīng)式頁(yè)面，在屏幕600到799之間的時(shí)候，背景顏色顯示為綠色，內(nèi)容寬度調(diào)整為500px

四、彈性盒子

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

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

所以一般一個(gè)模塊中水平方向上平分顯示的時(shí)候會(huì)經(jīng)常使用到彈性盒子

五、圣杯布局

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

當(dāng)屏幕水平方向上縮放的時(shí)候，左右兩側(cè)的內(nèi)容固定不變，中間內(nèi)容的寬度會(huì)隨著屏幕的變化而變化

在網(wǎng)頁(yè)布局中還有其他的布局模式，當(dāng)然這些布局模式可以疊加選擇，也可以單獨(dú)使用。掌握更多的布局模式，能夠讓我們?cè)谧鲰?yè)面的時(shí)候有更多的選擇，這樣就能更快的作出，適合在不同屏幕都可以適配的頁(yè)面了