【每日CSS3代码】

news2024/10/5 15:23:01

1-1 两栏布局【1/27】

在这里插入图片描述

<!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>
     *{
        margin: 0;
        padding: 0;
    }
      .outer {
        height: 100px;
        margin-bottom: 10px;
    }
    .left {
        background: tomato;
        height: 100px;
    }
    .right {
        background: gold;
        height: 100px;
    }
    /* 浮动 */
    .outer1 .left {
        width: 200px;
        float: left;
        /* margin-top: 30px; */
    }
    .outer1 .right {
        width: auto;
        margin-left: 200px;
    }
    /* flex */
    .outer2 {
        display: flex;
    }
    .outer2 .left {
        flex-grow: 0;    /* // flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 */
        flex-shrink: 0;  /* flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 */
        flex-basis: 200px;
    }
    .outer2 .right {
        flex: auto; /* 1 1 auto */
    }
    /* position */
    .outer3 {
        position: relative;
    }
    .outer3 .left {
        position: absolute;
        width: 200px;
    }
    .outer3 .right {
        margin-left: 200px;
    }
    /* position again */
    .outer4 {
        position: relative;
    }
    .outer4 .left {
        width: 200px;
    }
    .outer4 .right {
        position: absolute;
        top: 0;
        left: 200px;
        right: 0;
    }  
    </style>
</head>
<body>
    <!-- 垂直两栏，左边固定右边自适应 -->
    <div class="outer outer1">
        <p class="left">1-left</p>
        <p class="right">1-right</p>
    </div>
    <div class="outer outer2">
        <p class="left">2-left</p>
        <p class="right">2-right</p>
    </div>
    <div class="outer outer3">
        <p class="left">3-left</p>
        <p class="right">3-right</p>
    </div>
    <div class="outer outer4">
        <p class="left">4-left</p>
        <p class="right">4-right</p>
    </div>
</body>
</html>

1-2 三栏布局【1/28双飞翼，圣杯】

在这里插入图片描述

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .outer{
          margin-top: 40px;   
        }
        .left {
            height: 20px;
            background-color: aqua;
        }
        .center {
            height: 20px;
            background-color:brown;
        }
        .right {
            height: 20px;
            background-color:blue;
        }

        /* // flex */
        .outer1 {
            display: flex;
        }
        .outer1 .left{
            width: 200px;
            flex-grow: 0;
            flex-shrink: 1;
            flex-basis: auto;
        }
        .outer1 .center {
            width: auto;
            flex: 1 1 auto;
        }
        .outer1 .right {
            width: 200px;
            flex: none;
        }


        /* postion */
        .outer2 {
            position: relative;
        }
        .outer2 .left {
            position: absolute;
            width: 200px;
        }
        .outer2 .right {
            position: absolute;
            width: 200px;
            top:0;
            right:0;
        }
        .outer2 .center{
            margin-left: 200px;
            margin-right: 200px;
        }

    
        /* 浮动 */
        /* .outer3 {
            position: relative;
        } */
        .outer3 .left {
            float:left;
            width: 200px;
        }
        .outer3 .right {
            float: right;
            width: 200px;
        }
        .outer3 .center{
            margin: 0 200px 0 200px;
        }


        /* 圣杯布局 ： 浮动+负边距 : 和三栏布局要求相同，不过中间列要写在前面保证优先渲染*/
        .outer4 {
            padding: 0 200px 0 100px;
        }
        .outer4 .center {
            width: 100%;
            float: left;
        }
        .outer4 .left {
            width: 100px;
            float: left;
            margin-left: -100%;
            position: relative;
            left: -100px;
        }
        .outer4 .right {
            width: 200px;
            float: left;
            margin-left: -200px;
            position: relative;
            left: 200px;
        }
       

        /* 双飞翼  :和三栏布局要求相同，不过中间列要写在前面保证优先渲染*/
        .outer5 {
            margin-top: 100px;
        }
        .outer5 .center {
            width: 100%;
            float: left;
        }
        .outer5 .middle {
            margin: 0 200px 0 100px;
        }
        .outer5 .left {
            width: 100px;
            float: left;
            margin-left: -100%;
        }
        .outer5 .right {
            width: 200px;
            float: left;
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <div class="outer outer1">
        <p class="left"></p>
        <p class="center"></p>
        <p class="right"></p>
    </div>
    <div class="outer outer2">
        <p class="left"></p>
        <p class="center"></p>
        <p class="right"></p>
    </div>
    <div class="outer outer3">
        <p class="left"></p>
        <p class="right"></p>
        <p class="center"></p>
    </div>
    <div class="outer outer4">
        <p class="center">圣杯-center</p>
        <p class="left">圣杯-left</p>
        <p class="right">圣杯-right</p>
    </div>
    <div class="outer outer5">
        <div class="center">
            <p class="middle">双飞翼布局-center</p>
        </div>
        <p class="left">双飞翼布局-left</p>
        <p class="right">双飞翼布局-right</p>
    </div>
</body>
</html>