7月最后一周学习内容

1.css实现两列布局

（1）.float 方法:

container 用 overflow: hidden; 开启 BFC，解决高度塌陷。 left 设置向左浮动，right 使用 overflow: hidden; 开启 BFC 。（父盒子和右盒子开启bfc，左盒子固定宽高）

(2) .felx方法

 

2.文本溢出显示省略号

(1).设置文本不换行 overflow：hidden；溢出隐藏 text-overflow：ellipsis；文本溢出的显示省略号

(2).伪元素法，子绝父相

3.flex布局的实际应用

（1）.实现两行多列

 三种方法（两行两列）：

 

 三列布局：

 

 

4.

定位的叠放顺序 z-index
在使用定位布局时，可能会出现盒子重叠的情况。此时可以使用z-index控制盒子的前后次序（z轴）

div{
    z-index:1; 
}
（1）数值可以是正整数、负整数或0.默认是auto,数值越大，盒子越靠上
（2）如果属性值相同，则按照书写顺序，后来居上
（3）z-index值没有单位‘
（4）只有定位的盒子才有z-index属性

加了绝对定位的盒子不能通过margin:0 auto实现水平居中
实现方法：
（1）需要定位的盒子挪到父盒子的50%
（2）需要定位的盒子向左挪动本身的一半宽度

5.使用vuex

ps:        Vuex和localStorage、全局变量的区别：

Vuex和localStorage的区别是什么呢？

1.最重要的区别：vuex存储在内存，localStorage则以文件的方式存储在本地

2.应用场景：vuex用于组件之间的传值，localStorage则主要用于不同页面之间的传值。

3.永久性：当刷新页面时vuex存储的值会丢失，localStorage不会。

Vuex和全局变量的区别是什么呢？

1.由于使用Vuex需要将store实例挂载到Vue实例中，因此Vue实例可以对Vuex的state数据加监听，这跟Vue实例data的数据双向绑定是类似的。

而全局变量由于没有被“数据劫持”，因此即使全局变量的值发生改变，也无法在Vue实例中监听到他的变化。

2.Vuex中的状态值，不能通过赋值的方式(state.xxx = yyy)改变，需要通过mutation触发变更。这样做方便状态管理，而一般的全局变量是支持直接赋值的。

5.table

thead tr th   tbody tr td