css和css的圣杯布局,CSS布局--圣杯布局和双飞翼布局以及使用Flex实现圣杯布局

前言

我曾一度觉得总写css的前端很low，有了这种思想以后我便远离网页布局，H5的工作更不想接，沉迷于页面逻辑和封装组件。直到最近我面试，面试官说我css3理解的不熟，我起初很不屑，但后来静下来反省了一下并不是我不熟，只是我开始瞧不上网页制作这种工作了，问我css问题时，我感觉就像是再问一个老粉刷匠这片墙面要从哪里刷起，从哪里刷不行 ？这有什么决定性的问题吗 ？

说的有点多，其实写这边文章的主要目的还是想告诉自己，不要瞧不起某一门技术，技术有高低，但不代表学css的人的技术就要比学js的智商低，术业有专攻，心态要自己掌握，不要受外界的影响。

圣杯布局&双飞翼布局

所谓圣杯布局和双飞翼布局其实解决的问题是相同的，都是解决左右两栏固定宽度，中间部分自适应，其中某部分内容比其他内容高的时候，保证三者元素等高。

他俩的区别就是：圣杯用padding。双飞翼用在main外层多加了一个div然后改用margin。

圣杯布局

以下面html为例：

mainleftright

1.main、left、right全部左浮动，在设置一个position：relative稍后会用到。

2.main的宽度设置为100%。left和right固定宽度(假设100px)。

3.此时main自己沾满了一行，所以给left拽上来设置marginleft：100%，此时left虽然上来了但是是覆盖在main上面的。

4.给content设置padding-left等于left的宽，此时左边有100px的空白，main和left都被挤过来了，要想还原，将left向左在移动100px就行了。

5.此时就剩下right在下面，同理margin-right：-100%就上去了。

css代码：

* {

box-sizing: border-box;

}

.content {

overflow: hidden;

padding-left: 100px;

padding-right: 100px;

}

.content > div {

float: left;

position: relative;

}

.main {

width: 100%;

height:100px;

border:1px solid red;

}

.left {

width:100px;

margin-left: -100px;

right:100%;

height:100px;

border:1px solid #000;

}

.right {

width:100px;

margin-right: -100px;

height:100px;

border:1px solid #000;

}

双飞翼布局

双飞翼布局的html：

mainleftright

对比一下css的区别：多了一个.main-inner，少了一些相对定位。

* {

box-sizing: border-box;

}

.main-inner {

margin-left:100px;

margin-right: 100px;

}

.content {

overflow: hidden;

/* padding-left: 100px;

padding-right: 100px; */

}

.content > div {

float: left;

/* position: relative; */

}

.main {

width: 100%;

height:100px;

border:1px solid red;

}

.left {

width:100px;

margin-left: -100%;

/* right:100px; */

height:100px;

border:1px solid #000;

}

.right {

width:100px;

/* margin-right: -100px; */

margin-left: -100px;

height:100px;

border:1px solid #000;

}

Flex布局

相比较两者，Flex布局就好理解得多

html和圣杯布局一样

css：

* {

box-sizing: border-box;

}

.content {

overflow: hidden;

display:flex;

flex:1

}

.main {

flex:1;

height:100px;

border:1px solid red;

}

.left {

flex:0 0 100px;

order:-1;

height:100px;

border:1px solid #000;

}

.right {

flex:0 0 100px;

height:100px;

border:1px solid #000;

}

未完待续...

总结

以上是生活随笔为你收集整理的css和css的圣杯布局,CSS布局--圣杯布局和双飞翼布局以及使用Flex实现圣杯布局的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。