多列布局
属性：column-count
取值：数字，规定应该被分隔的列数
适用于：除table外的非替换块级元素
属性：column-gap
取值：规定列之间的间隔大小
属性：column-rule
设置或检索对象列与列之间的边框，是复合属性
column-rule-color：规定列与列之间规则的颜色
column-rule-style：规定列与列之间规则的样式
column-rule-width：规定列于列之间规则的宽度
属性：colum-width
作用：检索或设置对象每列的宽度
flex布局：flex容器：采用flex布局的元素的父元素
flex项目：采用flex布局的父元素的子元素
项目默认存在两根轴，水平的主轴和垂直的交叉轴，项目默认按主轴排列
flex容器属性
1，display：flex，inline-flex
注意：当设为flex布局后，子元素的float，clear，和vertical-align属性将会失效
2，flex-direction属性。决定主轴的方向（即项目的排列方向）
取值：row / row-reverse / column / column-reverse
3，flex-wrap属性 决定子元素是否换行显示
取值：nowrap / wrap / wrap-reverse
4，flex-flow
是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
5，justify-content 定义项目在主轴的对齐方式
justify-content：flex-start / flex-end / center / space-between /space-around
6，align-items 定义项目在交叉轴上对齐方式
align-items：flex-start / flex-end / center / space-between / space-around
7，align-content 定义多根轴线的对齐方式，对于单行子元素，该元素不起作用
align-content：flex-start / flex-end / center / space-between / space-around / stretch
align-content在侧轴上执行样式时，会把默认间距合并，对于单行子元素，该属性不起作用
flex项目属性
1，align-self属性 align-self属性可重写灵活容器内align-items属性
取值：auto 默认值，继承父元素的align-items属性，若没有父元素则为stertch
stretch 元素被拉伸以适应容器
center 元素位于容器中心
flex-start 元素位于容器开头
flex-end 元素位于容器结尾
2，order
取值：数字， number排序优先级，数字越大越向后拍，默认为0，支持负值
3，flex
说明：复合属性，检索或设置盒模型对象子元素如何让分配空间
flex-grop 规定对于其他灵活的项目进行扩展的量
flex-shrink 规定对于其他灵活的项目进行收缩的量
flex-basis 项目的长度
缩写为：【flex：1；】 则其计算值为【1，1，0】
缩写为：【flex：auto】 则其计算值为【1 1 auto】
缩写为： 【flex：none】则其计算值为【0 0 auto】
媒体查询
根据设备显示器的特性（如视口宽度，屏幕比例等）为其设置css样式，使用媒体查询可以为特定的一些设备定制显示效果
语法： 关键字@media
@media all and （min-width：320px）{
body {background-color：blue；}
}all指所有设备
移动端布局
mate标签的设置
作用：改变视口
最后一个mate标签：<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
物理像素：设备像素，指设备能控制显示的最小物理单位，指显示器上的一个个点
css像素：虚拟像素，指css样式代码中使用的逻辑像素
dpr（设备像素比）：设备像素比 = 物理像素 / css像素
常见单位：
px：像素
em：相对长度单位，相对于对象内文本的字体尺寸（如果没有设置，就是相当于浏览器默认字体16px）即1em=16px
rem：相对长度单位，rem始终都是相对html根元素，所以rem不会受到对象内文本字体尺寸影响，只要改变根元素就能改变所有字体大小
vh和vw：视口，浏览器窗口大小的单位，不受显示器分辨率的影响。vm是可视窗口的宽度单位，1vm=可视窗口的百分之一，窗口大小为1800px时，1vm就是18px，vh是可视窗口的高度
媒体查询+rem
计算方法
vw+rem方法
移动端布局重置样式
*{margin: 0;padding: 0;}
li{list-style: none;}
a{text-decoration: none;color: #333;}
html,body{height: 100%;}
body{font-family: "微软雅黑";font-size: 16px; display: flex;flex-direction: column;}
h1,h2,h3,h4,h5,h6{font-weight: normal;}
img{vertical-align: top;}
/**取消滚动条**/
::-webkit-scrollbar{
display: none;
}
html{font-size:13.33vw ;} /**设计图为750px时**/
grid网格布局