前端学习day11-总结

关键词： 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