css3属性+布局+媒体查询
2021-04-01 22:25
标签：auto display 多少 数字 不同的 工作量 项目组 优势 布局 1、flex属性 flex-grow:;数字不带单位,定义项目剩余的宽度进行扩张(放大) 2、多列布局: column-count:;分列 3、响应式布局： 响应式的优势:一套项目,能适应不同的设备,灵活； 能够快捷解决多设备显示适应问题； 从显示上来看: 用户体验会更好一点 响应式的缺点:繁琐,代码量大,会出现隐藏无用的元素,加载时间加长；开发成本偏高(不同的项目组)；开发一套产品不能满足要求，一套图也不能满足要求(移动端 pc端的)；前端布局: 一套布局方案是不能满足，数据: pc 移动端；兼容不同的设备,兼容性工作量加大,效率低下；这是一个折中的解决方案,多方面的因素影响达不到最佳的效果；会出现用户混淆 4、媒体查询 判断一下浏览器的宽度是多少 决定box的背景颜色是多少 @media 设备 and (条件) and (条件){ 例如： @media all and (min-width:700px){ css3属性+布局+媒体查询 标签：auto display 多少 数字 不同的 工作量 项目组 优势 布局 原文地址：https://www.cnblogs.com/xsqlj/p/12555561.html
flex-shrink:;数字不带单位,项目总宽度超出容器时的缩小设置
0 本身的大小,不缩小也不放大
1 平均分配,默认值
flex-basis: 0%;项目的长度
综合写法: felx:放大 缩小 长度; 一般后两者默认不写
column-gap:;列间距
column-rule:大小 形态 颜色;分割线
column-fill:;列的高度是否统一
auto 列高度自适应内容
balance 所有列的高度以其中最高的一列统一
column-span:;是否横跨所有列
none 不跨
all 横跨所有
column-width:;列宽
选择器{属性:值;}
}
.box{
background: pink;
width:300px;
display:none;
}
}
上一篇：WebMagic
下一篇：1.web前端（盒子模型）