less

1、less

less中的变量

变量，在变量中可以储存一个任意的值

我们可以在需要时，任意的修改变量的值

变量的语法，@变量名

@:200px;
@b:blue;
@c:box6;

.box5{
    /*使用时，如果是直接使用则以@变量名的形式使用即可*/
    width: @a;
    color: @b;
}
	/*作为类名，或者一部分使用时必须以@{变量名}的形式使用*/
.@{c}{
    width: @a;
    background-image: url("@{c}/1.png")
}
@d:200px;
@d:300px;
div{
    /*变量发生重名时，会优先使用比较近的变量*/
    @d:115px;
    width:@d;
    height:@e;
}
	/*可以在变量声明前就使用变量*/
@e:335px;
div{
    width:300px;
    height:300px;
}

父元素和扩展

.box1{
    .box2{
        color:red;
    }
    >.box3{
        color:green;
        &:hover{
            /*此处的&指的是父元素>.box3*/
            color:blue;
        }
    }
    /*为box1设置一个hover，就表示外层的父元素*/
    &:hover{    /*此处的&指的是父元素box1*/
        color:yellow;
    }
}

/*extend()对当前选择器扩展指定选择器的样式*/
p1{
    width:100px;
    height:200px;
}

/*继承了p1的属性*/
p2.extend(.p1){
    color: red;
}

/*继承了p1的属性,第二种写法,直接就相当于将p1的样式在这里进行了复制
  mixin混合
*/
.p3{
    p1();
}
/*使用类选择器时可以在选择器后边添加一个括号，这时我们就创建了一个mixins,下面创建的p4相当于一个接口，不会在页面中展示*/
.p4(){
    width:100px;
    height:100px;
    background-color:blue;
}
.p5{
    .p4()
}

混合函数

//混合函数在混合函数中可以直接设置变量： .test(@a,@b,@c)
//可以传递默认值
.test(@a:100px,@b:200px,@c:red){
    width:@a;
    height:@b;
    horder:1px solid @c;
}
div{
    .test(300px); //在有默认值的情况下可以只传递一个参数，为第一个参数值
}
div{
    .test(200px,300px,blue)  //可以直接传参
}
div{
    .test(@c:blue,@a:100px,@b:200px) //可以指定参数名进行传参
}

less的补充

//可以直接引入其它文件里的less样式，相当于复制粘贴了里面的代码
@import "mycss.less";

.box1{
    //可以在less中进行数值的计算
    width: 100px + 100px;
    height: 100px/2;
    background-color: blue;
}

定位

相对定位：

position: relative

是相对于左上角定位的,开启定位后可以用left，right，top，bottom来调整位置

.div1 {
  width: 100px;
  height: 100px;
  background-color: aqua;
  position: relative;
  left: 50px;
  top: 50px;
}

绝对定位

position:absolute

1、相对于开启了相对定位的祖先元素，如果祖先元素都开了相对定位，那么离谁近就把谁当作定位点进行定位

2、开启了绝对定位的也脱离了文档流

3、绝对定位会改变元素的性质，行内变成块，块的宽度被内容撑开

4、绝对定位会使元素提升一个层级（div4脱离文档流后不设置定位会覆盖掉div5的模块）

.div1{
    width: 200px;
    height: 200px;
    background-color: aqua;
    position: relative;
    .div2{
        width: 100px;
        height: 100px;
        background-color:blanchedalmond;
        position: relative;
        .div3{
            width: 50px;
            height: 50px;
            background-color:cadetblue;
            position: absolute;
            left: 20px;
        }
    }   
}
.div4{
    width: 200px;
    height: 200px;
    background-color: rgb(0, 255, 42);
    position: absolute;
}
.div5{
    width: 400px;
    height: 400px;
    background-color: rgb(255, 0, 179);
}

固定定位

position: fixed

固定定位也是一种绝对定位，所以固定定位的大部分特点和绝对定位一样，唯一不同的是固定定位永远参照于浏览器的视口进行定位