CSS技术分享

1，多列：

column-count：分栏的个数

column-width：分栏的宽度

column-gap：分栏的间距

column-rule：分栏的边框

column-fill：auto；（auto优先填充高度）

2，媒体查询：

@media  scree  and  （min-width：；）  and  （max-width：；）{

                        body{

                                        background：； }  }

                         

   3，css多列

column-count：分栏的个数（说明：属性规定元素应该被分割的列数）

column-width：分栏的宽度

column-gap：分栏的间距（规定列之间的间隔大小）

column-rule：分栏的边框  （column-rule-color列之间规则的颜色、column-rule-style列之间间规则的样式，column-rule-width列之间规则的宽度）

column-span：all/none设置或检索对象元素是否横跨所有列   （all：横跨所有列，none：不跨列）

column-fill：（auto；优先填充高度 ）（ balance所有列的高度以最高的一列统一（默认值）

break-inside：avoid 避免中断

                                响应式网页设计

1，响应式布局特点：

设计特点:1.面对不同分辨率设备灵活性强

2.能够快捷解决多设备显示适应问题

缺点:1.兼容各种设备工作量大，效率低下

2，代码累赘，会出现隐藏无用的元素，加载时间加长

3．其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

4.一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

 媒体查询：

                语法：@media  scree  and  （min-width：800px） and  （max-width：1200px）{body{background：red}

                          all所有设备    scree显示器，笔记本，移动端等设备

竖屏：@media  scree  and （orientation：portant）{body{background：；}}

横屏：@media  scree  and  （orientation：landscape）{body{background}

常涉及到的css属性：display，width，float，text-align，font