一篇文章学会CSS布局 (一)

前言

读者朋友，你好！欢迎阅读本篇文章。在读本文章之前，我们来想想为什么HTML要布局，以及好的布局给我们的网页带来了什么好处，说说你知道的经典布局有哪些，你是怎么实现这些布局的。

DIV+CSS布局的优点

1. 大幅度缩减了页面页面代码，提高了页面的加载速度
2. 优化代码结构，提高了代码的可维护性和可读性
3. 拥有清晰的结构，容易被SEO优化
4. 更好的控制页面，及时更新以及重制页面
5. 兼容性好…

常见的布局有哪些

1. 水平居中布局
2. 垂直居中布局
3. 居中布局
4. 两列布局
5. 三列布局
6. 等分布局
7. 圣杯布局
8. 双飞翼布局
9. 全屏布局

下面我带领大家一起学习这些布局，并使用代码将其实现，如果你有什么更好的实现方法，也欢迎在评论区留言，一起学习CSS布局。

水平居中布局

水平居中布局是几种布局最常见也最容易实现的布局，我总结一下，大概有一下几种方式

1. 使用margin设置margin左右为auto
2. 利用text-left设置文本对齐方式
3. 开启定位，使用left和transform

<div id="parent">
    <div id="child"></div>
  </div>

/* 第一种方式 */
  #parent {
      width: 100%;
      height: 200px;
      background: #fff;
    }

    #child {
      width: 200px;
      height: 200px;
      background: #000;
      margin: 0 auto;
    }

/* 第二种方式 */
 <style>
    #parent {
      width: 100%;
      height: 200px;
      background: #fff;
      text-align: center;
    }

    #child {
      width: 200px;
      height: 200px;
      background: #000;
      display: inline-block;
      text-align: left;
    }
  </style>

/* 第三种方式 */
    #parent {
      width: 100%;
      height: 200px;
      background: #fff;
      position: relative;
    }

    #child {
      width: 300px;
      height: 200px;
      background: #000;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
  </style>

垂直居中布局

1. 设置display为table-cell设置vertical-align为middle
2. 开启定位，使用left和transform

 <style>
 /* 第一种方式 */
    #parent {
      width: 200px;
      height: 600px;
      background: #fff;
      vertical-align: middle;
    }

    #child {
      width: 200px;
      height: 200px;
      background: #000;
    }
  </style>

<style>
	/* 第二种方式 */
    #parent {
      width: 200px;
      height: 600px;
      background: #fff;
      position: relative;
    }

    #child {
      width: 200px;
      height: 200px;
      background: #000;
      position: absolute;
      top: 50%;
      transform: translateY(-50%)
    }
  </style>

居中布局

1. 使用table-cell属性，和margin设置居中
2. 开启定位，设置left-top属性，以及transform

/* 第一种方式 */
 <style>
    /* 第一种方式 */
    #parent {
      width: 1000px;
      height: 600px;
      background: #fff;
      display: table-cell;
      vertical-align: middle;
    }

    #child {
      width: 200px;
      height: 200px;
      background: #000;
      display: block;
      margin: 0 auto;
    }
  </style>

<style>
    /* 第二种方式 */
    #parent {
      width: 1000px;
      height: 600px;
      background: #fff;
      position: relative;
    }

    #child {
      width: 200px;
      height: 200px;
      background: #000;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  </style>

两列布局

两列布局,设置左侧定宽，右侧为自适应，其他情况也类似

1. 开启定位，设置浮动

<div id="left"></div>
  <div id="right-fix">
    <div id="right">
      <div id="inner"></div>
    </div>
  </div>

<style>
    #left,
    #right {
      height: 300px;
    }

    #left {
      /* 定宽 */
      width: 400px;
      background-color: #c9394a;
      float: left;
      position: relative;
    }

    #right-fix {
      float: right;
      width: 100%;
      margin-left: -400px;
      background-color: hotpink;
    }

    #right {
      background-color: #cccccc;
    }

    #inner {
      background-color: green;
      height: 300px;
      clear: both;
    }
  </style>

2. 开启BFC模式，当前元素的内部环境与外界完全隔离

<div id="left"></div>
<div id="right"></div>

<style>
    #left,
    #right {
      height: 300px;
    }

    #left {
      /* 定宽 */
      width: 400px;
      background-color: #c9394a;
      float: left;
    }

    #right {
      background-color: #cccccc;
      overflow: hidden;
    }

3. 利用table属性，实现两列布局

<div id="parent">
    <div id="left"></div>
    <div id="right"></div>
</div>

 #parent {
      display: table;
      table-layout: fixed;
      width: 100%;
    }

    #left,
    #right {
      height: 300px;
      display: table-cell;
    }

    #left {
      width: 400px;
      background-color: #c9394a;
    }
    #right {
      background-color: #cccccc;
    }
  </style>

结尾

限于篇幅，就写到这里了，剩余的没完成的部分，我会在另一篇文章中继续书写，欢迎留言区指正和讨论，一起学习。哈哈哈哈