css 手写面试题系列（一）1 css 手写个三角形 2 c s s 实现水平垂直居中的几种方式用弹性盒子实现用定

1 css 手写个三角形

 .box{
        height: 0px;
        width: 0px;
        border-top: 50px solid red;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 50px solid transparent;
    }

2 c s s 实现水平垂直居中的几种方式

用弹性盒子实现

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

<body>
    <div class="wrap">
        <div class="box">
        </div>
    </div>
</body>
  <style>
    *{
        margin: 0;
        padding: 0;
    }
    .wrap{
        height: 500px;
        width: 500px;
        border: 1px solid red;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .box{
        height: 100px;
        width: 100px;
        background: red;
    }

</style>
</html>

用定位实现

定位百分比加c s s3 transform 实现用四个方向是0 margin:auto 实现

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

<body>
    <div class="wrap">
        <div class="box">
        </div>
    </div>
</body>
  <style>
      *{
        margin: 0;
        padding: 0;
    }
    .wrap{
        height: 500px;
        width: 500px;
        border: 1px solid red;
       position: relative;
    }
    .box{
        height: 100px;
        width: 100px;
        background: red;
        position:absolute;
        left: 50%;
        right: 50%;
        top: 50%;
        bottom: 50%;
        transform: translate(-50%,-50%);
    }
   // 两种方法都可以
		.box{
        height: 100px;
        width: 100px;
        background: red;
        position:absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin:auto;
    }

3.盒子宽度未知，实现宽高2:1

<!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>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    html{
        height: 100%;
        width: 100%;
    }
    body{
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .box{
        width: 50vw;
        height: calc(50vw/2);
        background: red;
        // 方式2
        // height:0;
        // padding-top:calc(50vw*1/2)
    }
</style>

<body>
    <div class="box">
    </div>
</body>

</html>
</style>
</html>

4.绘制边框小于1p x 的线段

<body>
    <style>
        .box{
            /* border: 0.5px solid red; */
            width: 200px;
            position: relative;
        }
        .box::after{
           position: absolute;
           left: 0;
           top: 0;
           width: 200%;
           height: 200%;
           content: '';
           border: 1px solid black;
           transform: scale(.5,.5);
           transform-origin: 0 0;
        }
       </style>
  <div class="box">
      分身乏术范德萨
  </div>
</body>

5 实现圣杯布局（左右宽度固定，中间自适应）

1 用flex 布局实现

<style>
.box{
            display: flex;

        }
        .box .left,
        .box .right{
            height: 100px;
            background: red;
            flex: 0 0 200px;
        }
        .center{
            flex: 1;
            background: black;
        }
     </style>
<body>
    <!-- 实现左右宽度200px 中间自适应 -->
   <div class="box">
       <div class="left"></div>
       <div class="center"></div>
       <div class="right"></div>
   </div>
</body>

2用定位

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            position: relative;
            width: 100%;
            box-sizing: border-box;
            padding: 0 200px;
        }
        .box .left,
        .box .right {
            position: absolute;
            top: 0px;
            left: 0px;
            height: 200px;
            width: 200px;
            background: black;
        }
        .box .right{
            left: auto;
            right: 0px;
        }
        .center {
            width: 100%;
            background: red;
            height: 200px;
        }
    </style>
    <body>
    <!-- 实现左右宽度200px 中间自适应 -->
   <div class="box">
       <div class="left"></div>
       <div class="center"></div>
       <div class="right"></div>
   </div>
</body>