一、文本多列布局：column
（1） column-width:每一栏的宽度
栏的数目：默认随总大小的变化而变化
（2）column-count:设置的总栏数
默认的宽度，随总宽度变化而变化
（3）column-gap:栏与栏之间的宽度
影响每栏的宽度
（4）column-rule:分隔线
column-rule-color：分隔线的颜色
column-rule-width:分隔线的宽度
column-rule-style:分隔线的样式
column-rule:color width style
注意：分隔线不占位，不会对周边有影响
（5）column-span:栏的合并
1：占一栏
all：占所有栏（合并栏）
（6）兼容问题：（www.caniuse.com搜索）
IE9及以下版本不支持，其他低版本现代浏览器的兼容，需在原本代码基础上加再加一行或多行前缀。
二、弹性盒子
（1）概念：
一种新布局模式。对子元素进行布局，排列，对其以及空白区域的分配。
弹性盒：弹性盒容器
弹性盒的元素：弹性盒项目
（2）方式：
块级弹性盒： display:flex（从上往下一列排列）
行级弹性盒： display: inline-flex（从左往右一行排列）
主要区别：容器与容器之间的摆放，容器内部布局相互之间不受影响
（3）主轴与侧轴
主轴：子元素布局中的第一排列方向
侧轴：子元素布局排列的第二方向
（4）主轴的方向：flex-direction
row:从左往右（默认）
row-reverse:从右往左
column:从上往下
column-reverse:从下往上
(5)主轴元素的对齐方式：justify-content
flex-strat:起点对齐
flex-end:终点对齐
center:居中对齐(默认没有间隙）
space-arround：四周都空白（中间元素空白相等，最两边空白宽度是中 间的一半）
space-evenly:四周都空白（所有空白宽度都相等，平分宽度）
space-between:中间有空白（子元素中间所有空白宽度相等，最两边没有空 白）
（6）侧轴对齐方式：align-items
flex-start:侧轴起点对齐
flex-end：侧轴终点对齐
center:侧轴居中对齐
baseline:内容基线对齐
stretch:当子项没有设置高度时，拉伸子项高度，占满整个容器
（7）是否换行：flex-wrap
nowrap:不换行
wrap:正常换行
wrap-reverse:反转换行（上下反转）
（8）侧轴内容对齐方式：align-content (和主轴对齐方式justify-content一样)
（9）align-self:侧轴子元素，单独设置自己的对齐方式（在弹性盒项目中设置）
（10）弹性盒项目排序的权重：order（在弹性盒项目中设置）
弹性盒项目默认值为0
权重越大，排列越靠后
order的值可以为负数
当值相同时，根据HTML结构排列
（11）扩张比率：flex-grow(剩余的空白区域）
1.默认值为0
2.计算（eg）：
总大小：500px
项目：50*3=150
剩余空间：500-150=350
扩展总比率（项目的扩展比率相加）：4
1份扩展比率占：350/4=87.5px
（12）收缩比率：flex-shrink(放不下最基础的大小时收缩）
1.默认值为1
2.计算（eg）：
总大小：400px
项目：150*3=450px
缺空间：450-400=50px
收缩比率总和：3+2+2=7
1份收缩比率占：50/7=7.1428px
（13）基准值：flex-basis（当前项目默认宽度）
超过基准值总和 扩张
少于基准值总和 收缩
(14)设置垂直布局时，需要头部脚部固定，中间自适应，注意需将body和html的height设置为100%。
三、Less
（1）概念：编程语言，CSS预处理器语言，它包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件，只有在被编译后才能够被浏览器识别使用。除Less外，还有Sass。
（2）编译器：Koala
（3）运用（在.less文件中）
1.
/*
这是Less注释，会映射到CSS文件中
*/
2.
// 这是Less注释，但不会映射到CSS文件中
3.文件导入
导入CSS，会直接在CSS文件中添加导入语句
@import "04.css";
导入Less，则会将Less文件中的内容编译后，导入CSS文件中
@import "05.less;
4.变量
变量的定义
@变量的名称：变量的值
例如：
@LightColor：red；
@LayoutWidth:1200px;
@LightFontSize:30px;
@变量的使用：@变量名称
在字符串中使用@{变量名称}
例如：
li{
color:@LightColor;
border-color:@LightColor ;
font-size: @LightFontSize;
}
5.代码混入
a.无参数的混入
例如： .clearMagin{
margin-left:0px;
margin-right: 0px;
border:none;
outline: none;
}
ul{
.clearMagin;
}
b.有参数的混入
例如
.clearNumber(@num) {
margin-right: @num;
margin-left: @num;
}
ol{
.clearNumber(10px);
}
p{
.clearNumber(20px);
}
c.参数有默认值
1.当使用时，没有参数， 混入内部使用默认值
2. 当使用时， 带有参数， 混入内部使用传递过来的参数
例如： .clearNumberT(@num:5px)
{
margin-right: @num;
margin-left: @num;
}
.test{
.clearNumberT;
}
.box{
.clearNumberT(100px);
}
6.选择器嵌套
例如：
.contain{
width:300px;
height:300px;
.item{
width:200px;
height:200px;
&+p{
margin-top: 20px;
}
ul{
margin:0px;
padding:0px;
&:hover{
text-align: center;
}
li{
border:blue 2px solid;
float:left;
width:50px;
height: 50px;;
}
}
}
}
7.继承
例如：
ul{
margin:0px;
background:grey;
}
p{
color:skyblue;
}
li:extend(p){
font-size:20px;
}
8.运算
可以+ - * /运算
li{
width: @LightFontSize;
font-size:@LightFontSize - 10px;
color: #ab8765 * 2;
}
