text-align: center;——子item居中对齐

display: flex;——子item横向布局

-webkit-justify-content: center;——子item居中

margin: auto;——子item居中

 

background: #f4f4f4;——背景色（background-color: yellowgreen;）

opacity: 0.5;——透明度

 border-top: 0.13333rem solid #a1c9f8;——边界宽度及颜色（上边框）

 border: 1px solid #fff;——全边框
 border-color: #0CD5E5 #0CD5E5 #0CD5E5 #0CD5E5;——四色边框（渐变色）

 border-radius: 16px;——圆角边框

 

style="background-image:url(images/mybg.png) ;height: 250px——背景图片

<img src="image/01.jpg" height="270" width="479" >——加载图片

letter-spacing:5px;——文本间距

 

（1）重叠布局

div实例

<div class="bigDiv"><div class="smallDiv1"></div><div class="smallDiv2"></div>
</div>

css实现重叠布局

.bigDiv{
    position: relative;
}
.smallDiv1{
    position: absolute;
    z-index: 2;
}
.smallDiv2{
    position: absolute;
    z-index: 1;
}

附：

1、子绝父相：儿子绝对定位，父亲相对定位
2、z-index：层次；值越大放置越靠上

 

（2）div固定在底部css

.footer{
height: 20px;
width: 100%;
  display: flex;
position: fixed;
bottom: 0;
text-align: center;
}

（3）input的无边框显示下划线

.inputclass{
    border: none;
    font-size: 15px;
    height: 20px;
    width: 100%;
    margin-top: 3px;
    letter-spacing:5px;
    margin-left:12px;
    margin-right: 40px;
    padding-bottom: 5px;
    border-bottom: 1.5px solid #DBDBDB;
}

（4）相对定位与绝对定位布局

母层使用相对布局：

    position: relative;

子层使用绝对布局，位居底部

    .box .bg{
        background-color: #000;
        opacity: 0.5;
        width: 100%;
        height: 40px;
        /* 绝对定位 */
        position: absolute;
        bottom:0px;
        
        /* 层级： */
        z-index:100;  /*  -999-0+999 */
        }

 

 

 

 

 

 

微信小程序——wxss:

flex-direction: row;——横向布局

flex-direction: column;——纵向布局+display: flex;

flex: 1;——————————单行

justify-content: space-between;——item平分母尺寸居中显示

border-bottom: 1px solid rgb(197, 199, 199);——item底部分割线