【每日CSS3代码】

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

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、29双飞翼圣杯】

在这里插入图片描述

<!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>

1-3 实现三角形【2023/1/30】

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
  <title>三角形</title>
  <style type="text/css">
    .triangle {
    		height: 0px;
    		width: 0px;
            border-top:200px solid red;
            border-left:400px solid blue;
            border-bottom:200px solid green;
            border-right:400px solid transparent;
    }
    .box1, .box2, .box3, .box4 {
      height: 0px;
      width: 0px;
      border-style: solid;
      margin: 10px;
    }
    .box1 { /* 等腰直角 */
      border-width: 100px;
      border-color: tomato transparent transparent transparent;
    }
    .box2 { /* 等边 */
      border-width: 100px 173px;
      border-color: transparent tomato transparent transparent;
    }
    .box3 { /* 等腰 */
      border-width: 100px 80px;
      border-color: transparent transparent tomato transparent;
    }
    .box4 { /* 其他 */
      border-width: 100px 90px 80px 70px;
      border-color: transparent transparent transparent tomato;
    }
</style>
</head>
<body>
  <div class="triangle"></div>
  <p class="box1"></p>
  <p class="box2"></p>
  <p class="box3"></p>
  <p class="box4"></p>
</body>
</html>

1-4 块级子元素水平垂直居中【2023/1/31】

在这里插入图片描述

<!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>
        .parent {
            height: 200px;
            width: 200px;
            margin-top: 30px;
            background-color: aqua;
        }
        .child {
            width: 50px;
            height: 50px;
            background-color:black;
        }

        /* position和margin居中 */
        .parent1 {
            position: relative;
        }
        .child1 {
            position: absolute;
            top: 0;
            left:0;
            right: 0;
            bottom:0;
            margin: auto;
        }

        /* position和transform居中 */
        .parent2 {
            position: relative;
        }
        .child2 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

        /* flex居中 */
        .parent3 {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .child3 {
          /* align-self:center; */
        }

        /* * 通过 position 和 margin 居中 */
        .parent4 {
            position: relative;
        }
        .child4 {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -25px;
            margin-left: -25px;
        }
    </style>
</head>
<body>
    <!-- position和margin居中 -->
   <div class="parent parent1">
    <div class="child child1"></div>
   </div> 
   <div class="parent parent2">
    <div class="child child2"></div>
   </div> 
   <div class="parent parent3">
    <div class="child child3"></div>
   </div> 
   <!-- * 通过 position 和 margin 居中:知道子盒子宽高 -->
   <div class="parent parent4">
    <div class="child child4"></div>
   </div> 
</body>
</html>

1-5实现自适应的正方形【2023/2/1】

在这里插入图片描述


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      /* 都是像对于屏幕宽度的比例 */
      .square1 {
        width: 10%;
        height: 10vw;
        background: red;
      }
      /* margin/padding 百分比是相对父元素 width 的 */
      .square2 {
        width: 20%;
        height: 0;
        padding-top: 20%;
        background: orange;
      }
      /* 通过子元素 margin */
      .square3 {
        width: 30%;
        overflow: hidden; /* 触发 BFC */
        background: yellow;
      }
      .square3::after {
        content: '';
        display: block;
        margin-top: 100%; /* 高度相对于 square3 的 width */
      }
</style>
  </head>
  <!-- 画一个正方形 -->
  <body>
    <p class="square1"></p>
    <p class="square2"></p>
    <p class="square3"></p>
  </body>
</html>