一、什么是布局

1、现有的布局满足不了人们的需求

文档流、浮动、定位

2、用户中所需要的：

• 导航栏+内容

• 导航栏+内容+广告栏

• 从上到下、从左到右、定宽、自适应...

二、几种布局介绍

1、单列布局

• 一栏布局

• 一栏布局（通栏）

  
  

  

  image

  
  

  实现方式： 定宽 + 水平居中

width: 1000px; //或 max-width: 1000px;margin-left: auto;
margin-right: auto;

范例：单列布局——一栏布局

关键代码：

<style>
  .layout{
  /* width: 960px; */
    max-width: 960px;
    margin: 0 auto;
  }
  //给 body 设置min-width 去掉滚动背景色 bug  
  body{
    min-width: 960px;
  }
  #header{
    height: 60px;
    background: red;
  }
  #content{
    height: 400px;
    background: blue;
  }
  #footer{
    height: 50px;
    background: yellow;
  }</style>/* 如图1：此时的定宽是width:560px */<div class="layout">
  <div id="header">头部</div>
  <div id="content">内容</div>
  <div id="footer">尾部</div></div>/* 或通栏的单列布局,此时```.layout{border:1px solid}``` */   <div id="header">
      <div class="layout">头部</div>
   </div>
   <div id="context" class="layout">内容</div>
   <div id="footer">
      <div class="layout">尾部</div>
   </div>//或省标签，便于控制局部 如图2：<div id="header"  class="layout">头部</div><div id="content" class="layout">内容</div><div id="footer" class="layout">尾部</div>

如图：

image

image

2、双列布局

一列固定宽度，另一列自适应宽度

image

实现方式：浮动元素 + 普通元素margin+老子清除浮动

注： 布局时，考虑到渲染顺序，浮动元素代码优先写在其他元素前面，优先渲染

第1种场景：两列布局

范例：双列布局

<style>
    #content:after{     //第3步：添加一个伪元素清除浮动
      content: '';
      display: block;
      clear: both;
    }
    .aside{
      width: 200px;
      height: 500px;
      background: yellow;
      float: left;         //第1步：浮动元素
    }
    .main{
      margin-left: 210px;  //第2步：margin-left（right）
      height: 400px;
      background: red;
    }

    #footer{
      background: #ccc;
    }  </style>
    <div id="content">  
      <div class="aside">aside</div>
      <div class="main">content</div>
    </div>
  <div id="footer">footer</div>

如图：

image

第2种场景：两列布局侧边栏aside在右侧：

范例：双栏布局——侧边栏（aside）在右侧

<style>
    #content:after{    //第3步：清除浮动
      content: '';
      display: block;
      clear: both;
    }
    .aside{
      width: 200px;
      height: 500px;
      background: yellow;
      float: right;  //第1步：浮动
    }
    .main{
      margin-right: 210px;  //第2步：margin
      height: 400px;
      background: red;
    }

    #footer{
      background: #ccc;
    }  </style>

  <div id="content">
    <div class="aside">aside</div>
    <div class="main">content</div>
  </div>
  <div id="footer">footer</div>

如图：

image

3、三列布局

两侧两列固定宽度，中间列自适应宽度

image

实现方式：浮动元素+margin+伪类元素清除浮动

#content:after{   ////第3步：伪类元素
      content: '';
      display: block;
      clear: both;
    }
    .menu{
      width: 100px;
      height: 500px;
      background: pink;
      float: left;   //第1步：浮动
    }
    .aside{
      width: 200px;
      height: 500px;
      background: yellow;
      float: right;  //第1步：浮动
    }
    .main{
      margin-left: 110px; /*为什么要加margin-left*/  //第2步：margin
      margin-right: 210px;                         //第2步：margin
      height: 400px;
      background: red;
    }

    #footer{
      background: #ccc;
    }  <div id="content">
    <!-- 为什么不是main在前面： 渲染顺序-->
    <div class="menu">menu左</div>
    <div class="aside">aside右</div>
    <div class="main">content中</div>
  </div>
  <div id="footer">footer</div>

如图：

image

4、水平等距布局

实现方式：处理老子（居中、防溢出）+浮动+ margin

<style>ul,li{
  margin: 0;
  padding: 0;
  list-style: none; //取消列表的实心小黑点
}
.ct{
    overflow:hidden; //溢出隐藏
    width: 640px;
    border:dashed 1px orange;
    margin: 0 auto;  //相对于页面的居中
}

.ct .item{
    float:left;  //第1步：浮动
    margin-left: 20px; //第0步：提前设置
    margin-top: 20px;  //第0步：提前设置
    width:200px;
    height:200px;
    background: red;
}
.ct>ul{
  margin-left: -20px;  //第2步：补充不够的20px
}</style><div class="ct">
  <ul>
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
    <li class="item">6</li>
    <li class="item">7</li>
    <li class="item">8</li>
  </ul></div>

如图：

image

作者：饥人谷_远方
链接：https://www.jianshu.com/p/ca2bf49dfe8c