day-17.练习。

CSS3 多列

CSS多列（属性要加前缀）

1、column-count：分栏的个数

说明：

属性规定元素应该被分隔的列数  适用于：除table外的非替换块级元素, table-cells, inline-block元素 

2、column-width：分栏的宽数

说明：  设置或检索对象每列的宽度 

3、column-gap：分栏的间距

说明：  属性规定列之间的间隔大小 

4、column-rule：分栏的边框

说明：  

设置或检索对象的列与列之间的边框。复合属性。  

column-rule-color规定列之间规则的颜色。       column-rule-style规定列之间规则的样式。       column-rule-width规定列之间规则的宽度。

5、column-span：all、none 设置或检索对象元是否横跨所有列。

说明：  

设置或检索对象元素是否横跨所有列。  none：不跨列  all：横跨所有列 

6、column-fill

设置或检索对象所有列的高度是否统一（目前大部分浏览器尚未支持）

auto：列高度自适应内容

balance：所有列的高度以其中最高的一列统一（默认值）

7、columns：设置或检索对象的列数和每列的宽度。复核属性 columns：300px 3；

<‘column-width’>、、<‘colum-count’>

8、break-inside： avoid 避免中断

描述了在多列布局页面下的内容盒子如何中断，写给多列容器里的中断元素。

媒体查询 

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。 

媒体查询语法 

设备类型（默认为all） 

screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型 and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备) (min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。 

默认样式    

 /* 打印样式 */

@media print {}

 /* 手机等小屏幕手持设备 */

@media screen and (min-width: 320px) and (max-width: 480px) {}

 /* 平板之类的宽度 1024 以下设备 */

@media only screen and (min-width: 321px) and (max-width: 1024px) {}

 /* PC客户端或大屏幕设备: 1028px 至更大 */ @media only screen and (min-width: 1029px) {}

 /* 竖屏 */

@media screen and (orientation:portrait) {对应样式}

 /* 横屏 */

@media screen and (orientation:landscape){对应样式}