CSS-3&&LESS

变量的语法：@变量名：变量值

变量作为类名，或者一部分值使用时必须以@{变量名}的形式使用

变量发生重名时，会优先使用比较近的变量，可以在变量声明前使用变量

&表示父元素：

extend（）对当前选择器扩展指定选择器样式

使用类选择器时可以在选择器后面添加一个括号，这时实际上就创建了一个mixins

混合函数：在函数中可以直接设置变量

混合函数赋值可以按照顺序，也可以不按照顺序。

弹性容器：display:flex，display:inlline-flex 设置行内弹性容器

弹性容器的子元素是弹性元素

flex-direction:弹性容器主轴方向

row:默认值,自左向右；row-reverse：自右向左；column:自上向下；column-reverse：自下向上；

flex-wrap：设置弹性元素在弹性容器中自动换行

可选值：nowrap 默认值，不会自动换行

wrap：元素沿着辅轴自动换行

wrap-reverse：元素沿着辅轴反方向换行

flex-flow:wrap和direction的简写属性

justify-content:

如何分配主轴上的空白空间（主轴上的元素如何排列）

可选值：

flex-start:元素沿着主轴起边排列

flex-end：元素沿着主轴终边排列

center:元素居中排列

space-around：空白分布到元素两侧

space-between:空白均匀分布到元素间

space-evenly：空白分布到元素的单侧

flex-grow:指定弹性元素的伸展的系数，父元素有多余空间时，子元素会按照比例分配

flex-shrink:父元素不足以容纳所有的子元素，如何对子元素收缩。

 

align-tiems:元素在辅轴上如何对齐

可选值：

stretch：默认值，将元素的长度设置为相同的值

flex-start:元素不会拉伸，延着辅轴起边对齐

flex-end：延着辅轴终边对齐

center：居中对齐

baseline：基线对齐

align-self:用来覆盖当时弹性元素上的align-items

fllex-basis：指定元素在主轴上的基础长度

默认：auto，或者指定一个具体的值，，如果主轴是横向的，指定的是宽度，如果主轴是纵向的，指定的是高度

flex:可以省弹性元素的三个样式

flex：增长，缩减，基础

initial：“flex：0 1 auto”，

auto：“flex：1 1 auto”，

none：“flex：0 0 auto”，

 

像素：

由于不同设备视口和像素比不同，所以同样的375像素在不同设备先是不一样的

在移动端开发时，不可以用px

vw：表示视口宽度

100vw=一个视口的宽度

1vw=1%视口宽度

或者将网页视口设置为完美视口

    <meta name="viewport" content="width=device-width, initial-scale-1.0">

结论：以后写移动端页面，把上面这玩意写上

 

响应式布局

网页根据不同设备或窗口大小呈现不同的效果

 

媒体查询：

语法@media (only)  screen{

background-color：#bfa

}

媒体类型：all：所有设备，print：打印设备，screen：带屏幕的设备，speech：屏幕阅读器

可以用逗号连接多个媒体类型，表示或的关系

only 可以不写，注意用于兼容老版本

媒体特性：width：视口宽度，height：视口高度

min-width：视口最小宽度（视口大于指定宽度时生效）

max-width：视口最大宽度（视口小于指定宽度时生效）