CSS常用布局方案
2020-05-29 本文已影响0人
前端_Fn
上中下一栏式布局
上中下各一栏
<style>
body {
margin: 0;
}
#header {
height: 64px;
background-color: firebrick;
}
#content{
height: 600px;
background-color: moccasin;
}
#footer {
height: 80px;
background-color: grey;
}
</style>
<body>
<header id="header">header</header>
<section id="content">content</section>
<footer id="footer">footer</footer>
</body>
左右两栏式布局
左侧固定，右侧自适应
- float + calc：左侧浮动，右侧宽度的剩余宽度减去左侧宽度。
<style>
body {
margin: 0
}
.left {
float: left;
width: 200px;
height: 600px;
background-color: orange;
}
.right {
float: left;
width: calc(100% - 200px);
height: 600px;
background-color: pink;
}
</style>
<body>
<div class="main">
<div class="left">左侧</div>
<div class="right">右侧</div>
<div>
</body>
- float：左侧浮动即可。
<style>
body {
margin: 0
}
.left {
float: left;
width: 200px;
height: 600px;
background-color: orange;
}
.right {
width: 200px;
height: 600px;
background-color: pink;
}
</style>
<body>
<div class="main">
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
</body>
- flex：左侧宽度，右侧填满剩余。
<style>
body {
margin: 0;
}
.main {
display: flex;
}
.left {
flex: 0 0 200px;
height: 600px;
background-color: orange;
}
.right {
flex: 1;
height: 600px;
background-color: pink;
}
</style>
<body>
<div class="main">
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
</body>
- position + margin：左侧固定，右侧空出左侧宽度。
<style>
body {
margin: 0
}
.left {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 600px;
background-color: orange;
}
.right {
margin-left: 200px;
height: 600px;
background-color: pink;
}
</style>
<body>
<div class="main">
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
</body>
左右三栏式布局
左右固定，中间自适应
- flex：左右给宽度，中间填满剩余空间。
<style>
body {
margin: 0;
}
.main {
display: flex;
}
.left {
width: 200px;
background-color: orange;
}
.center{
flex: 1 0 auto;
background-color: gray;
}
.right {
width: 200px;
background-color: firebrick;
}
</style>
<body>
<div class="main">
<div class="left">左侧</div>
<div class="center">中间</div>
<div class="right">右侧</div>
</div>
</body>
- position：三栏固定，中间空出左右的宽度。
<style>
body {
margin: 0;
}
.left {
position: absolute;
left: 0;
width: 300px;
height: 100px;
background-color: orange;
}
.center {
position: absolute;
left: 300px;
right: 300px;
background-color: seagreen;
}
.right {
position: absolute;
right: 0;
width: 300px;
height: 100px;
background-color: brown;
}
</style>
<body>
<div class="main">
<div class="left">左侧</div>
<div class="center">中间</div>
<div class="right">右侧</div>
</div>
</body>
- float：左右浮动，空出 margin 值，清除浮动即可。
<style>
body {
margin: 0;
}
.left {
float: left;
width: 200px;
height: 600px;
background-color: orange;
}
.right {
float: right;
width: 200px;
height: 600px;
background-color: seagreen;
}
.center {
margin-left: 200px;
margin-right: 200px;
height: 600px;
background-color: gray;
}
.center::after {
content: '';
display: block;
clear: both;
}
</style>
<body>
<div class="main">
<div class="left">左侧</div>
<div class="right">右侧</div>
<div class="center">中间</div>
</div>
</body>
- grid：网格布局
<style>
body {
margin: 0
}
.layout-grid .main {
display: grid;
width: 100%;
grid-template-columns: 300px auto 300px;
grid-template-rows: 600px;
}
.layout-grid .left {
background: orange;
}
.layout-grid .center {
background: gray;
}
.layout-grid .right {
background: pink;
}
</style>
<body>
<div class="layout-grid">
<div class="main">
<div class="left">左侧</div>
<div class="center">中间</div>
<div class="right">右侧</div>
</div>
</div>
</body>
- 圣杯布局
两边固定宽度，中间自适应，唯一区别是 dom 结构必须是先写中间列部分，这样实现中间列可以优先加载。
<style>
body {
margin: 0;
}
.main {
padding-left: 200px;
padding-right: 200px;
}
.center {
float: left;
width: 100%;
height: 600px;
background-color: gray;
}
.left {
float: left;
margin-left: -100%;
position: relative;
left: -200px;
width: 200px;
height: 600px;
background-color: orange;
}
.right {
float: left;
margin-left: -200px;
position: relative;
right: -200px;
width: 200px;
height: 600px;
background-color: firebrick;
}
</style>
<body>
<div class="main">
<div class="center">中间</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
</body>
- 双飞翼布局
同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。而且任何一栏都可以是最高栏，不会出问题。
<style>
body {
margin: 0;
}
.main {
min-width: 400px;
}
.center {
float: left;
width: 100%;
height: 600px;
background-color: gray;
}
.inner {
margin: 0 200px;
}
.left {
float: left;
margin-left: -100%;
width: 200px;
height: 600px;
background-color: orange;
}
.right {
float: left;
margin-left: -200px;
width: 200px;
height: 600px;
background-color: firebrick;
}
</style>
<body>
<div class="main">
<div class="center">
<div class="inner">中间</div>
</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
</body>
-
圣杯布局实现步骤
- 三个部分都设定为左浮动，否则左右两边内容上不去，就不可能与中间列同一行。
- 设置 center 的宽度为 100%(实现中间列内容自适应)，此时，left 和 right 部分会跳到下一行。
-
缺点
- center 部分的最小宽度不能小于 left 部分的宽度，否则会 left 部分掉到下一行。
-
双飞翼布局实现步骤
- 三个部分都设定为左浮动，然后设置 center 的宽度为 100%，此时，left 和 right 部分会跳到下一行.
- 通过设置 margin-left 为负值让 left 和 right 部分回到与 center 部分同一行。
- center 部分增加一个内层 div，并设 margin: 0 200px。
-
缺点
- 多加一层 dom 树节点，增加渲染树生成的计算量。
-
圣杯布局和双飞翼布局实现方式对比:
- 两种布局方式都是把主列放在文档流最前面，使主列优先加载。
- 两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
- 两种布局方式的不同之处在于如何处理中间主列的位置： 圣杯布局是利用父容器的左、右内边距+两个从列相对定位; 双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整
