前端学习日记12

多列文本布局

（1）lumn-count: 3; 分栏的数量
（2） column-gap: 50px; 栏目和栏目之间的间距
（3）column-width: 500px; 栏目的宽度
（4）column-rule: 5px dotted yellow; 栏目和栏目之间的边线（边框一样）
（5） column-span: all; 标题横跨的列数（1 all）
【注】：count和width只需设置一个

CSS3弹性盒子

弹性盒子是CSS3的一种新布局模式，是一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
​
1、弹性盒子的组成：
弹性容器、弹性子元素
弹性容器内包含了一个或多个弹性子元素。

2、 弹性容器的设置：
display：flex | inline-flex
【注意】： 弹性容器外及其子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性盒内布局
① 采用flex布局的元素称为flex容器，其子元素自动成为容器成员，称为flex项目
② 容器中默认存在两根轴，主轴和交叉轴
③ 默认是主轴排列

容器属性

（1）flex-direction 属性：定义项目的排序方向
可选值：
①row 默认值，主轴为水平轴，左端为起点
②row-reverse 主轴为水平轴，右端为起点
③column 主轴为垂直轴，上端为起点
④column-reverse 主轴为垂直轴，下端为起点

（2）justify-content属性：定义项目在主轴上的对齐方式
可选值：
①flex-start 默认值，左对齐
②flex-end 右对齐
③center 居中
④space-between 两端对齐，项目之间间隔相等
⑤space-around 每个个项目两侧间隔相等。
⑥space-evenly 每两个项目之间间隔相等

（3）align-items属性：定义项目在交叉轴上对齐方式
可选值：
①flex-start 交叉轴起点对齐
②flex-end 交叉轴终点对齐
③center 交叉轴中点对齐
④baseline 项目第一行文字的基线对齐
⑤stretch 默认值，如果项目未设置高，将占满整个容器

（4）flex-wrap属性：定义项目的换行
可选值：
①nowrap 默认值，不换行
②wrap 换行，第一行在下方
③wrap-reverse 换行，第一行在上方

项目属性

（1）order属性：定义项目的排序，order值越大排列越靠后，默认值为0

（2）flex-grow属性：定义项目的放大比例，默认为0，即若存在剩余空间，也不放大
可选值：number
【注意】：若项目flex-grow值都为1，则平分剩余空间，若其中一个为2，其他为1，则前者所占剩余空间比其他多一倍

（3）flex-shrink属性：定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
可选值：number
【注意】：如果项目flex-shrink都为1，空间不足时，等比例缩小。如果一个为0，其余为1，空间不足时，前者不缩小，负值对改属性无效

（4）align-self属性：定义容器内被选中项目的对齐方式，和align-item属性作用相同
可选值：auto 默认值，继承父容器的align-item属性，如果父容器没有，则为stretch
①flex-start 交叉轴起点对齐
②flex-end 交叉轴终点对齐
③center 交叉轴中点对齐
④baseline 项目第一行文字的基线对齐
⑤stretch 默认值，如果项目未设置高，将占满整个容器

（5）flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。 一般使用flex:1; 设置子元素平分容器的大小

（6）flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
默认值：0 1 auto
flex-basis: 设置弹性盒子的初始大小

calc()函数的使用

calc(数学表达式)函数用于动态计算长度值

语法 calc(表达式)； eg. calc(100px - 10px);
【注意】：运算符前后保留一个空格。 表达式支持+，-，*，/ 遵循标准的数学运算优先级规则

css预处理器（less）

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
插件: easy less
​
优点：
1.结构清晰，便于扩展，适应性强，可读性强
2.可以方便地屏蔽浏览器私有语法差异
3.可以轻松实现多重继承
4.完全兼容 CSS 代码
5.减少重复的机械劳动，便于维护

less基础

1、注释
（1）// 注释1 单行注释，不可以被编译到css里
（2）/注释2/ 标准注释，可以被编译到css里

2、导入样式
（1）语法 @import “路径”;
（2）导入.css文件 ：仍然作为一个外部导入文件，不合并 不可以省略扩展名
（3）导入.less文件 ：导入文件的内容 会与当前文件发生合并 可以省略扩展名
（4）引入的文件内容与当前文件内容同时作用于页面

3、less语法
（1）变量

@cl:pink; 定义变量 
.box2{ background: @cl; 使用变量 }

（2）嵌套（&引用父元素）

.box4{ 
			.left{ float: left; 
				div{ width: 100px; background: @cl; 
							a{ color:red; color: @cl; 
									&:hover{ color: green; } 
								} 
						} 
				} 
		.right{ float: right; color: @cl; } 
}

（3）混入：可以将一个定义好的class在另一个中使用 可以传参

（4）运算 ：可以使用算术运算符（+，-，*，/）

.public{ width:100px-80; }