码云 第18题 CSS如何进行圣杯布局
AI 概述
1. 利用 flex 布局2.绝对定位3. grid 布局
圣杯布局如图:
而且要做到左右宽度固定，中间宽度自适应。
首先我们把公共的 HTML 和 CSS 代码附上，以下方法中都可使用，不做重复工作。
公共 HTML 代码：
<body>
<div class="header">这里是头部</div>
<div class="contai...
目录
圣杯布局如图:
而且要做到左右宽度固定，中间宽度自适应。
首先我们把公共的 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 不友好，知道就可以，这里就不浪费篇幅了。
以上关于第18题 CSS如何进行圣杯布局的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 第18题 CSS如何进行圣杯布局
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 第18题 CSS如何进行圣杯布局
