页面布局常用的几种解决方案

页面布局是CSS的一个重点应用。布局的解决方案有很多种方法,而选择一个最优的就显得尤为重要。那么就介绍一下这些解决方案。

使用一个案例来说明。

假设高度已知,请写出三栏布局,其中左栏、右栏宽度各为300px,中间自适应

FA6QtH.png

这道题如果是一道面试题的话,看着很简单,三栏布局都能写出来。但是如果是面试的时候,由这一道题能引出来很多的问题。如果看到这题只想到了浮动和定位,那么是不及格的。

方法一:浮动(float)

1
2
3
4
5
6
7
8
9
10
<section class="layout float">
<article class="first">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>1. 解决方案</h1>
<p>1. 使用浮动解决</p>
</div>
</article>
</section>
  • 这里使用sectionarticle这两个标签原因如下:
    • 我将所有的解决方式写在了一个页面中,为了区分
    • CSS需要注意的一个点是 标签语义化,避免通篇div
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
/* 公共样式 下面的解决方式不再写了*/
* {
padding: 0;
margin: 0;
}

/* 高度已知,这里设置为100px */
.layout article div {
min-height: 100px;
}

.layout {
margin-top: 20px;
margin-bottom: 30px;
}

.float .left {
float: left;
width: 300px;
background: gray;
}

.float .center {
background: yellow;
}

.float .right {
float: right;
width: 300px;
background: skyblue;
}

样式如图所示:

FAg5Ox.png

优点:浮动的兼容性很好。

缺点:脱离了标准流(文档流),需要清除浮动,若处理的不好,会产生很多问题。

方法二:定位(position)

1
2
3
4
5
6
7
8
9
10
<section class="layout position">
<article class="two">
<div class="left"></div>
<div class="center">
<h1>2. 解决方案</h1>
<p>2. 使用定位解决</p>
</div>
<div class="right"></div>
</article>
</section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.position .left {
position: absolute;
left: 0;
width: 300px;
background: gray;
}

.position .center {
position: absolute;
left: 300px;
right: 300px;
background: yellow;
}

.position .right {
position: absolute;
right: 0;
width: 300px;
background: skyblue;
}

样式如图所示:

FAgom6.png

优点:快捷,方便。

缺点:定位也会脱离标准流(文档流),它的子元素也会跟着脱离标准流,也是不好处理。

方法三:flex布局

flex布局是CSS3中新添加的一个属性,也叫做伸缩盒子,移动端用的很多。flex MDN

1
2
3
4
5
6
7
8
9
10
<section class="layout flexBox">
<article class="three">
<div class="left"></div>
<div class="center">
<h1>3. 解决方案</h1>
<p>3. 使用flex伸缩布局解决</p>
</div>
<div class="right"></div>
</article>
</section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.three {
display: flex;
}

.flexBox .left {
width: 300px;
background: gray;
}

.flexBox .center {
background: yellow;
flex: 1;
}

.flexBox .right {
width: 300px;
background: skyblue;
}

样式如图所示:

FAg7TO.png

优点:简单,方便,快捷。不需要多余的操作。

缺点:兼容性会有一点差。

FAfVcd.png

方法四:表格布局

1
2
3
4
5
6
7
8
9
10
<section class="layout table">
<article class="four">
<div class="left"></div>
<div class="center">
<h1>4. 解决方案</h1>
<p>4. 使用表格布局解决</p>
</div>
<div class="right"></div>
</article>
</section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.four {
width: 100%;
display: table;
height: 100px;
}

.table .left {
display: table-cell;
width: 300px;
background: gray;
}

.table .right {
display: table-cell;
width: 300px;
background: skyblue;
}

.table .center {
display: table-cell;
background: yellow;
}

优点:表格布局的兼容性很好,flex布局兼容性问题解决不了的,表格布局都可以解决。

缺点:标签结构复杂,复杂。不利于搜索引擎抓取信息,影响网站的排名。

5. 方法五:网格布局(grid)

1
2
3
4
5
6
7
8
9
10
<section class="layout grid">
<article class="five">
<div class="left"></div>
<div class="center">
<h1>5. 解决方案</h1>
<p>5. 使用网格布局解决</p>
</div>
<div class="right"></div>
</article>
</section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.five {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}

.grid .left {
background: gray;
}

.grid .center {
background: yellow;
}

.grid .right {
background: skyblue;
}

优点:新出的属性,写起来更简单,快捷。代码量更少。

缺点:旧版本的浏览器不支持。

如果能答出grid布局这种方式,证明你对技术热点还是有追求的,有很强的学习能力。

那么有这么多解决方案,在真实的项目中该使用哪一个呢,推荐使用flex布局

最后这道题还有很多延伸,如:

  • 高度已知换位未知呢
  • 你使用浮动,那么清除浮动的方式有哪些呢,推荐使用哪一种呢

页面布局的变通

三栏布局

  • 左右宽高固定,中间自适应
  • 上下高度固定,中间自适应(移动端使用较多)

两栏布局

  • 左宽度固定,右自适应
  • 右宽度固定,左自适应
  • 上宽度固定,下自适应
  • 下宽度固定,上自适应

如果你能将上面几种布局都能写出多种的解决方法,那你就很好的掌握了页面布局。

Author: YangLeLe
Link: http://younglele.cn/several-solutions-for-page-layout/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.