什么是圣杯布局

優(yōu)缺點(diǎn)就不說了，看下代碼部分：

我們一直強(qiáng)調(diào)網(wǎng)站制作、網(wǎng)站設(shè)計(jì)對于企業(yè)的重要性,如果您也覺得重要,那么就需要我們慎重對待,選擇一個(gè)安全靠譜的網(wǎng)站建設(shè)公司,企業(yè)網(wǎng)站我們建議是要么不做，要么就做好,讓網(wǎng)站能真正成為企業(yè)發(fā)展過程中的有力推手。專業(yè)網(wǎng)站建設(shè)公司不一定是大公司,成都創(chuàng)新互聯(lián)作為專業(yè)的網(wǎng)絡(luò)公司選擇我們就是放心。

HTML部分

01 div id="content"

02

03 div class="block col-m-s300-e100"

04

05 div class="main-wrap"

06 div class="main"main/div

07 /div

08

09 div class="sub"sub/div

10

11 div class="extra"extra/div

12

13 /div

14

15 div class="block col-s350-m-e200"

16

17 div class="main-wrap"

18 div class="main"main/div

19 /div

20

21 div class="sub"sub/div

22

23 div class="extra"extra/div

24

25 /div

26

27 div class="block col-m-s300"

28

29 div class="main-wrap"

30 div class="main"main/div

31 /div

32

33 div class="sub"sub/div

34

35 /div

36

37 /div

CSS部分

01 .main-wrap, .sub, .extra { float:left;}

02 .main-wrap { width:100%;}

03 .main { background-color:#eef;}

04 .sub { background-color:#fee; }

05 .extra { background-color:#efe;}

06

07 .block { border-bottom:20px dashed #6C0; width:100%; }

08 .block div, .block div .main { height:200px;}

09

10 /* Clearfix

11 ----------------------------------------*/

12 .block:after, .block .main:after, .block .sub:after, .block .extra:after {

13 clear:both;

14 content: '\20';

15 display:block;

16 height:0;

17 }

18 .block, .block .main, .block .sub, .block .extra {

19 zoom:1; /* ie6 */

20 }

21

22 /* The First Block

23 --------------------------------------- */

24

25 .col-m-s300-e100 .main {

26 margin:0 400px 0 0;

27 }

28

29 .col-m-s300-e100 .sub {

30 margin-left:-400px;

31 width:300px;

32 }

33

34 .col-m-s300-e100 .extra {

35 margin-left:-100px;

36 width:100px;

37 }

38

39 /* The Second Block

40 --------------------------------------- */

41

42 .col-s350-m-e200 .main {

43 margin:0 200px 0 350px;

44 }

45

46 .col-s350-m-e200 .sub {

47 margin-left:-100%;

48 width:350px;

49 }

50

51 .col-s350-m-e200 .extra {

52 margin-left:-200px;

53 width:200px;

54 }

55

56 /* The Third Block

57 --------------------------------------- */

58 .col-m-s300 {}

59 .col-m-s300 .main {

60 margin:0 300px 0 0;

61 }

62 .col-m-s300 .sub {

63 margin-left:-300px;

64 width:300px;

65 }

再看看這個(gè)

class="grid-c3-s5e7"

grid代表柵格

column3代表有3個(gè)項(xiàng)目

s代表col-sub中的sub

e代表col-extra中的extra

上面這個(gè)class中的 3 5 7分別指的是三列布局在24欄柵格化分別占到的欄數(shù)。

但事實(shí)是并不是所有站點(diǎn)都適合或使用了柵格化布局，尤其是在多項(xiàng)目快速開發(fā)的過程中，人少活多，面對著大量的頁面，應(yīng)該沒有太多人那么高效率的，配合設(shè)計(jì)師實(shí)施柵格化設(shè)計(jì)布局。

但是這種負(fù)margin值，頁面內(nèi)容部分主次順序分明（main、sub、extra），兼容性好(IE6 zoom:1; 清除浮動，clearfix)，任意列可高出等優(yōu)點(diǎn)。

我們給到它，固定列寬的具體數(shù)值，就可以擺脫刪欄的束縛，隨意使用了（即便是高壓下給到設(shè)計(jì)稿精度不高），我們用這樣的命名來應(yīng)對：

col-m-s300-e100

main列100%;

sub子列300px；

extra附加列100px;

//實(shí)際上m的寬度一般是通過 content 這個(gè)div的寬度來限定的

col-m-s-e

我們通過m s e的從左至右的出現(xiàn)次序來確定網(wǎng)頁中3列的顯示位置，這點(diǎn)從文章開始的圖和對應(yīng)的代碼中可以看出。

給個(gè)最佳啦，好不容易找到的

css中float的前世今生

1，浮動的歷史

在早期網(wǎng)頁制作過程中，為了達(dá)到圖片word文檔那樣的文字環(huán)繞效果，不至于圖片和文字不在一行顯示，圖片占據(jù)一行，文字占據(jù)一行，這樣的樣式并不符合大眾的審美觀，浪費(fèi)空間，所以w3c就創(chuàng)建了float這個(gè)css屬性。

2，浮動的包裹性和破壞性

破壞性是指子級元素設(shè)置浮動后將會跳出父級元素，父級元素將不被浮動元素所撐開，除非清除浮動帶來的影響。

包裹性是指子級元素設(shè)置浮動后，并且父元素已經(jīng)被清除浮動后將會將子元素包裹住，就像inline-block一樣。

4，浮動在布局中的應(yīng)用

(1)，雙飛翼布局

雙飛翼布局就是利用float和margin負(fù)值相結(jié)合的方式，將center定位到最中間，難點(diǎn)在于margin單位百分比的理解。

(2)，圣杯布局

圣杯和雙飛翼區(qū)別：

二者都是三欄自適應(yīng)布局方案，圣杯布局是需要結(jié)合相對定位，用到left屬性，而雙飛翼布局只需要使用浮動和margin定位，前者三欄布局是每欄相互獨(dú)立，而后者是center占據(jù)是100%,left和right是浮在center上的。

(2)，兩列布局

如圖五圖六所示，當(dāng)左側(cè)div左浮動，右側(cè)div將會自動適應(yīng)余下的寬度，當(dāng)界面大小發(fā)生改變時(shí)，右側(cè)div同樣會隨著變化，如果想讓左右div中間有一個(gè)間距的話，我們可以用右側(cè)div設(shè)置一個(gè)margin-left為：左側(cè)div的寬度+間距。

如果想讓左側(cè)右側(cè)同時(shí)自適應(yīng)的話，我們可以讓右側(cè)元素BFC化，此時(shí)左側(cè)元素div的marin-left才會有效，如果右側(cè)div不BFC化的話，屬于正常流，而浮動已經(jīng)脫離正常流，所以此時(shí)它的margin-left是無效的。

5，清除浮動帶來的影響的方法

(1)，使用clear:both

.father:after{/*IE7和IE6不識別*/

content:'';

display:block;

clear:both;

overflow:hidden;

height:0;

}

.father{

*zoom:1;/*兼容IE7*/

}

(2)，內(nèi)部使用空標(biāo)簽

div{clear:both;}

缺點(diǎn)是多了一個(gè)空標(biāo)簽，無意義。

(3)，使用BFC

在子元素中使用overflow,position,inline-block,tabel-cell

(4)，使用table

.father:after{/*IE7和IE6不識別*/

content:'';

display:table;

clear:both;

}

.father{

*zoom:1;/*兼容IE7*/

}

css 有哪些常用的布局 比如圣杯

常用布局：

1.流式布局

2.浮動布局

3.絕對定位布局

4.圣杯布局

CSS3布局方式有哪些？

1.靜態(tài)布局

——最傳統(tǒng)的布局方式，網(wǎng)頁中所有尺寸都是由px作為單位，設(shè)置了min-width,如果寬度小于就會出現(xiàn)滾動條，如果大于這個(gè)寬度則內(nèi)容居中外加背景

實(shí)現(xiàn)方式：PC：居中布局，所有樣式使用絕對寬度/高度(px)，設(shè)計(jì)一個(gè)Layout，在屏幕寬高有調(diào)整時(shí)，使用橫向和豎向的滾動條來查閱被遮掩部分；

移動設(shè)備：另外建立移動網(wǎng)站，單獨(dú)設(shè)計(jì)一個(gè)布局，使用不同的域名如wap.或m.。

優(yōu)點(diǎn)：采用之前的css2的布局·方式，布局簡單，沒有兼容性問題。

缺點(diǎn): 在手機(jī)端不能合理的顯示，移動端不能使用pc端頁面，需要再寫一個(gè)布局來呈現(xiàn)。

實(shí)踐案例：Float 布局、絕對布局

2.自適應(yīng)布局

——可以看成是不同屏幕下由多個(gè)靜態(tài)布局組成的。自適應(yīng)布局是為不同的屏幕分辨率分別定義不同的布局。改變屏幕分辨率可以切換不同的靜態(tài)布局（頁面元素位置可能發(fā)生改變），但在每個(gè)靜態(tài)布局中，頁面元素不隨窗口大小的調(diào)整發(fā)生變化。自適應(yīng)布局頁面里面元素的位置會變化，很好的解決了流式布局中的大屏空間利用率不高弊端。

注：屏幕分辨率變化時(shí)，頁面里面元素的位置會變化而大小不會變化。

3.流失布局（百分比布局 %）

網(wǎng)頁中主要的劃分區(qū)域的尺寸使用百分?jǐn)?shù)（搭配min-*、max-*屬性使用),分別為不同的屏幕設(shè)置布局格式，當(dāng)屏幕大小改變時(shí)，會出現(xiàn)不同的布局，意思就是在這個(gè)屏幕下這個(gè)元素塊在這個(gè)地方，但是在那個(gè)屏幕下，這個(gè)元素塊又會出現(xiàn)在那個(gè)地方。只是布局改變，元素不變。可以看成是不同屏幕下由多個(gè)靜態(tài)布局組成的。

而流式布局的特點(diǎn)是隨著屏幕的改變，頁面的布局沒有發(fā)生大的變化，可以進(jìn)行適配調(diào)整，這個(gè)正好與自適應(yīng)布局相補(bǔ)。使用%百分比定義寬度，高度大都是用px來固定住，可以根據(jù)可視區(qū)域 (viewport) 和父元素的實(shí)時(shí)尺寸進(jìn)行調(diào)整，盡可能的適應(yīng)各種分辨率。往往配合 max-width/min-width 等屬性控制尺寸流動范圍以免過大或者過小影響閱讀。這種布局方式在Web前端開發(fā)的早期歷史上，用來應(yīng)對不同尺寸的PC屏幕（那時(shí)屏幕尺寸的差異不會太大），在當(dāng)今的移動端開發(fā)也是常用布局方式，但缺點(diǎn)明顯：主要的問題是如果屏幕尺度跨度太大，那么在相對其原始設(shè)計(jì)而言過小或過大的屏幕上不能正常顯示。因?yàn)閷挾仁褂?百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕的手機(jī)下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得“流式”

注：屏幕分辨率變化時(shí)，頁面里元素的大小會變化而但布局不變。

主要實(shí)踐案例：左側(cè)固定+右側(cè)自適應(yīng)、左右固定寬度+中間自適應(yīng)、圣杯布局、雙飛翼布局

4.響應(yīng)式布局（媒體查詢）

——通過響應(yīng)式設(shè)計(jì)能使網(wǎng)站在手機(jī)和平板電腦上有更好的瀏覽閱讀體驗(yàn)。屏幕尺寸不一樣展示給用戶的網(wǎng)頁內(nèi)容也不一樣.利用媒體查詢可以檢測到屏幕的尺寸(主要檢測寬度)，并設(shè)置不同的CSS樣式，就可以實(shí)現(xiàn)響應(yīng)式的布局。主要依靠是css的媒體查詢。

注：每個(gè)屏幕分辨率下面會有一個(gè)布局樣式，即元素位置和大小都會變。

5.彈性布局

——rem/em、flex布局

CSS3盒模型圣杯(兩邊固定中間內(nèi)容自適應(yīng))三種布局方案

效果圖

css樣式:

html結(jié)構(gòu):

效果圖

css樣式

html結(jié)構(gòu)

效果圖

css樣式

html結(jié)構(gòu)

css經(jīng)典布局——圣杯布局

圣杯布局 和 雙飛翼布局 一直是前端面試的高頻考點(diǎn)，圣杯布局的出現(xiàn)是來自由 Matthew Levine 在 2006 年寫的一篇文章 《In Search of the Holy Grail》 。 比起雙飛翼布局，它的起源不是源于對頁面的形象表達(dá)。在西方，圣杯是表達(dá)“渴求之物”的意思。而雙飛翼布局則是源于淘寶的UED，可以說是靈感來自于頁面渲染。

原本錄制了一個(gè)小視頻，奈何不能上傳到博客中，視頻中通過縮放頁面可以發(fā)現(xiàn)隨著頁面的寬度的變化，這三欄布局是中間盒子優(yōu)先渲染，兩邊的盒子框子寬度固定不變，即使頁面寬度變小，也不影響我們的瀏覽。 注意：為了安全起見，最好還是給body加一個(gè)最小寬度!

|

|

【1】浮動

【2】flex彈性盒子

【3】grid布局

如上圖所示，我們把body劃分成三行四列的網(wǎng)格，其中有5條列網(wǎng)格線

網(wǎng)站標(biāo)題：css圣杯樣式,html圣杯布局
URL鏈接：http://chinadenli.net/article8/dsgedip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站制作、動態(tài)網(wǎng)站、品牌網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)