1.传统方式
简言之:就是按照每个块元素占一行的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
font-size:20px;
text-align: center;
}
.warp{
width: 900px;
margin:0 auto;
}
#header{
height:100px;
background: #6cf;
}
#main{
height:500px;
background: #ccffff;
}
#footer{
height:80px;
background: #99ccff;
}
</style>
</head>
<body>
<header id="header" class="warp">#header</header>
<section id="main" class="warp">#section</section>
<footer id="footer" class="warp">#footer</footer>
</body>
</html>
效果
2.flex 方式
关键代码
父级:display: flex; flex-direction: column;
子级: 设置为flex:1(则高度由字体撑起来) ,设置为flex: 0 0 500px(则高度为500px,设置height无效)
知识点
flex: 1 =? 1 1 0%
flex: auto => 1 1 auto
flex: none => 0 0 auto;
flex-basis优先级 自身设定 > 0%(flex:1按字体的高度) > auto(采用height)
<!DOCTYPE html>
<html lang="en">
<!-- 此处参考阮一峰实例篇中圣杯布局
(中间部分看做一体) -->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
font-size:20px;
text-align: center;
}
.warp{
margin:0 auto;
}
.holy {
display: flex;
flex-direction: column;
}
#header{
width: 900px;
/* height无效 */
height:400px;
background: #6cf;
flex: 1;
}
#main{
width: 900px;
background: #ccffff;
flex: 0 0 500px
}
#footer{
width: 900px;
/* height无效 */
height:180px;
background: #99ccff;
flex: 1;
}
/* .
flex: 1 =? 1 1 0%
flex: auto => 1 1 auto
flex: none => 0 0 auto;
flex-basis优先级 自身设定 > 0%(flex:1按字体的高度) > auto(采用height)
*/
</style>
</head>
<body>
<div class="holy">
<header id="header" class="warp">#header</header>
<section id="main" class="warp">#section</section>
<footer id="footer" class="warp">#footer</footer>
</div>
</body>
</html>