css圣杯样式,html圣杯布局

什么是圣杯布局

优缺点就不说了，看下代码部分：

我们一直强调网站制作、网站设计对于企业的重要性,如果您也觉得重要,那么就需要我们慎重对待,选择一个安全靠谱的网站建设公司,企业网站我们建议是要么不做，要么就做好,让网站能真正成为企业发展过程中的有力推手。专业网站建设公司不一定是大公司,成都创新互联作为专业的网络公司选择我们就是放心。

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 }

再看看这个

class="grid-c3-s5e7"

grid代表栅格

column3代表有3个项目

s代表col-sub中的sub

e代表col-extra中的extra

上面这个class中的 3 5 7分别指的是三列布局在24栏栅格化分别占到的栏数。

但事实是并不是所有站点都适合或使用了栅格化布局，尤其是在多项目快速开发的过程中，人少活多，面对着大量的页面，应该没有太多人那么高效率的，配合设计师实施栅格化设计布局。

但是这种负margin值，页面内容部分主次顺序分明（main、sub、extra），兼容性好(IE6 zoom:1; 清除浮动，clearfix)，任意列可高出等优点。

我们给到它，固定列宽的具体数值，就可以摆脱删栏的束缚，随意使用了（即便是高压下给到设计稿精度不高），我们用这样的命名来应对：

col-m-s300-e100

main列100%;

sub子列300px；

extra附加列100px;

//实际上m的宽度一般是通过 content 这个div的宽度来限定的

col-m-s-e

我们通过m s e的从左至右的出现次序来确定网页中3列的显示位置，这点从文章开始的图和对应的代码中可以看出。

给个最佳啦，好不容易找到的

css中float的前世今生

1，浮动的历史

在早期网页制作过程中，为了达到图片word文档那样的文字环绕效果，不至于图片和文字不在一行显示，图片占据一行，文字占据一行，这样的样式并不符合大众的审美观，浪费空间，所以w3c就创建了float这个css属性。

2，浮动的包裹性和破坏性

破坏性是指子级元素设置浮动后将会跳出父级元素，父级元素将不被浮动元素所撑开，除非清除浮动带来的影响。

包裹性是指子级元素设置浮动后，并且父元素已经被清除浮动后将会将子元素包裹住，就像inline-block一样。

4，浮动在布局中的应用

(1)，双飞翼布局

双飞翼布局就是利用float和margin负值相结合的方式，将center定位到最中间，难点在于margin单位百分比的理解。

(2)，圣杯布局

圣杯和双飞翼区别：

二者都是三栏自适应布局方案，圣杯布局是需要结合相对定位，用到left属性，而双飞翼布局只需要使用浮动和margin定位，前者三栏布局是每栏相互独立，而后者是center占据是100%,left和right是浮在center上的。

(2)，两列布局

如图五图六所示，当左侧div左浮动，右侧div将会自动适应余下的宽度，当界面大小发生改变时，右侧div同样会随着变化，如果想让左右div中间有一个间距的话，我们可以用右侧div设置一个margin-left为：左侧div的宽度+间距。

如果想让左侧右侧同时自适应的话，我们可以让右侧元素BFC化，此时左侧元素div的marin-left才会有效，如果右侧div不BFC化的话，属于正常流，而浮动已经脱离正常流，所以此时它的margin-left是无效的。

5，清除浮动带来的影响的方法

(1)，使用clear:both

.father:after{/*IE7和IE6不识别*/

content:'';

display:block;

clear:both;

overflow:hidden;

height:0;

}

.father{

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

}

(2)，内部使用空标签

div{clear:both;}

缺点是多了一个空标签，无意义。

(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.静态布局

——最传统的布局方式，网页中所有尺寸都是由px作为单位，设置了min-width,如果宽度小于就会出现滚动条，如果大于这个宽度则内容居中外加背景

实现方式：PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；

移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。

优点：采用之前的css2的布局·方式，布局简单，没有兼容性问题。

缺点: 在手机端不能合理的显示，移动端不能使用pc端页面，需要再写一个布局来呈现。

实践案例：Float 布局、绝对布局

2.自适应布局

——可以看成是不同屏幕下由多个静态布局组成的。自适应布局是为不同的屏幕分辨率分别定义不同的布局。改变屏幕分辨率可以切换不同的静态布局（页面元素位置可能发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。自适应布局页面里面元素的位置会变化，很好的解决了流式布局中的大屏空间利用率不高弊端。

注：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。

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

网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用),分别为不同的屏幕设置布局格式，当屏幕大小改变时，会出现不同的布局，意思就是在这个屏幕下这个元素块在这个地方，但是在那个屏幕下，这个元素块又会出现在那个地方。只是布局改变，元素不变。可以看成是不同屏幕下由多个静态布局组成的。

而流式布局的特点是随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”

注：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。

主要实践案例：左侧固定+右侧自适应、左右固定宽度+中间自适应、圣杯布局、双飞翼布局

4.响应式布局（媒体查询）

——通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。主要依靠是css的媒体查询。

注：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

5.弹性布局

——rem/em、flex布局

CSS3盒模型圣杯(两边固定中间内容自适应)三种布局方案

效果图

css样式:

html结构:

效果图

css样式

html结构

效果图

css样式

html结构

css经典布局——圣杯布局

圣杯布局 和 双飞翼布局 一直是前端面试的高频考点，圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》 。 比起双飞翼布局，它的起源不是源于对页面的形象表达。在西方，圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED，可以说是灵感来自于页面渲染。

原本录制了一个小视频，奈何不能上传到博客中，视频中通过缩放页面可以发现随着页面的宽度的变化，这三栏布局是中间盒子优先渲染，两边的盒子框子宽度固定不变，即使页面宽度变小，也不影响我们的浏览。 注意：为了安全起见，最好还是给body加一个最小宽度!

|

|

【1】浮动

【2】flex弹性盒子

【3】grid布局

如上图所示，我们把body划分成三行四列的网格，其中有5条列网格线