弹出框项目总结

遮罩层

• html

<div id="mask"></div>

• css

#msak{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.7);
    z-index:7;
}

圆

宽、高要相等，然后边的圆角要设为50%；

<div><div>

div{
    width:60px;
    height:60px;
    border-radius:50%;
}

直角三角形

长、宽为0，设置两直角边的border值，分别为with，style和color。

<div><div>

border-top:20px solid red;
border-left:20px solid transparent;

• 如果是其他形状的三角形，则需要设置三个边的值；

div{
    border-top:50px solid transparent;
    border-right:100px solid red;
    border-bottom:50px solid transparent;
}

图片和文字水平居中

 div {
            width: 90px;
            height: 86px;
            border: 1px solid black;
            text-align: center;
        }

        div img {
            width: 50px;
            height: 50px;
        }

        div span {
            display: inline-block;
            width: 70px;
            height: 20px;
            overflow: hidden;
        }

<div>
    <img src="xxxx" alt="">
    <span>xxxx</span>
</div>

水平方向横向滚动

父元素的宽度设为auto，overflow-x设为auto，white-space设为nowrap。

ul{
    width:auto;
    overflow-x:auto;
    white-space:nowrap;
}
li{
    display:inline-block;
    width:90px;
    height:86px;
}

竖直方向滚动条

父元素的height比内部子元素的高度小，且设置overflow为auto

div{
    height:360px;
    overflow:auto;
}