float layout
advantage：better compatibility
disadvantage：not easy to maitain
positon layout
advantage：faster
disadvantage：not easy to maitain
flex layout
advantage：better for mobile terminal
disadvantage：css3
table layout
advantage：the best compatibility，ie8
disadvantage：not friendly for SEO
grid layout
advantage：new tech
disadvantage：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>layout</title>
<style>
html *{
padding: 0;
margin: 0;
}
.left{
background-color: #f00;
width: 300px;
}
.center{
background-color: #0f0;
}
.right{
background-color: #00f;
width: 300px;
}
div{
height: 100px;
}
section.layout{
margin-bottom: 100px;
}
</style>
</head>
<body>
<section class="layout float">
<style>
.float>.left-right-center>.left{
float: left;
width: 300px;
}
.float>.left-right-center>.right{
float: right;
width: 300px;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right">float</div>
<div class="center"></div>
</article>
</section>
<section class="layout position">
<style>
.position>article{
position: relative;
}
.position>article>div{
position: absolute;
}
.position>.left-center-right>.left{
left: 0;
width: 300px;
}
.position>.left-center-right>.center{
/*core code*/
left: 300px;
right: 300px;
}
.position>.left-center-right>.right{
right: 0;
width: 300px;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">position</div>
<div class="right"></div>
</article>
</section>
<section class="layout flex-box">
<style>
.flex-box{
margin-top: 300px;
}
.flex-box>article{
display: flex;
}
.flex-box>article>.center{
/*core code*/
flex: 1;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">flex</div>
<div class="right"></div>
</article>
</section>
<section class="layout table">
<style>
.table>article{
width: 100%;
/*core*/
display: table;
}
.table>.table-cell>div{
/*core*/
display: table-cell;
}
</style>
<article class="table-cell">
<div class="left"></div>
<div class="center">table</div>
<div class="right"></div>
</article>
</section>
<section class="layout grid">
<style>
.grid>article{
/*core*/
display: grid;
grid-template-columns: 300px auto 300px;
grid-template-rows: 100px;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">grid</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
网友评论