CSS布局练习总结

为了提高工作效率，不在CSS布局上多次耗费时间，故记录此练习笔记。借鉴了大神【浪里行舟】的博客，文末有链接。

CSS布局概要：

CSS布局思维导图

demo效果页面

  1. 单列布局1
  2. 单列布局2
  3. 两列自适应布局flex
  4. 两列自适应布局float
  5. 两列自适应布局grid
  6. 三栏布局：圣杯布局
  7. 三栏布局：双飞翼布局
  8. 三栏布局：absolute
  9. 三栏布局：flex
  10. 三栏布局：float
  11. 三栏布局：grid
  12. 三栏布局：table
  13. 等高布局：border+position
  14. 等高布局：padding+margin
  15. 等高布局：仿table
  16. 粘连布局

一、单列布局

1、单列布局：header-content-footer等宽

原理：将header-content-footer统一设置相等的width属性（屏幕小于属性值时会出现滚动条），或者max-width属性（屏幕小于属性值时不会出现滚动条），然后设置margin: 0 auto实现居中效果

效果：


单列布局-等宽

代码：访问

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>header-content-footer等宽的单列布局</title>
    <style>
        .wrap .header {
            height: 64px;
            max-width: 960px;
            background-color: skyblue;
            margin: 0 auto;

            line-height: 64px;
            text-align: center;
        }

        .wrap .content {
            height: 500px;
            max-width: 960px;
            background-color: #f60;
            margin: 0 auto;

            line-height: 500px;
            text-align: center;
        }

        .wrap .footer {
            height: 64px;
            max-width: 960px;
            background-color: #66595e;
            margin: 0 auto;

            line-height: 64px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="header">头上一片青天</div>
    <div class="content">心中一份挂念</div>
    <div class="footer">敢问路在何方</div>
</div>
</body>
</html>

2、单列布局：header-footer等宽,content略窄的单列布局

原理：header-footer内容宽度可以不设置，利用块级元素充满整个屏幕，但是header-conter-footer的内容区设置等width,并用margin:0 auto实现居中。

效果：


单列布局-不等宽

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>header-footer等宽，content窄的单列布局</title>
    <style>
        .wrap .header {
            height: 80px;
            max-width: 960px;
            background-color: blue;
            position: relative;
        }

        .wrap .header .nav {
            height: 64px;
            max-width: 800px;
            background-color: skyblue;

            line-height: 64px;
            margin: auto;
            text-align: center;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

        .wrap .content {
            height: 500px;
            max-width: 800px;
            background-color: #f60;
            margin: 0 auto;

            line-height: 500px;
            text-align: center;
        }

        .wrap .footer {
            height: 64px;
            max-width: 960px;
            background-color: #66595e;
            margin: 0 auto;

            line-height: 64px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="header">
        <div class="nav">头上一片青天</div>
    </div>
    <div class="content">心中一份挂念</div>
    <div class="footer">敢问路在何方</div>
</div>
</body>
</html>

二、两列自适应布局

两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式

1、两列自适应布局：float + overflow:hidden

- 普通两列布局：float + margin
- 自适应的两列布局：float + overflow:hidden

自适应的两列布局，通过overflow触发BFC，BFC不会重叠浮动元素。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性，所以需要设置zoom:1来兼容IE6-浏览器。

效果：


两列自适应布局：float + overflow:hidden
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>两列自适应布局:float+overflow:hidden </title>
    <style>
        .wrap {
            overflow: hidden;
        }

        .left {
            background-color: cyan;
            margin-right: 10px;
            float: left;
        }

        .right {
            background-color: aliceblue;
            margin-left: 10px;

            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="left">
        <h2>左青龙</h2>
        <h2>左青龙</h2>
        <h2>左青龙</h2>
        <h2>左青龙</h2>
        <h2>左青龙</h2>
    </div>
    <div class="right">
        <h2>右白虎</h2>
        <h2>右白虎</h2>
        <h2>右白虎</h2>
        <h2>右白虎</h2>
        <h2>右白虎</h2>
    </div>
</div>
</body>
</html>

2、两列自适应布局：flex布局

Flex布局，也叫弹性盒子布局。

效果：

两列自适应布局-flex布局
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>两列自适应布局:flex</title>
    <style>
        .wrap {
            display: flex;
        }

        .left {
            background-color: cyan;
            margin-right: 10px;
            
            flex: 1; // 去掉则左边为自适应大小
        }

        .right {
            background-color: aliceblue;
            margin-left: 10px;

            flex: 1;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="left">
        <h2>左青龙</h2>
        <h2>左青龙</h2>
        <h2>左青龙</h2>
        <h2>左青龙</h2>
        <h2>左青龙</h2>
    </div>
    <div class="right">
        <h2>右白虎</h2>
        <h2>右白虎</h2>
        <h2>右白虎</h2>
        <h2>右白虎</h2>
        <h2>右白虎</h2>
    </div>
</div>
</body>
</html>

3、两列自适应布局：grid布局

Grid布局，基于网格的二维布局系统，用来优化用户界面设计。

效果：

两列自适应布局-grid布局
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>两列自适应布局:grid</title>
    <style>
        .wrap {
            display: grid;
            grid-gap: 20px;
            /*grid-template-columns: auto 1fr; // 左自适应+右铺满*/
            grid-template-columns: 1fr auto; // 右自适应+左铺满
        }

        .left {
            background-color: cyan;
        }

        .right {
            background-color: aliceblue;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="left">
        <h2>左青龙</h2>
        <h2>左青龙</h2>
        <h2>左青龙</h2>
        <h2>左青龙</h2>
        <h2>左青龙</h2>
    </div>
    <div class="right">
        <h2>右白虎</h2>
        <h2>右白虎</h2>
        <h2>右白虎</h2>
        <h2>右白虎</h2>
        <h2>右白虎</h2>
    </div>
</div>
</body>
</html>

三、三栏布局

特征：中间列自适应宽度，旁边两侧固定宽度

案例：高度已知，其中左栏、右栏宽度各为200px,中间自适应，

1、浮动布局

原理：左边栏float:left， 右边栏float: right， 中间不管。

效果：


三栏布局-浮动布局

]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三栏布局：float布局</title>
    <style>
        * {
            margin: 0;
        }
        aside.left {
            background-color: seagreen;
            float: left;
            width: 200px;
        }

        aside.right {
            background-color: whitesmoke;
            float: right;
            width: 200px;
        }

        article.center {
            background-color: bisque;
        }
    </style>
</head>
<body>
<main>
    <aside class="left">
        <h2>左青龙</h2>
        <h2>左青龙</h2>
        <h2>左青龙</h2>
        <h2>左青龙</h2>
        <h2>左青龙</h2>
    </aside>
    <!-- 右栏部分要写在中间内容之前-->
    <!-- 右栏部分要写在中间内容之前-->
    <!-- 右栏部分要写在中间内容之前-->
    <aside class="right">
        <h2>右白虎</h2>
        <h2>右白虎</h2>
        <h2>右白虎</h2>
        <h2>右白虎</h2>
        <h2>右白虎</h2>
    </aside>

    <article class="center">
        <h2>中间住着二百五</h2>
        <h2>中间住着二百五</h2>
        <h2>中间住着二百五</h2>
        <h2>中间住着二百五</h2>
        <h2>中间住着二百五</h2>
    </article>

</main>
</body>
</html>

浮动布局，DOM结构必须先写浮动部分，然后中间块，否则有浮动会调到下一行。
浮动布局的优点：简单，兼容性好
浮动布局的缺点：浮动布局脱离文档流，需要清除浮动，否则会带来问题，比如：父容器高度塌陷等。

2、绝对定位布局

原理：left-center-right均绝对定位，然后设置中间栏的left和right属性为左右留出空间。

效果：

三栏布局-绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三栏布局：绝对定位布局</title>
    <style>
        * {
            margin: 0;
        }
        .left,.center,.right{
            position: absolute;
            height: 400px;
        }
        aside.left {
            background-color: bisque;
            left: 0;
        }

        article.center {
            background-color: aliceblue;
            left: 200px;
            right: 200px;
        }

        aside.right {
            background-color: whitesmoke;
            right: 0;
        }
    </style>
</head>
<body>
<main class="wrap">
    <aside class="left">
        <h3>有人喜欢大城市</h3>
    </aside>
    <article class="center">
        <h3>有人喜欢小城市</h3>
    </article>
    <aside class="right">
        <h3>我喜欢有你的城市</h3>
    </aside>
</main>
</body>
</html>

绝对定位布局，优点：方便快捷，问题少
缺点：容器脱离文档流，后代元素也脱离文档流，高度位置的时候，有问题，故该法有效性和可用性比较差。

3、flex布局

原理：直接设置父容器display:flex

效果：

三栏布局-flex布局
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三栏布局：flex布局</title>
    <style>
        *{
            margin: 0;
        }
        main.wrap{
            display: flex;
        }
        .left,.center,.right{
            height: 500px;
        }
        aside.left{
            background-color: #a5f5c7;
            width: 200px;
        }
        article.center{
            background-color: skyblue;
            flex: 1;
        }
        aside.right{
            background-color: #ff88b2;
            width: 200px;
        }
    </style>
</head>
<body>
<main class="wrap">
    <aside class="left">
        <h3>你站在桥上看风景，</h3>
    </aside>
    <article class="center">
        <h3>看风景人在楼上看你。</h3>
    </article>
    <aside class="right">
        <h3>明月装饰了你的窗子，</h3>
        <h3>你装饰了别人的梦。</h3>
    </aside>
</main>
</body>
</html>

flex布局为了解决上述两种方式的不足出现的，是比较完美的一个。目前移动端的布局也都是用flex。 flex的缺点就是IE10开始支持，但是IE10的是-ms形式的。

4、表格布局

原理：直接设置父容器display:table,子容器display:table-cell

效果：

三栏布局-table布局
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三栏布局：table布局</title>
    <style>
        *{
            margin: 0;
        }
        main.wrap{
            display: table;
            width: 100%;
        }
        .left,.center,.right{
            height: 500px;
            display: table-cell;
        }
        aside.left{
            background-color: #a5f5c7;
            width: 200px;
        }
        article.center{
            background-color: skyblue;
        }
        aside.right{
            background-color: #ff88b2;
            width: 200px;
        }
    </style>
</head>
<body>
<main class="wrap">
    <aside class="left">
        <h3>我还是很喜欢你，</h3>
    </aside>
    <article class="center">
        <h3>像风走了八千里，</h3>
    </article>
    <aside class="right">
        <h3>不问归期。</h3>
    </aside>
</main>
</body>
</html>

表格布局的优点：兼容性很好，在flex布局不兼容的时候，推荐用表格布局。有个特点，当内容溢出时会自动撑开父容器。
缺点：1、无法设置栏边距 2、对SEO不友好 3、当其中一个单元格超出高度时，另外两个栏也会跟着变高。

5、grid布局

原理：直接设置父容器display:grid

效果：

三栏布局-grid布局
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三栏布局：grid布局</title>
    <style>
        *{
            margin: 0;
        }
        main.wrap{
            display: grid;
            grid-template-columns: 200px auto 200px;
            grid-template-rows: 500px;
        }
        .left,.center,.right{
            /*height: 500px;*/
        }
        aside.left{
            background-color: #a5f5c7;
        }
        article.center{
            background-color: skyblue;
        }
        aside.right{
            background-color: #ff88b2;
        }
    </style>
</head>
<body>
<main class="wrap">
    <aside class="left">
        <h3>我还是很喜欢你，</h3>
    </aside>
    <article class="center">
        <h3>像吃了花椒的邻居，</h3>
    </article>
    <aside class="right">
        <h3>麻了隔壁。（😂）</h3>
    </aside>
</main>
</body>
</html>

优点：CSS Grid是创建网格布局最强大和最简单的工具。就像表格一样，网格布局可以让Web设计师根据元素按列或行对齐排列，但他和表格不同，网格布局没有内容结构，从而使各种布局不可能与表格一样。例如，一个网格布局中的子元素都可以定位自己的位置，这样他们可以重叠和类似元素定位。
缺点：兼容性不好。IE10+上支持，而且也仅支持部分属性。

6、圣杯布局

特点：比较特殊的三栏布局，同样也是两边固定宽度，中间自适应，唯一区别是dom结构必须是先写中间列部分，这样实现中间列可以优先加载。

原理解读：

  • 1.全部设置float: left,center设置width:100%自适应，left和right设置width:200px固定尺寸。此时，left和right部分会跳到下一行
    三栏布局-圣杯布局1
<style>
        * {
            margin: 0;
        }
        .left, .center, .right {
            height: 200px;
            /*全部float：left*/
            float: left;
        }

        article.center {
            background-color: skyblue;
            width: 100%;
            height: 300px;
        }

        aside.left {
            background-color: #a5f5c7;
            width: 200px;
        }

        aside.right {
            background-color: #ff88b2;
            width: 200px;
        }
    </style>
  • 2.再设置左右的margin为负值，让左右部分与中间处于同一行。此时，左右会浮在中间上方，覆盖中间部分。
三栏布局-圣杯布局2
<style>
        * {
            margin: 0;
        }
        .left, .center, .right {
            height: 200px;
            /*全部float：left*/
            float: left;
        }

        article.center {
            background-color: skyblue;
            width: 100%;
        }

        aside.left {
            background-color: #a5f5c7;
            width: 200px;
            
            margin-left: -100%;
        }

        aside.right {
            background-color: #ff88b2;
            width: 200px;
            
            margin-left: -200px;
        }
    </style>

  • 3.再设置中间的padding-left和padding-right为左右预留空间。


    三栏布局-圣杯布局3
<style>
        * {
            margin: 0;
        }
        main.wrap {
            /*给左右栏预留空间*/
            padding-left: 200px;
            padding-right: 200px;
        }
        .left, .center, .right {
            height: 200px;
            /*全部float：left*/
            float: left;
        }

        article.center {
            background-color: skyblue;
            width: 100%;
        }

        aside.left {
            background-color: #a5f5c7;
            width: 200px;
            
            margin-left: -100%;
        }

        aside.right {
            background-color: #ff88b2;
            width: 200px;
            
            margin-left: -200px;
        }
    </style>

  • 4.最后，将左右移动到预留空间的位置处。


    三栏布局-圣杯布局1
<style>
        * {
            margin: 0;
        }

        main.wrap {
            /*给左右栏预留空间*/
            padding-left: 200px;
            padding-right: 200px;
        }

        .left, .center, .right {
            height: 200px;
            /*全部float：left*/
            float: left;
        }

        article.center {
            background-color: skyblue;
            width: 100%;
            /*height: 300px;*/
        }

        aside.left {
            background-color: #a5f5c7;
            width: 200px;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }

        aside.right {
            background-color: #ff88b2;
            width: 200px;
            margin-left: -200px;
            position: relative;
            right: -200px;
        }
    </style>

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三栏布局：圣杯布局</title>
    <style>
        * {
            margin: 0;
        }

        main.wrap {
            /*给左右栏预留空间*/
            padding-left: 200px;
            padding-right: 200px;
        }

        .left, .center, .right {
            height: 200px;
            /*全部float：left*/
            float: left;
        }

        article.center {
            background-color: skyblue;
            width: 100%;
            /*height: 300px;*/
        }

        aside.left {
            background-color: #a5f5c7;
            width: 200px;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }

        aside.right {
            background-color: #ff88b2;
            width: 200px;
            margin-left: -200px;
            position: relative;
            right: -200px;
        }
    </style>
</head>
<body>
<main class="wrap">
    <!--先先写中间部分-->
    <!--先先写中间部分-->
    <!--先先写中间部分-->
    <article class="center">
        <h3>像吃了花椒的邻居，</h3>
    </article>

    <aside class="left">
        <h3>我还是很喜欢你，</h3>
    </aside>

    <aside class="right">
        <h3>麻了隔壁。（😂）</h3>
    </aside>
</main>
</body>
</html>

圣杯布局的缺点：center部分的最小宽度不能小于left部分的宽度，否则会left部分掉到下一行
如果其中一列内容高度拉长，其他两列的背景并不会自动填充。(借助等高布局正padding+负margin可解决，下文会介绍)

7、双飞翼布局

特点：同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。而且任何一栏都可以是最高栏，不会出问题。

原理解读(前两步与圣杯布局一样)：

  • 1.三个部分都设定为左浮动，然后设置center的宽度为100%，此时，left和right部分会跳到下一行；
  • 2.通过设置margin-left为负值让left和right部分回到与center部分同一行；
  • 3.center部分增加一个内层div，并设margin: 0 200px（左右的宽度）；

效果：


三栏布局：双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三栏布局：双飞翼布局</title>
    <style>
        * {
            margin: 0;
        }

        main.wrap {
        /*确保中间内容可以显示出来，2*left宽+right宽*/
            min-width: 600px;
        }

        .left, .center, .right {
            height: 200px;
            /*全部float：left*/
            float: left;
        }

        article.center {
            background-color: skyblue;
            width: 100%;
            height: 500px;
        }
        article.center .inner{
        /*新增部分*/
            margin: 0 200px;
        }
        aside.left {
            background-color: #a5f5c7;
            width: 200px;
            height: 400px;
            margin-left: -100%;
        }

        aside.right {
            background-color: #ff88b2;
            width: 200px;
            height: 400px;
            margin-left: -200px;
        }
    </style>
</head>
<body>
<main class="wrap">
    <!--先写中间部分-->
    <!--先写中间部分-->
    <!--先写中间部分-->
    <article class="center">
        <div class="inner">
            <h3>像吃了花椒的邻居，</h3>
        </div>
    </article>

    <aside class="left">
        <h3>我还是很喜欢你，</h3>
    </aside>

    <aside class="right">
        <h3>麻了隔壁。（😂）</h3>
    </aside>
</main>
</body>
</html>

双飞翼布局缺点：多加一层 dom 树节点，增加渲染树生成的计算量。

圣杯布局 vs 双飞翼布局:

  • 两种布局方式都是把主列放在文档流最前面，使主列优先加载。
  • 两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过左右负外边距形成三列布局。
  • 两种布局方式的不同之处在于如何处理中间主列的位置：
  • 圣杯布局是利用父容器的左、右内边距+两个从列相对定位；
  • 双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整

四、等高布局

等高布局是指子元素在父元素中高度相等的布局方式。接下来我们介绍常见几种实现方式：

1、利用正padding+负margin

原理：
在圣杯布局基础上，设置一个大数值的 padding-bottom，再设置相同数值的负的 margin-bottom，并在所有列外面加上一个容器，并设置 overflow:hidden 把溢出背景切掉。解决圣杯布局的第二个缺点。

新增代码如下：

  .center,
  .left,
  .right {
    padding-bottom: 10000px;
    margin-bottom: -10000px;
  }
  .wrap {
    <!--把溢出背景切掉-->
    overflow: hidden;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三栏布局：等高布局（利用正padding+负margin）</title>
    <style>
        * {
            margin: 0;
        }

        main.wrap {
            /*给左右栏预留空间*/
            padding-left: 200px;
            padding-right: 200px;

            /*新增代码*/
            overflow: hidden;
        }

        .left, .center, .right {
            height: 200px;
            /*全部float：left*/
            float: left;

            /*新增代码*/
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }

        article.center {
            background-color: skyblue;
            width: 100%;
            height: 300px;
        }

        aside.left {
            background-color: #a5f5c7;
            width: 200px;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }

        aside.right {
            background-color: #ff88b2;
            width: 200px;
            margin-left: -200px;
            position: relative;
            right: -200px;
        }
    </style>
</head>
<body>
<main class="wrap">
    <!--先先写中间部分-->
    <!--先先写中间部分-->
    <!--先先写中间部分-->
    <article class="center">
        <h3>像吃了花椒的邻居，</h3>
    </article>

    <aside class="left">
        <h3>我还是很喜欢你，</h3>
    </aside>

    <aside class="right">
        <h3>麻了隔壁。（😂）</h3>
    </aside>
</main>
</body>
</html>

2、利用背景图片（不可取）

原理：这是实现等高列最早使用的一种方法，就是使用背景图片，在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假象。实现方法简单，兼容性强，不需要太多的css样式就可以轻松实现,但此方法不适合流体布局等高列的布局。
但是需要一张背景图片，例如：


背景图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三栏布局：等高布局（利用bg img）</title>
    <style>
        * {
            margin: 0;
        }

        main.wrap {
            /*注意img必须足够宽*/
            background: url("../img/bg.png") repeat-y;
            width: 100%;
            height: 500px;
            margin: 0 auto;
        }

        .left, .center, .right {
            float: left;
        }

        article.center {
            /*background-color: skyblue;*/
            width: calc(100% - 200px - 200px);
        }

        aside.left {
            /*background-color: #a5f5c7;*/
            width: 200px;
        }

        aside.right {
            /*background-color: #ff88b2;*/
            width: 200px;
        }
    </style>
</head>
<body>
<main class="wrap clearfix">
    <aside class="left">
        <h3>我还是很喜欢你，</h3>
    </aside>

    <article class="center">
        <h3>像吃了花椒的邻居，</h3>
    </article>

    <aside class="right">
        <h3>麻了隔壁。（😂）</h3>
    </aside>
</main>
</body>
</html>

3、模仿表格布局

这是一种非常简单，易于实现的方法。不过兼容性不好，在ie6-7无法正常运行。

效果：

等高布局-仿表格布局
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三栏布局：等高布局（仿table）</title>
    <style>
        .table{
            display: table;
            width: auto;
            min-width: 1000px;
            margin: 0 auto;
            height: 500px;
        }
        .table-row{
            display: table-row;
        }
        .table-cell{
            display: table-cell;
            height: 100%;
        }

        .cel-left{
            background: #ff88b2;
            width: 20%;
        }
        .cel-center{
            background: #a5f5c7;
            width: 60%;
        }
        .cel-right{
            background: skyblue;
            width: 20%;
        }
    </style>
</head>
<body>
<div class="table">
    <div class="table-row">
        <div class="table-cell cel-left">
            <div class="left">每一个不曾起舞的日子，</div>
        </div>
        <div class="table-cell cel-center">
            <div class="center">都是对生命的辜负！</div>
        </div>
        <div class="table-cell cel-right">
            <div class="right">加油骚年！</div>
        </div>
    </div>
</div>
</body>
</html>

4、使用border和positon

使用边框和绝对定位来实现一个假的高度相等列的效果。结构简单，兼容各浏览器，容易掌握。假设你需要实现一个两列等高布局，侧栏高度要和主内容高度相等。

效果：

等高布局-使用border和position
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三栏布局：等高布局（border+position）</title>
    <style>
        .wrap{
            width: 1200px;
            margin: 0 auto;
        }
        .left{
            background: #50c5f5;
            position: absolute;
            width: 200px;
            height:500px;
        }
        .center{
            background: #ff6600;
            border-right: 200px solid #50c5f5;
            border-left: 200px solid #f5cabb;
            position: absolute;
            width: 800px;
            height: 500px;
        }
        .right{
            background: #f5cabb;
            position: absolute;
            width: 200px;
            height:500px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
</body>
</html>

五、粘连布局

  • 1、特点：

    • 有一块内容<main>，当<main>的高康足够长的时候，紧跟在<main>后面的元素<footer>会跟在<main>元素的后面。
    • 当<main>元素比较短的时候(比如小于屏幕的高度),我们期望这个<footer>元素能够“粘连”在屏幕的底部

  • 2、实现步骤：

    • (1)footer必须是一个独立的结构，与wrap没有任何嵌套关系
    • (2)wrap区域的高度通过设置min-height，变为视口高度
    • (3)footer要使用margin为负来确定自己的位置
    • (4)在main区域需要设置 padding-bottom。这也是为了防止负 margin 导致 footer 覆盖任何实际内容。

效果：

<main>不够长的时候：

粘连布局-不够长

<main>足够长的时候：

粘连布局-够长
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>粘连布局（main足够长）</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            /*高度一层层继承下来*/
            height: 100%;
        }
        .wrap{
            min-height: 100%;
            background: pink;
            text-align: center;
            overflow: hidden;
        }
        .wrap .main {
            padding-bottom: 50px;
            background: #a5f5c7;
        }
        .footer {
            height: 50px;
            line-height: 50px;
            background: deeppink;
            text-align: center;
            margin-top: -50px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="main">
        <h3>我不够长</h3>
        <h3>我不够长</h3>
        <h3>我不够长</h3>
        <h3>我不够长</h3>
        <h3>我不够长</h3>
    </div>
</div>

<div class="footer">我是有底线的</div>
</body>
</html>

参考文章

参见大神的文章浪里行舟

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,088评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,715评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,361评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,099评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 60,987评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,063评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,486评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,175评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,440评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,190评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,550评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2赞 335

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,703评论 1赞 92
  • web前端教程：CSS 布局十八般武艺都在这里了
    CSS布局 布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单...
    web前端学习阅读 1,584评论 1赞 38
  • css布局使用
    目录 常用居中垂直居中水平居中垂直水平居中 单列布局 双列&三列布局 常用居中 垂直居中 单行文本垂直居中 图片垂...
    听城阅读 420评论 1赞 2
  • 几种常见的 CSS 布局
    本文概要 本文将介绍如下几种常见的布局： 单列布局 两列自适应布局 圣飞布局和双飞翼布局 伪等高布局 粘连布局 一...
    庆庆_ce88阅读 397评论 0赞 2
  • docker 常用操作
    如何给容器指定一个固定 IP 地址，而不是每次重启容器 IP 地址都会变？ 答：使用以下命令启动容器可以使容器 I...
    燕凯凯阅读 654评论 0赞 0