css3属性+布局+媒体查询

1、flex属性

flex-grow:;数字不带单位,定义项目剩余的宽度进行扩张(放大)
flex-shrink:;数字不带单位,项目总宽度超出容器时的缩小设置
              0 本身的大小,不缩小也不放大
             1 平均分配,默认值
flex-basis: 0%;项目的长度
综合写法:    felx:放大 缩小 长度; 一般后两者默认不写

2、多列布局:

column-count:;分列
column-gap:;列间距
column-rule:大小 形态 颜色;分割线
column-fill:;列的高度是否统一
             auto 列高度自适应内容
             balance 所有列的高度以其中最高的一列统一
column-span:;是否横跨所有列
           none 不跨
          all 横跨所有
column-width:;列宽

3、响应式布局：

响应式的优势:一套项目,能适应不同的设备,灵活； 能够快捷解决多设备显示适应问题； 从显示上来看: 用户体验会更好一点

响应式的缺点:繁琐,代码量大,会出现隐藏无用的元素,加载时间加长；开发成本偏高(不同的项目组)；开发一套产品不能满足要求，一套图也不能满足要求(移动端 pc端的)；前端布局: 一套布局方案是不能满足，数据: pc 移动端；兼容不同的设备,兼容性工作量加大,效率低下；这是一个折中的解决方案,多方面的因素影响达不到最佳的效果；会出现用户混淆

4、媒体查询

判断一下浏览器的宽度是多少

决定box的背景颜色是多少

@media 设备 and (条件) and (条件){
            选择器{属性:值;}
}

例如：

@media all and (min-width:700px){
           .box{
                       background: pink;
                      width:300px;
                      display:none;
          }
}

原文地址：https://www.cnblogs.com/xsqlj/p/12555561.html