CSS几种常见的布局

发表于 更新于 分类于 阅读次数： Waline： 本文字数： 4.3k 阅读时长 ≈ 4 分钟

几种常见且基础的CSS布局

一. 单列布局

常见的单列布局有两种：

  • header,content和footer等宽的单列布局
  • header与footer等宽,content略窄的单列布局

  1. 第一种通过设置header、content、footer统一设置width：1000px;或者max-width：1000px即可实现。区别在于显示屏幕小于1000px时，前者会有滚动条出现，而后者不会（也就是说后者显示的是实际宽度）

    max-width 属性用来给元素设置最大宽度值. 定义了max-width的元素会在达到max-width值之后避免进一步按照width属性设置变大.

    max-width 会覆盖width设置, 但 min-width设置会覆盖 max-width.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .header {
            margin: 0 auto;
            width: 1960px;
            height: 100px;
            background: blue;
        }
        .content {
            margin: 0 auto;
            width: 1960px;
            height: 400px;
            background: red;
        }
        .footer {
            margin: 0 auto;
            width: 1960px;
            height: 100px;
            background: teal;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</body>
</html>

  2. 第二种可以给中间的content设置一个固定的width，然后header、content、footer都居中显示。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .header {
            margin: 0 auto;
            height: 100px;
            background: blue;
        }
        .content {
            margin: 100px auto 100px;
            height: 400px;
            width: 1000px;
            background: red;
        }
        .footer {
            margin: 0 auto;
            height: 100px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</body>
</html>

二. 两列布局

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

  1. 普通两列布局（单列定宽单列自适应），用浮动+margin即可

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left {
            float: left;
            width: 450px;
            height: 100px;
            background: blue;
        }
        .right {
            margin: 0 auto;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

  2. 两列自适应布局：float和overflow配合可实现两列自适应效果。使用overflow属性来触发bfc，来阻止浮动造成的文字环绕效果。

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p {
            margin: 0;
        }

        .content {
            height: 100px;
            background: grey;
            overflow: hidden;
        }

        .left {
            height: 100px;
            float: left;
            margin-right: 20px;
            background: red;
        }

        .right {
            height: 100px;
            overflow: hidden;
            background: green;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="left">
        </div>
        <div class="right">
        </div>
    </div>
</body>

</html>

  3. Flex布局：也叫弹性盒子布局，简单几行代码就可以实现各种页面的的布局。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content {
            display: flex;
            height: 100px;
            background: red;
        }
        .right {
            margin-left: 30px;
            height: 100px;
            flex: 1;
            background: blue;
        }
        .left {
            height: 100px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="left">
            <p>111111jlfdjlfjowejfoewjo</p>
        </div>
        <div class="right"></div>
    </div>
</body>
</html>

    3. 三栏布局

    三栏布局就是两边宽度固定,中间自适应的布局.

    改变浏览器的宽度,两边的宽度不会变,只会中间区域的宽度变长变短.

    流体布局：

    圣杯布局：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            padding-left: 220px;
            padding-right: 220px;
        }
        .main {
            float: left;
            width: 100%;
            height: 500px;
            background: lightgrey;
        }
        .left {
            float: left;
            width: 200px;
            height: 400px;
            margin-left: -100%;
            /* margin-left: -200px; */
            position: relative;
            left: -220px;
            background: lightblue;
        }
        .right {
            float: left;
            width: 200px;
            height: 400px;
            margin-left: -200px;
            /* margin-left: -100%; */
            /* margin-left中百分比是距离最近的块容器的宽度 width */
            /* 而px的话就是绝对距离 */
            position: relative;
            right: -220px;
            background: lightgreen;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>
------------- 本文结束 感谢阅读 -------------