前言
前端重要的就是布局，平时各种各样花样繁多的网页，仔细琢磨，布局也都是那么几种，脱不了樊笼。所以，尝试从概括的角度，梳理一下CSS的常见布局。
所谓布局，都是为了网页的美观与内容的展览服务的，同时要考虑到不同分辨率的屏幕的情况下，布局需要进行相应的自适应。综合这些，布局主要就分为两栏布局和三栏布局。
两栏布局
什么是两栏布局，顾名思义就是只有两列，左边或右边位置固定、宽度固定，另一边内容栏宽度自适应。用于侧边导航栏/广告栏+主体内容栏。
两栏布局
- 浮动布局
左侧栏固定宽度向左浮动，右侧主要内容栏则用margin-left留出左侧栏的宽度，默认宽度auto，自动填满剩下的宽度。
// HTML
<div id="aside">宽度固定</div>
<div id="main">我是猫🐱</div>
// CSS
div {
height: 500px;
}
#aside {
float: left;
width: 200px;
background: yellow;
}
#main {
margin-left: 200px;
background: aqua;
}
- 浮动布局+负外边距
// HTML
<div class="aside">宽度固定为200px</div>
<div class="main">
<div class="content">我是猫</div>
</div>
// CSS
div{
height:500px;
}
.aside {
float: left;
width: 200px;
background: yellow;
margin-right: -100%;
}
.main {
float: left;
width: 100%;
}
.content {
background: aqua;
margin-left: 200px;
}
- 绝对定位
// HTML
<div id="aside">宽度固定</div>
<div id="main">我是猫🐱</div>
// CSS
#aside {
position:absolute;
left:0;
width:200px;
}
#main{
margin-left:200px;
}
- flex布局
// HTML
<div id="container">
<div id = "aside"></div>
<div id = "main"></div>
</div>
// CSS
#container{
display:flex;
}
#aside{
flex:0 0 200px;
}
#main{
flex: 1 1;
}
三栏布局
所谓的三栏布局，即有三列，两边定宽，中间宽度自适应。对于圣杯布局和双飞翼布局，还要求优先渲染中间主体部分，这就需要将中间标签写在最前面。
三栏布局
- 绝对定位
左侧栏和右侧栏分别用绝对定位固定在左侧和右侧，中间栏则利用margin-left和margin-right空出左右栏位置来。 - 圣杯布局(双飞翼布局的前身)
// HTML
<div id="container">
<div id="center">center</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
// CSS
div{
height:500px;
}
#container {
padding-left: 200px; // 外部父容器，给两侧栏留出空位
padding-right: 300px;
}
#center {
float: left;
width: 100%;
background: aqua;
}
#left {
position: relative; // 占据父容器留出的空位
left: -200px;
float: left;
background: yellow;
width: 200px;
margin-left: -100%;
}
#right {
position: relative;
right: -300px;
float: left;
background: red;
width: 300px;
margin-left: -300px;
}
- 双飞翼布局
双飞翼布局与圣杯布局不同的主要是多一个标签，和处理中间栏内容被两侧栏遮挡的方法。
// HTML
<div id="main">
<div id="content">content</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
// CSS
div{
height:500px;
}
#main {
float: left;
width: 100%;
}
#content {
margin-left: 200px;
margin-right: 300px;
background: aqua;
}
#left {
float: left;
width: 200px;
background: yellow;
margin-left: -100%;
}
#right {
float: left;
width: 300px;
background: red;
margin-left: -300px;
}
- flex布局
// HTML
<div>
<article></article>
<nav></nav>
<aside></aside>
</div>
// CSS
div{
display:-webkit-flex;
display:flex;
margin:0;
padding:0;
height:800px;
}
article{
flex:1 1;
order:2;
background-color:yellow;
}
nav{
flex:0 0 200px;
order:1;
background-color:blue;
}
aside{
flex:0 0 200px;
order:3;
background-color:aqua;
}
