css 自适应布局

1.弹性布局：css3新增，使用简单

<style type="text/css">
.layout {
display: flex;
margin: 10px 0;
line-height: 50px;
text-align: center;
}
.layout__main {
flex: 1;
background-color: #4DBCB0;
}

.layout__aside {
width: 200px;
background-color: #daf1ef;
}

</style>

<div class="layout">
<aside class="layout__aside">左侧边栏宽度固定</aside>
<div class="layout__main">主内容栏宽度自适应</div>
<aside class="layout__aside">右侧边栏宽度固定</aside>
</div>

2.经典浮动 ：脱离文档流仍然占据空间

<style type="text/css">

* {
margin: 0;
padding: 0;
line-height: 50px;
text-align: center;
}

.layout__aside {
width: 200px;
float: left;
background: #daf1ef;
}

.layout__main {
margin-left: 210px; 
background: #4DBCB0;
}

.clear {
clear: both;
}
</style>

<aside class="layout__aside">侧边栏宽度固定</aside>
<div class="layout__main">主内容栏宽度自适应</div>
<footer class="clear">底部</footer>
<footer>底部2</footer>

3.margin负值结合padding的浮动：先计算各自宽高再浮动布局

<style type="text/css">
.layout__aside,
.layout__main {
float: left;
}
.layout {
padding-left: 210px;
}
.layout__main {
width: 100%;
background-color: #4DBCB0;
}
.layout__aside {
width: 200px;
margin-left: -210px;
background-color: #daf1ef;
}
</style>

<div class="layout">
<aside class="layout__aside">侧边栏宽度固定</aside>
<div class="layout__main">主内容栏宽度自适应</div>
</div>