Web前端中的几种布局

欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~

圣杯布局

圣杯布局是一种三列布局,两边定宽,中间宽度自适应

圣杯布局可以将整个div.container看做一个奖杯,div.leftdiv.right看做奖杯的两个耳朵

圣杯布局的原理就是当子元素处于浮动状态时,设置负margin,子元素会叠盖到兄弟元素之上

方法一:利用 BFC 元素与浮动元素不会相互覆盖的特性,实现圣杯布局

  1. 三个盒子都加上背景色,方便观察,两边固定宽度,左边左浮动,右边右浮动,中间创建 BFC
1
2
3
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
html, body { margin: 0; padding: 0; }
.left {
background: yellow;
float: left;
width: 180px;
}
.middle {
background: blue;
overflow: hidden;
}
.right {
background: red;
width: 180px;
float: right;
}

BFC实现圣杯布局1

  1. 此时发现div.right这个盒子掉下来了,为什么呢?是因为由于div.middle这个盒子是自适应宽度并且在结构中先渲染,此时会提前挤占剩余宽度,所以会将div.right盒子挤下来,而解决办法就是让div.right盒子先渲染,原理是浮动元素脱离文档流,并提前浮动到右边,且 BFC 元素与浮动元素不会相互覆盖,此时div.middle再去占有剩余宽度就可以了

完整代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body { margin: 0; padding: 0; }
.left {
background: yellow;
float: left;
width: 180px;
}
.middle {
background: blue;
overflow: hidden;
}
.right {
background: red;
width: 180px;
float: right;
}
</style>
</head>
<body>
<div class="left">left</div>

<div class="right">right</div>
<div class="middle">middle</div>
</body>
</html>
  1. 此时再去浏览器,拉伸一下浏览器或者缩小浏览器,看看效果就两边宽度固定中间自适应了

BFC实现圣杯布局2

方法二:margin的应用

  1. 先把三个盒子呈现出来
1
2
3
4
5
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
}
.left, .middle, .right {
min-height: 150px;
}
.left, .right {
width: 220px;
}
.left {
background-color: yellow;
}
.middle {
background-color: blue;
}
.right {
background-color: red;
}

圣杯布局之呈现盒子

  1. 此时三者是垂直排列,需要将他们横向排列,所以给三者都添加浮动
1
2
3
4
5
.left, 
.middle,
.right {
float: left;
}

圣杯布局之浮动

  1. 这时候只是达到了三个盒子在一行的效果,并不能达到前面自适应的需求,而且整个页面不正常了,不着急,继续下一步,设置div.container的盒模型,使得父元素两边留白,留够div.leftdiv.right的空间
1
2
3
.container {
padding: 0 220px;
}
  1. div.middle设置100%宽度,使其自适应
1
2
3
.middle {
width: 100%;
}
  1. 设置div.leftdiv.right的负外边距,让其到div.container留白位置
1
2
3
4
5
6
.left {
margin-left: -220px;
}
.right {
margin-right: -220px;
}

此时惊奇的发现,这三列已经排列正常,且能自适应了

margin实现圣杯布局

  1. 但是发现,div.footer上去了,很简单,这是因为三个浮动元素会脱离标准文档流,所以div.footer会上去占有他们的文档流,解决办法是将div.footer设置一个BFC区域就行,BFC区域详细文档可以看BFC
1
2
3
.footer {
overflow: hidden;
}

圣杯布局

完整代码看这里:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body { width: 100%; margin: 0; padding: 0; }
.header,
.footer {
overflow: hidden;
width: 100%;
background-color: #ccc;
text-align: center;
}
.container {
padding: 0 220px;
}
.left,
.middle,
.right {
position: relative;
float: left;
min-height: 150px;
}
.left,
.right {
width: 220px;
}
.left {
margin-left: -220px;
background-color: yellow;
}
.middle {
width: 100%;
background-color: blue;
}
.right {
margin-right: -220px;
background-color: red;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="container">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>

双飞翼布局

看完了圣杯布局,来看双飞翼布局,其实和圣杯布局差不多,可以将div.container看做一只大鸟,将div.middle看做鸟的身体,将div.leftdiv.right看做鸟的两个翅膀

实现方式与圣杯布局差不多,但在解决中间栏div.middle部分的思路不一致

直接上代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body { width: 100%; margin: 0; padding: 0; }
.header,
.footer {
clear: both;
width: 100%;
background-color: #ccc;
text-align: center;
}
.left,
.main,
.right {
float: left;
height: 150px;
text-align: center;
}
.left,
.right {
width: 220px;
}
.left {
margin-left: -100%;
background-color: yellow;
}
.main {
width: 100%;
}
.middle {
min-height: 150px;
margin: 0 220px;
background-color: blue;
}
.right {
margin-left: -220px;
background-color: red;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="container">
<div class="main">
<div class="middle">middle</div>
</div>
<div class="left">left</div>

<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>

圣杯布局 VS 双飞翼布局

主要是针对于中间div.middle的处理思路不一样

圣杯布局是先留白,在用margin让两边过去,利用了相对布局

双飞翼布局多创建一个div,包裹middle,利用margin为负值来布局

相比较而言,双飞翼布局比圣杯布局多用了个divcontainerpadding不需要加了,相对布局position: relative,双飞翼布局的子divmargin布局

注意:两种布局一般都需要将div.middle这一栏提到结构div.left的上面先渲染

前面分析了圣杯布局和双飞翼布局,了解到他们的原理实际上都是是当子元素处于浮动状态时,设置负margin,子元素会叠盖到兄弟元素之上

那么将中间是三个盒子的代码再复制一份,嵌套在div.middle中,看看效果

圣杯嵌套

此时会发现,中间div.middle部分多一部分盒子,且依然满足两边固定,中间宽度自适应,这个很像Bootstrap里的栅格嵌套

栅格布局

Bootstrap的栅格布局提供了一套响应式的解决方案,其实把这套布局拆分来看,分为这几部分:

  1. container的设计
  2. 响应式布局实现

其中行和列的布局原理和圣杯布局原理一样

container设计

container设计

响应式布局实现

@media媒体查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {/*当宽度大于768px时触发*/
.container {
width: 750px;
}
}
@media (min-width: 992px) {/*当宽度大于992px时触发*/
.container {
width: 970px;
}
}
@media (min-width: 1200px) {/*当宽度大于1200px时触发*/
.container {
width: 1170px;
}
}
.container-fluid { /*这个是宽度默认*/
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

行(row)

row实现

1
2
3
4
.row {
margin-right: -15px;
margin-left: -15px;
}

列(col)

Bootstrap分别将他们分割成12份,意思是你可以随意使用者12份,加起来要正好12,并能自己调整分配数字

column

Bootstrap实现了更好的响应式布局,列的种类是有很多种的

.col-xs-* 针对超小屏幕 手机(<768px)

.col-sm-* 小屏幕 平板 (≥768px)

.col-md-* 中等屏幕 桌面显示器 (≥992px)(栅格参数)

.col-lg-* 针对特大的(≥1200px)

例子:

表示小屏幕手机采用col-sm-6布局,中屏幕手机采用col-md-4布局

1
<div class="col-sm-6 col-md-4"></div>

Bootsrap中关于栅格布局的代码实现,很多,这里不粘贴了,原理就是前面所说的,可以去官网看

当然,Bootstrap远不止实现了上面那点东西,例如 .col-md-offset-* .col-md-push-* 能够实现很好的细节的排版等等很多,这个神奇的东西还是需要慢慢领悟的~~,下面不能废话了,继续回归正题,说布局

Flex布局

参考文档:Flex布局

绝对定位布局

绝对定位布局很多地方都有应用,依靠绝对定位,想定到哪,定到那,这里不细说

本文标题:Web前端中的几种布局

文章作者:王工头

发布时间:2019年01月24日 - 10:35:24

最后更新:2019年01月26日 - 15:55:31

原始链接:https://qqqww.com/Web前端中的几种布局/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------本文结束感谢大佬们的阅读-------------