两周html css,htmal & css 学习第三周总结（中）

好家伙，看完了新版教学视频，发现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中直接如下按包含(层级)关系书写

less语法

它所表示的就是为body中的div设置了宽高，转换成css就是如下图

转换成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！