css笔记--15

1.less的语法

1）less中的单行注释，注释中的内容不会被解析到css中；而css中的注释，内容会被解析到css文件中

2）变量，在变量中可以存储一个任意的值，并且我们可以在需要时，任意修改变量中的值

变量的语法：@变量名

3）使用变量时，如果是直接使用，则以@变量名的形式使用即可

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

5）变量发生重叠时，会优先使用比较近的变量

6）可以在变量声明前就使用变量

less中代码
 

.box1{
    background-color: aquamarine;
    .box2{
        background-color: black;
        .box4{
            background-color: azure;
        }
    }
    
    .box3{
        background-color: red;
    }
}
@a:200px;
@c:box6;
.box5{
    width:@a;
}
.@{c}{
    width:@a;
}

css中代码 

.box1 {
  background-color: aquamarine;
}
.box1 .box2 {
  background-color: black;
}
.box1 .box2 .box4 {
  background-color: azure;
}
.box1 .box3 {
  background-color: red;
}
.box5 {
  width: 200px;
}
.box6 {
  width: 200px;
}

2.父元素和扩展

1）&表示外层的父元素

2）:extend( ) 对当前选择器扩展指定选择器的样式（选择器分组）

3）直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制

.p3{
.p1();
}

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

less中代码 

.p4(){
    width:200px;
    height:200px;
    background-color:#bfa;
  }
  .p5{
    .p4;
  }

 css中代码

.p5 {
  width: 200px;
  height: 200px;
  background-color: #bfa;
}

3.混合函数

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

2）调用混合函数，按顺序传递参数

less代码

 .test(@w,@h,@bg-color){
    width:@w;
    height:@h;
    background-color: 1px solid @bg-color;
  }
  div{
    .test(200px,300px,#bfa)
  }

css代码

div {
  width: 200px;
  height: 300px;
  background-color: 1px solid #bfa;
}

3）顺序可以改变，但在设置值的时候需要在值前面加上变量名

4）average(颜色1,颜色2)可以取平均值颜色 

5）darken(颜色,比颜色深的百分比)

4.less的补充 

1）在less中所有的数值都可以进行直接运算

+   -    *    /

2）可以用import来将其他的less映入到当前的less中

5.弹性盒简介

1）flex(弹性盒、伸缩盒)

是css中的又一种布局手段，它主要用来代替浮动来完成页面的布局

flex可以使得元素具有弹性，让元素可以跟随页面的大小的改变而改变

2）弹性容器

要使用弹性盒，必须先将一个元素设置为弹性容器

3）通过display来设置弹性容器

display:flex  设置为块级弹性容器

display：inline-flex  设置为行内的弹性容器

4）弹性元素

flex-direction 指定容器中弹性元素的排列方式

可选值：

row：默认值，弹性元素在容器中水平排列（左向右）

row-reverse：弹性元素在容器中反向水平排列（右向左）

column：弹性元素纵向排列（自上而下）

column-reverse：弹性元素方向纵向排列（自下而上）

5）主轴：弹性元素的排列方向

6）测轴：与主轴方向垂直

7）弹性元素的属性：

flex-grow  指定弹性元素的伸展的系数，默认值为0

当父元素有多余的空间时，子元素如何伸展

父元素的剩余空间，会按照比例进行分配

8）flex-shrink指定弹性元素的收缩系数

当父元素中的空间不足时，如何对子元素进行收缩

6.弹性容器上的样式

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

可选值：

nowrap 默认值，元素不会自动换行

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

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

2）flex-flow：wrap和direction的简写属性

3）justify-content：

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

可选值：
flex-start：元素沿着主轴起始边排列

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

center：元素居中排列

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

space-between：空白均匀分布到元素间，终边和始边处没有空白

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

4）align-items：

元素在辅轴上如何对齐

元素间的关系

可选值：

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

flex-start：元素不会拉升，沿着辅轴起始边对齐

flex-end：沿着辅轴的终边对齐

center：居中对齐
 

justify-content:center;
align-items:center;

最简单的设置元素居中的方式

5）辅轴空白空间的分布

align-content

6）align-self：用来覆盖当前弹性元素上的align-items

7.会弹的导航条

.nav{
            width:1210px;
            height:48px;
            line-height: 48px;
            margin: 50px auto;
            background-color: #e8e7e3;
            display:flex;
        }
        .nav li{
            flex-grow: 1;
        }
        .nav a{
            display: block;
            color:#808080;
            text-decoration: none;
            font-size: 16px;
            text-align: center;
        }

8.弹性元素上的样式

1）弹性元素的缩减系数

缩减系数的计算方式比较复杂

缩减多少时根据缩减系数和元素大小来计算

2）flex-basis指定的是元素在主轴上的基础长度

如果主轴是横向的，则该值指定的就是元素的宽度

如果该值是纵向的，则该值指定的就是元素的高度

默认值是auto，表示参考元素自身的高度或宽度

如果传递了一个具体的数值，则以该值为准

3）order：决定弹性元素的排列顺序

9.像素

1）屏幕是由一个一个发光的小点构成，这一个个的小点就是像素

2）分辨率：1920x1080说的就是屏幕中小点的数量

3）在前端开发中，像素要分成两种情况讨论：css像素和物理像素

物理像素：上述所说的小点点就是物理像素

css像素：编写网页时，我们所用的像素都是css像素

浏览器在显示网页时，需要将css像素转换为物理像素然后再呈现

一个css像素最终由几个物理像素显示，由浏览器决定

默认情况下在pc端，一个css像素=一个物理像素

4）视口

视口就是屏幕中用来显示网页的区域

可以通过查看视口的大小，来观察css像素和物理像素的比值

默认情况下：

视口宽度：1920px（css像素）

1920px（物理像素）

此时，css像素和物理像素的比值是1：1

放大两倍的情况，

视口宽度  960px（css像素）

1920px（物理像素）

此时，css像素和为物理像素的比值是1：2

我们可以通过改变视口的大小来css像素和物理像素的比值