如何使用CSS进行网页布局（HTML/CSS）

什么叫做布局？

又称为版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合。

题目：假设高度已知，请写出三栏布局，其中左栏和右栏宽度各为300px，中间自适应

1、浮动布局

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Layout</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
      .layout article div {
        min-height: 100px;
      }
      .layout.float .left {
        float: left;
        width: 300px;
        background: red;
      }
      .layout.float .right {
        float: right;
        width: 300px;
        background: blue;
      }
      .layout.float .center {
        background: yellow;
      }
    </style>
  </head>
  <body>
    <section class="layout float">
      <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
          <h1>浮动解决方案</h1>
          <p>
            这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分
          </p>
        </div>
      </article>
    </section>
  </body>
</html>

View Code

2、绝对定位布局

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Layout</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
      .layout article div {
        min-height: 100px;
      }
      .layout.absolute .left-center-right>div {
        position: absolute;
      }
      .layout.absolute .left {
        left: 0;
        width: 300px;
        background: red;
      }
      .layout.absolute .center {
        left: 310px;
        right: 310px;
        background: yellow;
      }
      .layout.absolute .right {
        right: 0;
        width: 300px;
        background: blue;
      }
    </style>
  </head>
  <body>
    <section class="layout absolute">
      <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h1>绝对定位解决方案</h1>
          <p>
            这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分
          </p>
        </div>
        <div class="right"></div>
      </article>
    </section>
  </body>
</html>

View Code

3、flexbox布局

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Layout</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
      .layout article div {
        min-height: 100px;
      }
      .layout.flexbox .left-center-right {
        display: flex;
      }
      .layout.flexbox .left {
        width: 300px;
        background: red;
      }
      .layout.flexbox .center {
        flex: 1;
        background: green;
      }
      .layout.flexbox .right {
        width: 300px;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <section class="layout flexbox">
      <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h1>flexbox解决方案</h1>
          <p>
            这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分
          </p>
        </div>
        <div class="right"></div>
      </article>
    </section>
  </body>
</html>

View Code

4、表格布局

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Layout</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
      .layout article div {
        min-height: 100px;
      }
      .layout.table .left-center-right {
        width: 100%;
        display: table;
        height: 100px;
      }
      .layout.table .left-center-right>div {
        display: table-cell;
      }
      .layout.table .left {
        width: 300px;
        background: black;
      }
      .layout.table .center {
        background: green;
      }
      .layout.table .right {
        width: 300px;
        background: burlywood;
      }
    </style>
  </head>
  <body>
    <section class="layout table">
      <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h1>表格布局解决方案</h1>
          <p>
            这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分
          </p>
        </div>
        <div class="right"></div>
      </article>
    </section>
  </body>
</html>

View Code

5、网格布局

相关阅读:
[SQL server] IF ELSE 和 CASE WHEN 的用法
 SQL server游标基本结构
 SQLserver查看某个视图的创建语句
 SqlServer和Oracle修改表结构语句
 IE浏览器部分js代码不生效的问题
 SQL server将查询到的多行结果，拼接成字符串(列转行)
SQL server将某个字符串将按指定字符分解成子字符串(行转列)
安装weblogic时，运行configure.cmd报错、闪退、无法创建域
 黑苹果相关工具
 黑苹果安装问题集
原文地址：https://www.cnblogs.com/fengxiongZz/p/8146641.html