CSS多列，媒体查询

一.css多列

属性：

1.column-count: 分开的列数

2.column-gap：列的间距

3.column-rule：(复合属性）写法类似border

4.column-fill：设置或检索对象所有列的高度是否统一

属性值：      -auto:列高度自适应内容 

                    -balance:所有列的高度以其中最高的一列统一

5.column-span:  设置或检索对象元素是否横跨所有列。

                    -none:不跨列

                    -all：横跨所有列

6.column-width:  设置或检索对象每列的宽度7

7.columns:设置或检索对象的列数和每列的宽度，复合属性。

二.媒体查询

概念：媒体查询只是个工具，通过检测不同的设备从而设置不同的css样式。

1. 语法：@media 设备类型       关键字（媒体特性-判断条件） {css声明}（例：@media all and (min-width:500px）and (max-width:500px）

-@media： 声明/定义 媒体查询的关键字

-关键字：常用的有and

-媒体类型：最大值和最小值

-css声明

2.基础代码如下图：（能够实现在不同的屏幕尺寸下让页面背景颜色改变）