前端学习第十七天

多列

属性column-count；数值
分栏的个数
属性column-width：像素
分栏的宽度

属性：column-gap像素值
分栏的间距，注意分栏数值
属性：column-rule：数值 实线  颜色
分栏的边框

属性：column-fill 
属性值：auto列高度自适应内容
属性值：：balance所有列的高度以其中最高的一列统一（默认值）

属性：column-span
属性值：all 横跨多个列
属性值：none不跨列

多列实现瀑布流

属性：break-inside
断点
属性值：avoid
需要加到子元素里面

媒体查询

属性：@media not相反
all 所有and 后面空格链接（属性；属性值）and（属性：属性值）{   属性    { 属性值}
}
把媒体查询样式放到css样式最后，否则会覆盖
screen常用的，代表显示器笔记本 移动端等设备

竖屏

@media screen and lorientation:portrait) and (mEx-width: 720px) {对应样式}

横屏

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