移动开发day2_css预处理器

移动开发day2_css预处理器_flex布局

css预处理器

一种技术，可以提高编写css代码的技术而已。

有3种预处理器常见

less使用流程

编写符合less语法的less文件
使用工具将less编译成 css

在网页当中引用编译好的 css文件

  <link rel="stylesheet" href="./css/01.css">

注意

浏览器根本就不认识什么less sass。。
浏览器只认识熟悉 css文件

less的语法

less语法是完全兼容css语法的

在less文件中，直接写入css代码是正确的语法。

less所有的语法不止这一些但是上课讲解的足够使用

变量语法

电商的网站很多页面
主题颜色天猫京东都是红色美团绿色苏宁黄色唯品会粉红色
让把天猫的主题颜色红色改成蓝色！！！
1. 要改的标签很多
2. 出错
3. 技术含量
4. 领导骂你

@color: green;
header {
  background-color:@color;
}    
main {  
  background-color: @color;
}
footer {
  background-color: @color;
}

less语法

嵌套

div{
  background-color: red;
  >p{
    color: yellow;
  
  }
  a{
    background-color: pink;
  }
  .redCls{
    background-color: red;
  }
  /* 伪元素的冒号前面 加一个符号 &  */
  &:before{
    content: "南京路";
  }
}

less嵌套

运算

body {
  width: 777px;
  /* 宽度 = 宽度的一半  */
  /*  height: 388.5px; */
  /* 除法 */
  height: 777px/2;
  /* 乘法 */
  font-size: 10px * 2;
  /* 加法 */

  /* 
  运算符前面不能加空格
  margin-left: 50px +7; 
  */
  margin-left: 50px+7;

  /* 减法 */
  margin-right: 50px-8;
}

运算

flex布局

flex布局 = flex盒子 = 伸缩布局 = 伸缩盒子 = 弹性布局 = 弹性盒子

就是一种新一点的布局技术

传统布局和 flex布局的比较

传统布局大量的使用定位浮动左右的margin 。。。

传统布局有哪些特点

兼容性好
使用比较繁琐

flex布局的特点

兼容性差一点，主要用在移动端上
使用简单方便

父项的属性

5个属性

设置主轴的方向

在flex布局中，一直是存在两个轴

主轴

默认情况下主轴的方向 = x轴从左到右

侧轴

默认情况下侧轴的方向 = y 轴从上到下

设置主轴的方向 flex-direction
1. row 左到右
2. column 上到下
3. 。。。。
设置主轴子项的对齐方式 justify-content
1. flex-start
2. flex-end
3. center
4. space-between
5. space-around
设置侧轴子项的对齐方式 -单行 align-items
1. flex-start
2. flex-end
3. center
设置侧轴子项的对齐方式 -多行 align-content
1. flex-start
2. flex-end
3. center
4. space-between
5. space-around
换行属性 flex-wrap
1. wrap;

子项的属性

设置子项自己在侧轴上的对齐方式 align-self
1. flex-start
2. flex-end
3. center
设置子项自己在主轴上的排列顺序 order
1. 默认值都是 0
2. 值越小越靠前
设置子项占父项的宽度的比例 flex
1. 按照比例来添加对应的值

补充

结构伪类选择器中选择前几个的公式

      a:nth-child(-n+3){
        border-bottom: 1px solid #fff;
        background-color: red;
      }

结构伪类选择器中选择后几个的公式

      a:nth-last-child(-n+3){
        border-bottom: 1px solid #fff;
        background-color: red;
      }

字体颜色继承

    color: inherit;

当前的颜色currentColor

边框颜色等于字体的颜色

border: 1px solid currentColor

注意

flex布局是可以和传统布局一起使用
1. 当代码量一样的情况下优先使用flex
2. 某个效果，那个代码容易实现，就使用那个代码就可以了
某个布局效果用什么样的技术实现得比较快就使用哪个技术