项目总结（0）

一：今天做项目的时候遇到了一个问题，我想让父元素具有一定的透明度，而对于子元素则不透明，如果我们简单的给父元素添加 opacity属性，实际上子元素会随着父元素的透明度改变而改变，要实现上面的效果，经过度娘，得到了一种方法：

1，设置父元素的  

background : rgba(120,120,120,0.7)//设置的o.7的透明度

关于rgba知识点如下：
语法:

R：红色值。正整数 | 百分数

G：绿色值。正整数 | 百分数

B：蓝色值。正整数| 百分数

A：透明度。取值0~1之间　　我们设置透明度这这儿设置就好了

如上：

二：关于box-sizing的元素

我们知道在很古老之前，对于盒模型分为两种，w3c盒模型和IE盒模型，对于box-sizing元素。可以规定这两种模型，

box-sizing:border-box || content-box

content-box:

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。

border-box:

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

三：关于flex布局

flex布局可已实现多种布局，在做项目的时候应用到的下面两种：

1,使用flex布局实现的完全居中，讲真，flex布局实现元素居中很简单：

父元素：display:flex 规定父元素的flex布局

子元素：margin:auto

2,对于设定了flex布局的父元素，如果子元素为行元素，这个行元素的paddding效果起作用

四：input元素自动获得焦点：

<input   type="text" onfocus=""onfocus >  //不用傻傻的使用js进行了　

五:关于js中的箭头函数：

代码如下：

 new Vue({
            el:'#tem',
            data:{
                items:[
                    {dec:'1'},
                    {dec:'2'},
                    {dec:'3'}
                ]
            },
            methods:{
                pushData:function () {
                    console.log('made');
                    this.items.unshift(' ');
                    console.log('good');
                    this.$refs.slideUl.querySelector('li').className='active';

                }
            },
            mounted: function () {
                setInterval(() => {
                    this.pushData();
                },3000)
            }　　

如上：

在上面的代码中，我们想要当实例加载的时候执行setInterval  每隔3秒钟执行pushData()函数，这是使用箭头函数定义的，当我想用

setInterval(function () {

this.pushData()

},3000)

这段代码来实现的时候却出现了错误，console控制台提示 函数pushData没有定义，为什么？因为this的指向，在这个函数中，实际上是每隔3s钟调用一个匿名函数，在匿名函数中，this指向全局环境，而我们在vue中定义的methods实际上是定义挂载在dom元素实例上的，当然全局环境中就没有定义了，实际上使用箭头函数可以解决这个问题