什么是C++中的友元函数和友元类?

阅读 17

2024-11-19

伸缩盒模型

1 简介
2 伸缩项目与伸缩容器
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>伸缩项目</title>
    <style>
        .outer {
            width: 800px;
            height: 500px;
            background-color: aqua;
            display: flex;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
        }

        .inner3 {
            display: flex;
        }

        .inner3 {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner inner1"></div>
        <div class="inner inner2"></div>
        <div class="inner inner3">
            <div>a</div>
            <div>b</div>
            <div>c</div>
        </div>
    </div>
</body>

</html>
3 主轴与侧轴
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>主轴与侧轴</title>
    <style>
        .outer {
            width: 800px;
            height: 500px;
            background-color: aqua;
            display: flex;
            margin: 0 auto;

            /* 主轴默认值 */
            /* flex-direction: row; */

            /* 主轴反向 */
            /* flex-direction: row-reverse; */

            /* 侧轴默认值 */
            /* flex-direction: column; */

            /* 侧轴反方向 */
            flex-direction: column-reverse;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
    </div>
</body>

</html>
4 主轴换行
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>主轴换行方式</title>
    <style>
        .outer {
            width: 800px;
            height: 600px;
            background-color: green;
            display: flex;
            margin: 0 auto;

            /* 不换行,默认 */
            /* flex-wrap: nowrap; */

            /* 自动换行 */
            /* flex-wrap: wrap; */

            /* 反向换行 */
            flex-wrap: wrap-reverse;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
        <div class="inner">4</div>
        <div class="inner">5</div>
        <div class="inner">6</div>
    </div>
</body>

</html>
5 主轴对齐方式
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>主轴换行方式</title>
    <style>
        .outer {
            width: 800px;
            height: 600px;
            background-color: green;
            display: flex;
            margin: 0 auto;

            flex-wrap: wrap;

            /* 对齐在主轴的开始位置 */
            /* justify-content: start; */

            /* 对齐在主轴的结束位置 */
            /* justify-content: end; */

            /* 对齐在主轴的中间位置 */
            /* justify-content: center; */

            /* 均匀的分布在一行,项目之间的距离是项目与边缘的二倍 */
            /* justify-content: space-around; */

            /* 均匀的分布在一行,项目之间的距离均匀分布,项目与边缘的距离为零 */
            /* justify-content: space-between */

            /* 均匀的分布在一行 */
            justify-content: space-evenly;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
    </div>
</body>

</html>
6 侧轴对齐方式
6.1 一行
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>侧轴对齐方式(一行)</title>
    <style>
        .outer {
            width: 800px;
            height: 600px;
            background-color: rgb(63, 211, 206);
            display: flex;
            margin: 0 auto;

            flex-wrap: wrap;
            flex-direction: row;
            justify-content: flex-start;

            /* 居中对齐 */
            align-items: center;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;
        }

        .inner2 {
            height: 300px;
        }

        .inner3 {
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
    </div>
</body>

</html>
6.2 多行
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>侧轴对齐方式(多行)</title>
    <style>
        .outer {
            width: 800px;
            height: 700px;
            background-color: rgb(63, 211, 206);
            display: flex;
            margin: 0 auto;

            flex-wrap: wrap;
            flex-direction: row;
            justify-content: flex-start;

            /* 拉伸对齐 */
            align-content: stretch;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;
        }

        .inner2 {
            height: 300px;
        }

        .inner3 {
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner1">1</div>
        <div class="inner inner3">3</div>
    </div>
</body>

</html>
7 flex-basis
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>项目在主轴的基准长度</title>
    <style>
        .outer {
            width: 800px;
            height: 600px;
            background-color: rgb(63, 211, 206);
            display: flex;
            margin: 0 auto;

            flex-wrap: wrap;
            flex-direction: column;
            justify-content: flex-start;
            align-items: start;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;
        }

        .inner2 {
            flex-basis: 100px;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
    </div>
</body>

</html>
8 flex-grow
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>伸缩项目-伸</title>
    <style>
        .outer {
            width: 800px;
            height: 600px;
            background-color: rgb(63, 211, 206);
            display: flex;
            margin: 0 auto;

            flex-wrap: wrap;
            flex-direction: row;
            justify-content: flex-start;
            align-items: start;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;
        }

        .inner1 {
            flex-grow: 1;
        }

        .inner2 {
            flex-grow: 2;
            width: 300px;
        }

        .inner3 {
            flex-grow: 3;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
    </div>
</body>

</html>
9 flex-shrink
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>伸缩项目-伸</title>
    <style>
        .outer {
            width: 800px;
            height: 600px;
            background-color: rgb(63, 211, 206);
            display: flex;
            margin: 0 auto;

            flex-wrap: wrap;
            flex-direction: row;
            justify-content: flex-start;
            align-items: start;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;
        }

        .inner1 {
            flex-shrink: 1;
        }

        .inner2 {
            flex-shrink: 2;
            width: 300px;
        }

        .inner3 {
            flex-shrink: 3;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
    </div>
</body>

</html>
10 项目的排序与单独对齐
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>项目的排序与单独对齐</title>
    <style>
        .outer {
            width: 800px;
            height: 600px;
            background-color: rgb(63, 211, 206);
            display: flex;
            margin: 0 auto;

            flex-wrap: wrap;
            flex-direction: row;
            justify-content: flex-start;
            align-items: start;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;

            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: 0;


        }

        .inner1 {
            order: 2;
        }

        .inner2 {
            width: 300px;
            order: 1;

            /* 侧轴中间 */
            align-self: center;
        }

        .inner3 {
            order: 0;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
    </div>
</body>

</html>

精彩评论(0)

0 0 举报