关键词： html,body{width:100%;height:100%} ，!mportant ，box-size:border-box，auto ，transparent（背景透明），动画效果移入移出
weui-btn
一. html,body{width:100%;height:100%}
众所周知，块级元素会自动占满一行，如果高度没有设置的话，其高度由内容决定。如果没有内容，height：0;
所以可以在页面开始之前设置这个属性。
二 . !mportant
1 . !important，作用是提高指定样式规则的应用优先权（CSS中优先级最高）。
2 . 语法格式{ cssRule !important }，即写在定义的最后面，例如：box{color:red !important;}
三 . box-size:border-box
1 .对于一个盒子来说，给他width:100px height:100px ,但如果又设定了border:10px padding 之类的，
它会增加盒子的实际大小。
2 . 但如果使用了box-size:border-box ,盒子的实际大小不变，它任然是宽高100px.
3. 内容区的实际宽度会是width减去border + padding的计算值.
4. margin不会包括在其中。
四 . auto 在CSS中
自动布局。
高度自动根据需要来限制高度，eg：{overfloat：auto}表示高度根据需要会自己增加。
在margin中表示自动居中，eg：#abc{margin：0 auto；}表示abc这个DIV自动居中，
五 . transparent
1. 全透明黑色，即一个类似rgba(0,0,0,0)这样的值。background:transparent，意思就代表背景透明。
2 . 实际上background默认的颜色就是透明的属性，所以写和不写都是一样的
3 . 如果一个元素覆盖在另外一个元素之上，而你想显示下面的元素，这时你就需要把上面这个元素的background设置为transparent.
六 . 移入移出动画效果
一秒后自动变回原来的背景色
效果源代码
首先用getElementById获取到其元素，接着设置点击事件函数，给Primary添加一个active类（css），即给元素添加一个红色的背景，又设置setTimeout(),让active类（CSS）效果在1秒后移除。
备注：此文章根据实例总结而来，访问更多请点我的github
网友评论