多列布局：
column-count：；分列，等分；
column-gap：；列间隔；
column-rule：；列与列之间的边框复合属性。
column-rule-color规定列之间规则的颜色。
column-rule-style规定列之间规则的样式。
column-rule-width规定列之间规则的宽度。
column-fill：；设置所有列的高度是否统一
auto：列高度自适应内容
balance：所有列的高度以其中最高的一列统一
column-span：；是否横跨所有列（相当于加个标题）
none：不跨列
all：横跨所有列
column-width：；每列的宽度
列数和每列的宽度的综合写法：columns：
break-inside：avoid；防止断层
绝大部分项目：
PC端-->官网
移动端-->移动端网页，APP，小程序
响应式：
为了适应不用的设备，分辨率
不同设备(pc电脑端 平板电脑 手机端)
X宽度：
500px<=x<800px css1
800px<=x<1000px css2
1000px<=x<1500px css3
响应式布局的优势：
1.一套项目，能适应不同的设备，灵活
2.能够快捷解决多设备显示适应问题
3.从显示上来看，用户体验会更好一点
响应式布局的缺点：
1. 繁琐，代码量大，会出现隐藏无用的元素，加载时间过长
2. 开发成本偏高（不同的项目组）
开发一套产品不能满足要求
一套图也不能满足要求（移动端 pc端的）
前端布局：一套布局方案不能满足
数据：PC端 、移动端都需要
3. 兼容不同的设备，兼容性工作量加大，效率低下
4. 这是一个择中的解决方案，多方面的因素影响达不到最佳的效果
5. 会出现用户混淆
为什么讲响应式？
利用响应式的思想，做移动端项目的适配
媒体查询：
判断一下浏览器的宽度是多少决定box的背景颜色是多少
媒体查询语法：
@media 设备 and（条件）and（条件）{ 选择器{属性：值；}}
例如：@media all and (min-width:320px) {
body { background-color:blue;}
}