CSS常见布局总结

前言

  前端重要的就是布局，平时各种各样花样繁多的网页，仔细琢磨，布局也都是那么几种，脱不了樊笼。所以，尝试从概括的角度，梳理一下CSS的常见布局。
  所谓布局，都是为了网页的美观与内容的展览服务的，同时要考虑到不同分辨率的屏幕的情况下，布局需要进行相应的自适应。综合这些，布局主要就分为两栏布局和三栏布局。

两栏布局

  什么是两栏布局，顾名思义就是只有两列，左边或右边位置固定、宽度固定，另一边内容栏宽度自适应。用于侧边导航栏/广告栏+主体内容栏。

两栏布局

1. 浮动布局
   左侧栏固定宽度向左浮动，右侧主要内容栏则用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;
}

2. 浮动布局+负外边距

// 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;
}

3. 绝对定位

// HTML
<div id="aside">宽度固定</div>
<div id="main">我是猫🐱</div>
// CSS
#aside {
    position:absolute;
    left:0;
    width:200px;
}
#main{
    margin-left:200px;
}

4. 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;
}

三栏布局

  所谓的三栏布局，即有三列，两边定宽，中间宽度自适应。对于圣杯布局和双飞翼布局，还要求优先渲染中间主体部分，这就需要将中间标签写在最前面。

三栏布局

1. 绝对定位
   左侧栏和右侧栏分别用绝对定位固定在左侧和右侧，中间栏则利用margin-left和margin-right空出左右栏位置来。
2. 圣杯布局(双飞翼布局的前身)

// 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;
}

3. 双飞翼布局
     双飞翼布局与圣杯布局不同的主要是多一个标签，和处理中间栏内容被两侧栏遮挡的方法。

// 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;
}

4. 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;
}

参考文章

CSS: 两栏布局，三栏布局