关于多列布局
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的差异)