多列布局和媒体查询

关于多列布局

css多列布局

column-count 列数属性

属性值：nmber;

属性值：数值加单位；

column-rule 边框；

column-fill:auto/balance ;auto 表示各列的内容自动补充；balance 均衡补充；

column-span ;none 表示不跨列 ；all 横跨所有列，并定位在列的z轴之上；

text-align:center; 使用在块元素上 ，块元素默认独占一行，宽度100%；

column-width:列的宽度；

column:100px 5 ; 宽度 列数；

break-inside：avoid ：图片高度都设置成固定的了，但是难免会出现高度不一的图片。在图片后面添加文本时候浏览器高度不够的时候会默认换行，接这个属性不会自动换行，图片和文本会在一起显示

扩展：懒加载：

懒加载也就是延迟加载。

具体表现为：

当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张占位图的路径，这样就只需请求一次，只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。

好处：

很多页面，内容很丰富，页面很长，图片较多。比如瀑布流，图片数量多且大，如果一次性加载完毕，用户等待时间过长。 懒加载页面加载速度快、可以减轻服务器的压力、节约了流量，用户体验好。

关于媒体查询得方式

       媒体查询：只是一个工具，通过检测不同得设备特征（这里主要讲检测用户设备得屏幕尺寸）从而设置不的CSS样式

       媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

       CSS3中媒体查询的写法：@media设备的类型，关键字（判断的条件）{里面书写css样式}

              1. @media关键字-表明了媒体查询

              2.设备的类型：前端常用的为all 、screen（屏幕）

              3.关键字：and、only、not

              4.（判断的条件）：min-width/max-width

              5.{css申明}：css样式

例子：判断用户电脑的屏幕在320px~1000px之间的时候，让浏览器背景显示红色

              @media all and (min-width：320px) and (max-width:1000px){

                            html{

                                   background:red

}

}

注意：媒体查询建议写在css样式的最下方，出于权重，优先级的考虑

         书写媒体查询的时候，每个因为单词之间都需要一个空格

         判断条件的时候，后面不要接分号！

         当媒体条件有多个判断条件的时候，只需要用and继续书写即可

         不确定性：由于市面上的电脑厂商较多，设置媒体查询的判断条件的时候可能出现

差异（例如小米，华硕屏幕尺寸可能会有1px的差异）