8.3知识点总结

一、css3多列

1column-count：分栏的个数，被分隔的列数

2、column-width：分栏的宽度

3、column-gap：分栏的间距，列之间的间隔大小 

4、column-rule：分栏的边框，列与列之间的边框

5、column-fill：auto/balance 

    列高度自适应内容/默认值，所有列的高度以其中最高的一列统一

6、column-span：all/none  

设置或检索对象元素是否横跨所有列

7、break-inside:avoid  避免中断

二、媒体查询及响应

1. 媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）

为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询

中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内

容的情况下，为特定的一些输出设备定制显示效果。

2.操作方式

      对设备提出询问（称作表达式）开始，如果表达式结果为真，媒体查询中的CSS被应用，如果

表达式结果为假，媒体查询内的CSS将被忽略。

3.语法：

@media screen  and  (min-width:320px)  and (max-width:750px){     body { background-

color:blue;}  }