三列布局

1.利用calc计算属性

.container>div {
    height: 100px;
}

.container>div:nth-child(1) {
    float: left;
    width: 200px;
    background-color: red;
}

.container>div:nth-child(2) {
    float: left;
    width: calc(100vw - 500px);
    background-color: blue;
}

.container>div:nth-child(3) {
    float: left;
    width: 300px;
    background-color: yellow;
}

2.grid布局

.container {
    display: grid;
    /* 列的数量和宽度 */
    grid-template-columns: 200px auto 300px;
    /* 行的数量和高度 */
    grid-template-rows: 100px;
    height: 100vh;
    background-color: #000;
}

3.flex布局

.container {
    display: flex;
    height: 100vh;
    background-color: #000;
}

.container>div {
    height: 100px;
}

.container>div:nth-child(1) {
    width: 200px;
    background-color: red;
}

.container>div:nth-child(2) {
    flex: 1;
    background-color: blue;
}

.container>div:nth-child(3) {
    width: 300px;
    background-color: yellow;
}

4.定位布局

父元素相对定位，子元素绝对定位，第一个和最后一个left:0,right:0,中间的left第一个宽度，right右边的宽度
.container {
    position: relative;
    height: 100vh;
    background-color: #000;
}

.container>div {
    height: 100px;
}

.container>div:nth-child(1) {
    position: absolute;
    left: 0;
    width: 200px;
    background-color: red;
}

.container>div:nth-child(2) {
    position: absolute;
    left: 200px;
    right: 300px;
    background-color: blue;
}

.container>div:nth-child(3) {
    position: absolute;
    right: 0;
    width: 300px;
    background-color: yellow;
}

5.table布局(没用过)

父元素设置table   子元素设置table-cell
.container {
    display: table;
    width: 100vw;
    background-color: #000;
}

.container>div {
    height: 100px;
}

.container>div:nth-child(1) {
    display: table-cell;
    width: 200px;
    background-color: red;
}

.container>div:nth-child(2) {
    background-color: blue;
}

.container>div:nth-child(3) {
    display: table-cell;
    width: 300px;
}

垂直水平居中

1.父元素相对定位，子元素绝对定位，已知宽高下走自己的负一半

.container div:first-child {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 200px;
     height: 200px;
     margin-left: -100px;
     margin-top: -100px;
     background-color: #fff;
}

2.父元素相对定位，子元素绝对定位，已知宽高下利用calc计算属性

.container div:first-child {
    position: absolute;
    top: calc(50% - 100px);
    left: calc(50% - 100px);
    width: 200px;
    height: 200px;
    background-color: #fff;
 }

3.父元素相对定位，子元素绝对定位，未知宽高下利用translate属性

.container div:first-child {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%,-50%);
    background-color: #fff;
}

4.利用flex布局,子元素设置auto

.container {
    display: flex;
    height: 100vh;
    width: 100vw;
    background-color: #000;
}

.container div:first-child {
    margin: auto;
    width: 200px;
    height: 200px;
    background-color: #fff;
}

5.利用flex布局,设置主轴和交叉轴对齐方向

.container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      width: 100vw;
      background-color: #000;
}

6.利用绝对定位,四个角都设置0,margin：auto即可

.box {
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     margin: auto;
     width: 200px;
     height: 200px;
     background-color: red;
 }

7.利用grid布局,子元素margin：auto即可

.f {
    display: grid;
    width: 100vw;
    height: 100vh;
}

.c {
    width: 100px;
    height: 100px;
    margin: auto;
    border: 1px solid red;
}

实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果

// 方法一
<div style="height:1px;overflow:hidden;background:red"></div>

// 方法二: 伪类
.outer {
    position: relative;
}
.outer:before {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 1px;
    tansform: scale(0.5);
    tansform-origin: 0 0;
    background: #f5f5f5;
}

画一个三角形

参考链接：https://juejin.cn/post/7003997843019202597#heading-4

// 1、基础能力
.triangle {
    width: 0px;
    height: 0px;
    border-top: 50px solid red;
    border-right: 50px solid green;
    border-bottom: 50px solid blue;
    border-left: 50px solid yellow;
}

// 2、利用transparent
.triangle {
    width: 0;
    height: 0;
    border-bottom: 50px solid #565656;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

画一个圆角三角形

.rounded-triangle {
    width: 50px;
    height: 50px;
    border-top-right-radius: 30%;    // 圆角弧度
    background: cyan;
    transform: rotate(-60edg) skewX(-30edg) scale(1, .866)
}
.rounded-triangle:before,
    .rounded-triangle:after {
      content: '';
      position: absolute;
      background-color: inherit;
      width:  50px;
      height: 50px;
      border-top-right-radius: 30%;
    }
    .rounded-triangle:before {
      transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0,-50%);
    }
    .rounded-triangle:after {
      transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
    }