CSS布局简介

最新推荐文章于 2022-03-07 17:07:36 发布

weixin_46370867

最新推荐文章于 2022-03-07 17:07:36 发布

阅读量101

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_46370867/article/details/109190068

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

下面是对页面布局的简单总结，希望可以帮助到有需要的小伙伴。

一、两列布局

两列布局：

一列是定宽的, 另一列是自适应的。

其中一列是定宽：将该元素的宽度设置为固定的宽度

其中一列是自适应: 除了定宽之外所有的宽度都为第二列

第一种两列布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一种两列布局</title>
    <style>
        .parent {
            width: 800px;
            height: 300px;
            border: 1px solid #000;
            }

        /* 其中一列是定宽 */
        .left {
            width: 200px;
            height: 300px;
            background-color:darkmagenta;

            float: left;
            }

        /* 其中一列是自适应 */
        .right {
            /* 当前元素的默认宽度为父级元素宽度的100% */
            height: 300px;
            background-color:cornflowerblue;

            /* 耦合度高: margin-left属性的值与另一列的width属性的值有关 */
            margin-left: 200px;  
            /* 定宽的一列是宽度是200px，第2列要向右移动200px*/
            }

    </style>
</head>
<body>
    <div class="parent">
        <div class="left"></div>
        <div class="right"></div>
      </div>
</body>
</html>

第一种两列布局参考版：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一种两列布局参考版</title>
    <style>
        .parent {
            width: 800px;
            height: 300px;
            border: 1px solid #000;
        }

        /* 其中一列是定宽 */
        .left {
            width: 200px;
            height: 300px;
            background-color: aquamarine;

            float: left;
            position: relative;
        }

        /* 作为右列的容器进行设置 */
        .right-fix {
            /* 把width属性值设置为100%时，表示父级元素宽度的100% */
            width: 100%;
            float: right;
            margin-left: -200px;
        }

        /* 其中一列是自适应 */
        .right {
            height: 300px;
            background-color: cadetblue;

            margin-left: 200px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="left"></div>
        <!-- 增加一层容器 -->
        <div class="right-fix">
            <div class="right"></div>
        </div>
    </div>
</body>
</html>

第二种两列布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第二种两列布局</title>
    <style>
        .parent {
            width: 800px;
            height: 300px;
            border: 1px solid #000;
        }

        /* 其中一列是定宽 */
        .left {
            width: 200px;
            height: 300px;
            background-color: aquamarine;

            float: left;
        }

        /* 其中一列是自适应 */
        .right {
            /* 当前元素默认是宽度为父级元素宽度的100% */
            height: 300px;
            background-color: blueviolet;
            /* 开启BFC：创建出一个完全隔离的空间 */
            overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="parent">
        <div class="left"></div>
        <div class="right"></div>
      </div>
</body>
</html>

第三种两列布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第三种两列布局</title>
    <style>
        .parent {
            width: 800px;
            height: 300px;
            border: 1px solid #000;
            /* 改变了父级元素的显示类型 */
            display: table;
            table-layout: fixed;
        }

        .left,
        .right {
            display: table-cell;
        }

        /* 其中一列是定宽 */
        .left {
            width: 200px;
            height: 300px;
            background-color: brown;
        }

        /* 其中一列是自适应 */
        .right {
            /* 当前元素的默认宽度为父级元素宽度的100% */
            height: 300px;
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

第三种两列布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第三种两列布局</title>
    <style>
        .parent {
            width: 800px;
            height: 300px;
            border: 1px solid #000;
            /* 改变了父级元素的显示类型 */
            display: table;
            table-layout: fixed;
        }

        .left,
        .right {
            display: table-cell;
        }

        /* 其中一列是定宽 */
        .left {
            width: 200px;
            height: 300px;
            background-color: brown;
        }

        /* 其中一列是自适应 */
        .right {
            /* 当前元素的默认宽度为父级元素宽度的100% */
            height: 300px;
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

二、三列布局

定宽 – 定宽 – 自适应

三列布局的第一种情况：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三列布局的第一种方法</title>
    <style>
        .parent {
            width: 800px;
            height: 300px;
            border: 1px solid #000;
            /* 改变了父级元素的显示类型 */
            display: table;
            table-layout: fixed;
        }

        .left,
        .center,
        .right {
            display: table-cell;
        }

        .left,
        .center {
            width: 200px;
            height: 300px;
        }

        .left {
            background-color: burlywood;
        }

        .center {
            background-color: cadetblue;
        }

        .right {
            /* 宽度自适应 */
            height: 300px;
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <!-- 定宽+定宽+自适应 -->
  <div class="parent">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>
</body>
</html>

三列布局的第二种情况：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三列布局的第二种情况</title>
    <style>
        .parent {
            width: 800px;
            height: 300px;
            border: 1px solid #000;
        }

        .left,
        .center,
        .right {
            height: 300px;
        }

        .left,
        .right {
            margin-top: -300px;
        }

        .left {
            background-color: darkcyan;

            width: 200px;
            float: left;
        }

        .center {
            /* 问题：默认宽度是父级元素的宽度100% */
            background-color: darkgoldenrod;
            margin: 0 300px 0 200px;
        }

        .right {
            background-color: darkgray;
            width: 300px;
            float: right;
        }
    </style>
</head>
<body>
    <!-- 第二种三列布局：自适应这一列为HTML页面的主要内容 -->
    <div class="parent">
        <!-- 自适应：一般希望搜索引擎抓取主要内容 -->
        <div class="center"></div>
        <!-- 定宽 -->
        <div class="left"></div>
        <!-- 定宽 -->
        <div class="right"></div>
    </div>
</body>
</html>

三、等分布局

等分布局是指子元素平均分配父元素宽度的布局方式

第一种实现等分布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一种实现等分布局</title>
    <style>
        .parent {
            width: 800px;
            height: 300px;
            border: 1px solid #000;
        }

        .column {
            /* 百分比实现等分效果：列数可能没有办法被100%整除 */
            width: 25%;
            height: 300px;
            float: left;
        }

        .column:nth-of-type(1) {
            background-color: darkgray;
        }

        .column:nth-of-type(2) {
            background-color: darkgreen;
        }

        .column:nth-of-type(3) {
            background-color: darkkhaki;
        }

        .column:nth-of-type(4) {
            background-color: darkslateblue;
        }

        
    </style>
</head>
<body>
    <div class="parent">
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
    </div>
</body>
</html>

第二种实现等分布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第二种实现等分布局</title>
    <style>
        .parent {
            width: 800px;
            height: 300px;
            border: 1px solid #000;

            display: table;
            table-layout: fixed;
        }

        .column {
            /* 
                用于表格的单元格宽度是自动分配的：
                * 每一列的内容结构保持一致
             */

             display: table-cell;
             height: 300px;
        }

        .column:nth-of-type(1) {
            background-color: lightpink;
        }

        .column:nth-of-type(2) {
            background-color: lightskyblue;
        }

        .column:nth-of-type(3) {
            background-color: mediumaquamarine;
        }

        .column:nth-of-type(4) {
            background-color: mediumslateblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
    </div>
</body>
</html>

四、空白间隙的等分布局

第一种空白间隙的等分布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一种空白间隙的等分布局</title>
    <style>
        .parent {
            width: 800px;
            height: 300px;
            border: 1px solid #000;

            display: table;
            table-layout: fixed;
            /* 空白间隙 */
            border-spacing: 5px;
        }

        .column {
            /* 
                利用表格的单元格宽度是自动分配的：
                 每一列的内容结构保持一致
             */
             display: table-cell;
             height: 300px;
        }

        .column:nth-of-type(1) {
            background-color: mediumslateblue;
        }

        .column:nth-of-type(2) {
            background-color: navajowhite;
        }

        .column:nth-of-type(3) {
            background-color: orchid;
        }

        .column:nth-of-type(4) {
            background-color: palegreen;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
    </div>
</body>
</html>

第二种等分间隙的等分布局:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第二种等分间隙的等分布局</title>
    <style>
        .parent {
            width: 800px;
            height: 300px;
            border: 1px solid #000;

            overflow: hidden;
        }

        .parent-fix {
            overflow: hidden;
            margin: 0 -5px 0 -5px;
        }

        .column {
            width: 25%;
            float: left;

            box-sizing: border-box;
            /* 保证内容是水平方向居中的 */
            padding: 0 5px;
        }

        .child {
            height: 300px;
        }

        .column:nth-of-type(1) .child {
            background-color: palegreen;
        }

        .column:nth-of-type(2) .child {
            background-color: paleturquoise;
        }

        .column:nth-of-type(3) .child {
            background-color: palevioletred;
        }

        .column:nth-of-type(4) .child {
            background-color: peachpuff;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="parent-fix">
            <div class="column">
                <div class="child"></div>
            </div>
            <div class="column">
                <div class="child"></div>
            </div>
            <div class="column">
                <div class="child"></div>
            </div>
            <div class="column">
                <div class="child"></div>
            </div>
        </div>
    </div>
</body>
</html>

五、等高布局

第一种实现等高布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一种实现等高布局</title>
    <style>
        .parent {
            width: 800px;
            height: 300px;
            border: 1px solid #000;

            display: table;
            table-layout: fixed;
        }

        .left,
        .right {
            display: table-cell;
        }

        .left {
            width: 200px;
            background-color: peachpuff;
        }

        .right {
            background-color: peru;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

第二种实现等高布局(伪等高)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第二种实现等高布局(伪等高)</title>
    <style>
        .parent {
            width: 800px;
            height: 300px;
            border: 1px solid #000;

            overflow: hidden;
        }

        .left,
        .right {
            padding-bottom: 9999px;
        }

        .left {
            width: 200px;
            float: left;
            background-color: plum;
        }

        .right {
            overflow: hidden;
            background-color: powderblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="left">I don’t know what that dream is that you have. 
            I don’t care how disappointing it might be as you’re working toward 
            hat dream. But that dream that you’re holding in your mind – it’s possible. 
            Some of you already know that it’s hard. It’s not easy. It’s hard changing 
            your life. In the process of chasing your dreams, you are going to incur a lot 
            isappointment, a lot of failure,
             a lot of pain.</div>
        <div class="right">
            There will be moments when you are going to doubt yourself. 
            You’ll say, “Why? Why is this happening to me? I’m just trying to take care of
             my children, and my mother. I’m not trying to steal or rob from anybody. How 
             did this have to happen to me?” For those of you who have experienced some
              hardships – don’t give up on The rough times are gonna come, but they will not stay,  
             they will come to pass.
        </div>
    </div>
</body>
</html>

六、全屏布局

第一种全屏布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>第一种全屏布局</title>
    <style>
        body {
            margin: 0;
            padding: 0;

            overflow: hidden;
        }

        .header,
        .center,
        .footer {
            width: 100%;
            position: fixed;
        }

        .header {
            /* 当前元素的默认宽度就是父级元素宽度的100% */
            height: 50px;

            top: 0;

            background-color: blueviolet;
        }

        .center {
            height: 100%;
             top: 50px;
             bottom: 100px;
        }

        .center .left {
            width: 200px;
            height: 100%;

            float: left;

            background-color: burlywood;
        }

        .center .right {
            height: 100%;
            overflow: hidden;
            background-color: cornflowerblue;
        }

        .page {
            width: 100%;
            height: 1000px;
        }

        .footer {
      height: 100px;

      bottom: 0;

      background-color: lightsalmon;
    }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="header"></div>
    <!-- 中间内容区 -->
    <div class="center">
        <div class="left"></div>
        <div class="right">
            <div class="page"></div>
        </div>
    </div>
    <!-- 底部信息 -->
    <div class="footer"></div>
</body>
</html>

第二种全屏布局:

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>第二种全屏布局</title>
  <style>
    html,
    body {
      height: 100%;
    }

    body {
      margin: 0;
      padding: 0;

      overflow: hidden;
    }

    .left {
      width: 200px;
      height: 100%;

      position: fixed;
      left: 0;
      z-index: 2;

      background-color:lightsalmon;
    }

    /* 作为右列的水平和垂直方向都是自适应的 */
    .right {
      height: 100%;

      overflow: hidden;

      background-color: yellow;
    }
  </style>
</head>

<body>
  <!-- 定宽 -->
  <div class="left"></div>
  <!-- 自适应 -->
  <div class="right">
    <div class="header"></div>
    <div class="center"></div>
    <div class="footer"></div>
  </div>
</body>

</html>

weixin_46370867

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS布局简介

五、两列布局两列布局：一列是定宽的, 另一列是自适应的。其中一列是定宽：将该元素的宽度设置为固定的宽度其中一列是自适应: 除了定宽之外所有的宽度都为第二列第一种两列布局：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.
复制链接

扫一扫