好家伙，看完了新版教学视频，发现css3中有很重要的新增内容，所以写一篇文章应该会比较长，还是再分成两篇。这是倒数第二篇html&css的整理笔记了，css3的一些关于动效动画的内容等学完了JavaScript会再补充整理～
开学可以进入新的学习了，到时要实习尽量保证每天看几集教程吧，仍定期总结，不过应该不会使用简书平台了，可能会总结在GitHub上，hhh～
本文整理的内容及新增的学习内容flex（重要）和less预处理语言。
1.弹性盒（flex）
在学习float时就感概网页布局好复杂，不够灵活不说还会出现各种问题，float引起的高度塌陷问题我听了两三遍才厘清，然后就发现弹性盒这个知识点，新版本浏览器基本能兼容，移动端更是不用多想直接用就是～不仅又感慨前端知识更新好快，不进则退则淘汰（颤抖==）
言归正传，flex就是一个新的布局工具，十分灵活且不会出现float那样麻烦的问题，也提供了一个更为方便的写代码方式。
弹性盒涉及两个基本内容，弹性容器和弹性元素，以及两个重要概念，主轴和辅轴。
（1）基本概念
1）弹性容器
要使用弹性盒进行布局首先要将元素设置为弹性容器，使用display属性，选择flex或inline-flex，将元素变为弹性容器：
display：flex （设置为块级弹性容器）
或
display：inline-flex（设置为行内弹性容器）
设置后，这个元素中的子元素横向排列，且不会脱离文档流使父元素高度塌陷。
2）弹性元素
弹性容器的子元素即是弹性元素（弹性项）。
弹性容器和弹性元素可以互相嵌套，即是一个元素可以同时是弹性容器和弹性元素。
3）主轴和辅轴
弹性元素排列的方向即为主轴方向；
与主轴垂直的方向就是辅轴方向（与平面直角坐标系方向规则一样。）
（2）常用样式
1）弹性容器
flex-direction
flex-wrap
flex-flow
justify-content
align-content
align-items
flex-direction，用来指定容器中弹性元素的排列方向，可选值
：row 默认（按国家习惯默认方向），弹性元素会水平排列，从左到右排列
：row-reverse 弹性元素在容器中反向水平排列，从右到左排列
：column 弹性元素在容器中纵向排列，从上到下
：column-reverse 弹性元素在容器中纵向排列，从下到上
同时，设置flex-direction的值也就指定了弹性盒主轴的方向。
flex-wrap，用以设置弹性元素换行形式，可选值
：nowrap 默认值，元素不会自动换行
：wrap 元素沿着辅轴方向自动换行
：wrap-reverse 元素沿着辅轴反方向换行
flex-flow 是flex-direction和flex-wrap的简写属性，两个属性的值用空格隔开即可
justify-content 设置如何分配元素在主轴上的对齐方式，可选值：
：flex-start 默认值，表示元素沿着主轴起始位置排列
：flex-end 表示元素沿着主轴终止位置排列
：center 表示元素沿着主轴居中排列
：space-around 父元素空白空间平均分布在元素主轴两侧
：space-between 父元素的空白空间平均分布在元素主轴中间，即子元素在主轴平均分布，且子元素顶着父元素的起始和终止位置
：space-evenly 父元素空白空间平均分布在元素主轴一侧，也就是子元素在主轴上平均分布了，且父元素起始和终止位置均留有空白（兼容性不是很好，慎重使用）
align-content 设置如何分配元素在辅轴上的对齐方式，可选值：
：flex-start 默认值，表示元素沿着辅轴起始位置排列
：flex-end 表示元素沿着辅轴终止位置排列
：center 表示元素沿着辅轴居中排列
：space-around 父元素空白空间平均分布在元素辅轴两侧
：space-between 父元素的空白空间平均分布在元素辅轴中间，
：space-evenly 父元素空白空间平均分布在元素辅轴一侧
align-items 设置元素在辅轴上如何对齐，可选值
：stretch 默认值，将元素长度拉伸且每行设置为相同值
：flex-start 元素不会被拉伸，并沿着辅轴起始位置对齐
：flex-end 元素不会被拉伸，并沿着辅轴终止位置对齐
：center 元素不会被拉伸，并沿着辅轴居中对齐
：baseline 元素不会被拉伸，并沿着辅轴基线对齐
2）弹性元素
弹性元素可以类比弹簧，有本身的长度还有拉长和缩短的长度。
flex-grow
flex-shrink
flex-basis
flex
order
align-self
flex-grow，用以指定弹性元素的伸展系数，即当父元素有多余空间时，子元素如何伸展，按指定的值来进行分配，如
li:nth-child(1){flex-grow：1}
li:nth-child(2){flex-grow：2}
li:nth-child(3){flex-grow：3}
就是说这三个li会在原来大小基础上，按1:2:3的比例分配父元素空白空间，撑满父元素，
0表示不增长，仍是原来的长度。
flex-shrink，指定弹性元素的收缩系数，0表示不收缩，仍是原来的长度；元素越大缩减得越多
flex-basis， 指定元素在主轴上的基础长度，如果主轴是水平的，这个值就是元素宽度，原本设定的宽度会被覆盖；如果主轴是竖直的，这个值就是元素高度，原本设定的长度会被覆盖；默认值是auto，参考原本设置的长度和宽度
flex，简写属性，可以同时设置弹性元素的增长系数、收缩系数、基础长度的值，顺序固定。除了指定外，还有三个可选值
：initial 表示增长0 缩减1 基础长度auto
：auto 表示增长1 缩减1 基础长度auto
：none 表示增长0 缩减0 基础长度auto
order，用以设置弹性元素的排列顺序，用此属性实现只靠属性调整元素顺序而不用调整结构。
align-self，用以覆盖当前弹性元素上的align-items，即用来单独设置某个或某几个弹性元素的对齐方式
2.less预处理语言
这又是一个很强大的内容，源于大佬不习惯css语言语法而写出来的，看弹幕上说less语法结构很有亲切感，不过我什么都不知道，毕竟我还只是一只小菜狗罢了，手动doge～
在css中less语言主要是扩充css的一些功能，比如对变量的支持且兼容性好、对mixins的支持等，可以通过编写更少的代码实现更强大的功能，结构也更加清晰，还避免了选择器权重可能导致的样式不生效等等，目前只学了皮毛，但已经能清楚感觉到其强大了。我用vscode编写的，下载插件后，创建less文件，保存后自动编译生成一个css文件，对应less中编写的内容，需要注意引用外部样式表时仍需引用css文件（转换后的）。
（1）基本语法
1）无需使用后代选择器设置样式，直接按结构的层级编写（牛批！），如：
在less中直接如下按包含（层级）关系书写
它所表示的就是为body中的div设置了宽高，转换成css就是如下图
既方便阅读和理解，代码量也将大大减少。
2）使用//进行单行注释，不会解析到css文件中；css注释方法也可以使用，且会解析到css文件中。
3）多个相同变量名，采取就近原则。
4）使用@import可以引用其他的less文件，语法：@import“xxx.less”;
可以模块化管理less文件，方便维护。
（2）less变量
css原生的变量兼容性差，less兼容性更强，因此通常使用less来编写变量。
在变量中可以存储任意的一个值，并且可以任意的修改变量的值，比如设计时一个主体色发生改变，就可以通过编写时设置的变量一键更改所有用到这个变量的地方，大大提高维护效率。
语法：
定义时 @变量名：变量值；
使用时
1）直接使用：
选择器{属性名：@变量名；}
2）作为类名，或者一部分使用时：
.@{变量名1}{属性名：属性值；}
如：
@a:100px;
@b:box1
.@{b} {width:@a;
background-image:url"@{b}/1.png";}
3）引用出现过的属性其属性值
语法：
选择器{属性名1:属性值1；
属性名2:$属性名1；}
即可引用属性1的值
4）父元素选择器
在用层级书写样式时，如果需要对父元素设置样式，则直接使用&符号表示外层父元素，外一层是什么&符号就表示什么
5）extend
很有用的东西，如果两个元素有部分样式一致，也有不同的性质，用extend就不需要用选择器分组，直接写不同的性质，语法：
选择器2：extend（选择器1）{属性名：属性值；}
如：
.p1{width:100px;
height:100px;}
.p2{width:100px;
height:100px;
color:red;}
就可以写成
.p1{width:100px;
height:100px;}
.p2:extend(.p1){color:red;}
（3）Mixins
Mixins相当于混合函数，在Mixins中可以直接设置变量，定义几个变量，就需要设置几个变量的值，值需要一一对应且不可省略，如
.p1(@w,@h){width:@w;
height:@h;}
div{.p1(200px,200px);}
这就是创建了一个宽高200px的盒子
可以在定义变量时直接指定值作为一个默认值，如
.p1(@w:100px,@h:100px){width:@w;
height:@h;}
div{.p1(200px);}
此时省略的值就使用默认值，也就是说创建了一个宽200px,高100px的盒子。
先整理到这了，最后还有一些内容，不是很难，明天整理好，再写下感受，over！
