前端学习之CSS---多列布局、响应式布局、网格布局

多列布局、响应式布局、网格布局

一、多列布局（瀑布流效果）：column-count

column-count: 5		显示的列数 --> 适用于除table外的非替换块级元素
column-gap: 30px	调整列间距
column-rule: 2px solid red 	列与列之间的分割线
column-fill: balance	调整列高度  auto(一列填充满以后进入下一列)
column-width: 500px		调整列宽

column-span: all		加给子元素的属性，除了all就是none，横跨多个列，如需居中加text-align
break-inside: avoid		禁止盒子内部折行

 

---

二、响应式布局：@media all and(min-width){对应样式}

对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计

• PC优先（从pc端开始向下设计）
• 移动优先（从移动端向上设计）

无论基于哪种模式的设计，要兼容所有设备，布局响应时不可避免的需要对模块布局做一些变化（发生布局改变的临界点称之为断点）

1、媒体查询

媒体查询可以让我们根据设备显示器的特性（视口宽度，屏幕比例，设备方向：横向或纵向）为其设定css样式，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

@media all and(min-width:320px){
   	// 断点 
    body{
   background-color:blue;}	// 对应样式
}
设备类型除了all代表所有设备，还有aural听觉设备，handled便携设备等多种类型
print 打印预览图
screen 显示器、笔记本、移动端等设备
and被称为关键字，其他还有not（排除某种设备），only（限定某种设备）等
@media screen and(min-width:1000px){
   	// 断点 页面宽度大于1000px时
    body{