Html&CSS（一）css特效的遗漏补充

三角形

div {
    width: 0;
    height: 0;
    border: 40px solid;
    border-color: transparent transparent transparent red;
}
需要哪个方向就把那个方向设置颜色，顺序同padding设置顺序一样

边框线

border-left//视情况而定hhh

水平垂直居中的几种方法（至少要知道五种，基础技能！）

1.不知道宽度的时候

div{
    background:red;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
}

2.绝对定位方法：确定了当前div的宽度，margin值为当前div宽度一半的负值

代码如下：

div{
    width:600px;
    height: 600px;
    background:red;
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-300px;
    margin-top:-300px;
}

3.弹性盒子

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

/**css**/

.box{
    height:800px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #ccc;
}
div.child{
    width:600px;
    height:600px;
    background-color:red;
}

4.绝对定位方法：绝对定位下top left right bottom 都设置0

（我没试过hhhh，等我看一哈）

代码如下：

<div class="child">我是子级</div>
/**css**/
div.child{
    width: 600px;
    height: 600px;
    background: red;
    position:absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

5.table-cell的方式（又的自学了啧啧啧） 未解决问题

<div class="table-cell">
    <p>我爱你</p>
</div>

.table-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 240px;
    height: 180px;
    border:1px solid #666;
}

css的position怎么用的

所知定位方式，具体阐述其过程，除此之外还知道什么技术（布局）