码云面试题 2020-01-19

第18题 CSS如何进行圣杯布局

圣杯布局如图:

而且要做到左右宽度固定，中间宽度自适应。

首先我们把公共的HTML和CSS代码附上，以下方法中都可使用，不做重复工作。

公共HTML代码：

<body>
    <div class="header">这里是头部</div>
    <div class="container">
        <div class="left">左边</div>
        <div class="middle">中间部分</div>
        <div class="right">右边</div>
    </div>
    <div class="footer">这里是底部</div>
</body>

公共CSS代码：

*{
  margin: 0;
  padding: 0;
}
.header,.footer{
	height:40px;
	width:100%;
	background:red;
}

1. 利用flex布局

CSS代码：

.container{
	display: flex;
}
.middle{
	flex: 1;
	background:yellow;
}
.left{
	width:200px;
	background:pink;
}
.right{
	background: aqua;
	width:300px;
}

2.绝对定位

.container{
  min-height: 1.2em;
  position: relative;
}

.container>div {
  position: absolute;
}

.middle {
  left: 200px;
  right: 250px;
  background: yellow;
}

.left {
  left: 0;
  width: 200px;
  background: pink;
}

.right {
  right: 0;
  width: 250px;
  background: aqua;
}

3. grid布局

HTML代码：

<div id="header">header</div>
<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right</div>     
<div id="footer">footer</div>

CSS代码：

body{
	display: grid;
}
#header{
	background: red;
	grid-row:1;
	grid-column:1/5;
}
	
#left{
	grid-row:2;
	grid-column:1/2;
	background: orange;
}
#right{
	grid-row:2;
	grid-column:4/5;
	background: cadetblue;
}
#middle{
	grid-row:2;
	grid-column:2/4;
	background: rebeccapurple
}
#footer{
	background: gold;
	grid-row:3;
	grid-column:1/5;
}

看看grid布局，其实也挺简单的吧，里面的参数应该不言而喻了。另外我之前也写过一篇关于grid布局文章：CSS Grid网格布局实例教程，感兴趣的小伙伴可以看一下。

另外说一点，到2019年为止，grid现在绝大多数浏览器已经可以兼容了，可以着手使用了。

当然，还有table布局，年代比较久远了，而且对SEO不友好，知道就可以，这里就不浪费篇幅了。

「点点赞赏，手留余香」

赞 0 赏

给作者打赏，鼓励TA抓紧创作！