多列、弹性盒子和预处理

一、文本多列布局：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文件中）

这是Less注释，会映射到CSS文件中

// 这是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);

}

.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;

}

color:skyblue;

}

li:extend(p){

font-size:20px;

}

8.运算

可以+ - * /运算

li{

width: @LightFontSize;

font-size:@LightFontSize - 10px;

color: #ab8765 * 2;

}

多列、弹性盒子和预处理

一、文本多列布局：column

二、弹性盒子

三、Less

你可能感兴趣的:(多列、弹性盒子和预处理)