弹性盒子和预处理
弹性盒子
-
弹性盒子是CSS3的一种新的布局模式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行 排列、对齐和分配空白空间。
-
display
-
容器属性(设置在父元素上面)
-
flex-direction 决定主轴的方向(即项目的排列方向)
-
row (默认值):主轴为水平方向,起点在左端。
-
row-reverse:主轴为水平方向,起点在右端。
-
column:主轴为垂直方向,起点在上沿。
-
column-reverse:主轴为垂直方向,起点在下沿。
-
-
justify-content 定义了项目在主轴上的对齐方式
-
flex-start (默认值):左对齐。
-
flex-end:右对齐。
-
center: 居中。
-
space-between:两端对齐,项目之间的间隔都相等。
-
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的 间隔大一倍
-
space-evenly : 所有间隔都相等,包括项目与项目,项目与边框。
-
-
align-items 定义项目在交叉轴上如何对齐
-
flex-start:交叉轴的起点对齐。
-
flex-end:交叉轴的终点对齐。
-
center:交叉轴的中点对齐。
-
-
flex-wrap 默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一 条轴线排不下,如何换行。
-
-
项目属性 (设置在子元素上面)
预处理
-
预处理编译工具koala
-
Less基本语法
-
注释
-
import导入样式
-
引入.css文件同于css的import命令。
@import "reset.css";
-
-
变量
-
混入
-
混合可以将一个定义好的class A引入到另一个class B中,从而实现class B继承 class A中的所有属性。我们还可以带参数地调用,就像使用函数一样。
-
调用class
-
.border {
border: 2px solid red;
}
#Box {
color:blue;
.border;
}
-
-
-
.border-radius(@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
-
-
混入参数-设置了默认值
-
.border-radius(@radius:5%) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
-
-
使用@arguments来引用所有传入的变量
-
-
嵌套
-
继承
-
运算
-
.Box { width: 200px*3-50px; }
-
-
-
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。