html5-css3 -- 总结 03（小白）

最新推荐文章于 2024-09-17 11:17:23 发布

柿子来了

最新推荐文章于 2024-09-17 11:17:23 发布

阅读量241

点赞数 1

文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/2301_78949452/article/details/140889873

版权

弹性盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .father{
            width: 1200px;
            margin: 0 auto;

            /* 添加弹性盒子 */
            display: flex;

            /* 使用弹性盒子后，父元素内部出现两根轴线，主轴，交叉轴 */
            /* 元素默认主轴方向排列 */
        }

        .son1{
            width: 600px;
            height: 60px;
            background-color: orange ;
        }

        .son2{
            width: 600px;
            height: 60px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></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>Document</title>

    <style>
        .father {
            width: 1200px;
            height: 800px;
            margin: 0 auto;

            border: 1px solid #000;

            /* 添加弹性盒子 */
            display: flex;

            /* 使用弹性盒子后，父元素内部出现两根轴线，主轴，交叉轴 */
            /* 元素默认主轴方向排列 */

            /* 父元素身上的属性 */
            /* 1.改变主轴方向 row(默认) row-reverse column column-reverse */
            flex-direction: row;

            /* 2.规定如何换行 nowrap(默认) wrap */
            flex-wrap: wrap;

            /* 3.主轴方向对齐方式 start end center space-between space-around */
            justify-content: space-around;

            /* 4.副轴方向对齐方式 start end center baseline */
            align-items: center;
        }

        .son1 {
            width: 200px;
            height: 60px;
            background-color: orange;
            font-size: 42px;
        }

        .son2 {
            width: 200px;
            height: 100px;
            background-color: pink;
            font-size: 24px;
        }

        .son3 {
            width: 200px;
            height: 50px;
            background-color: red;
            font-size: 36px;
        }

        .son4 {
            width: 200px;
            height: 200px;
            background-color: blue;
            font-size: 22px;
        }

        .son5 {
            width: 200px;
            height: 150px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son1">1</div>
        <div class="son2">2</div>
        <div class="son3">3</div>
        <div class="son4">4</div>
        <div class="son5">5</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>Document</title>

    <style>
        .father {
            width: 600px;
            height: 400px;
            border: 1px solid #ccc;

            /* 3.弹性盒子实现水平垂直居中 */
            display: flex;

            justify-content: center;

            align-items: center;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: #f00;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">
            abc
        </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>Document</title>

    <style>
        .father {
            width: 1200px;
            height: 800px;
            margin: 0 auto;

            border: 1px solid #000;

            /* 添加弹性盒子 */
            display: flex;
        }

        .son1 {
            /* width: 200px; */
            height: 200px;
            background-color: pink;
            font-size: 40px;

            /* 规定子元素排列顺序 值越小，排列越靠前  默认为0 */
            /* order: 2; */

            /* 放大比例 分配剩余空间 */
            /* flex-grow: 0.5; */

            /* 缩小比例 */
            /* flex-shrink: 0; */

            /* 占据主轴空间 */
            /* flex-basis: 300px; */

            /* 自身在 align-items 方向对齐方式 */
            align-self: center;
        }

        .son2 {
            /* width: 200px; */
            height: 200px;
            background-color: orange;
            font-size: 25px;
            /* order: 3; */

            /* flex-grow: 0.5; */

            /* flex-shrink: 5; */
        }

        .son3 {
            /* width: 200px; */
            height: 200px;
            background-color: red;
            font-size: 38px;

            /* order: 1; */
        }

        .son4 {
            /* width: 200px; */
            height: 200px;
            background-color: green;
            font-size: 20px;
            /* order: 4; */
        }

        .son5 {
            /* width: 200px; */
            height: 200px;
            background-color: blue;

            /* order: 0; */
        }

        .father div {
            /* flex: flex-grow flex-shrink flex-basis; */
            flex: 1;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
        <div class="son4"></div>
        <div class="son5"></div>
        <div class="son5"></div>
    </div>
</body>

</html>