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

 

css预处理器

一种技术，能够提升编写css代码的技术而已。

有3种预处理器常见

1. less

2. sass

3. stylues

less使用流程

1. 编写符合less语法的less文件

2. 使用工具 将less编译成 css

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

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

注意

1. 浏览器根本就不认识 什么less sass。。

2. 浏览器 只认识 熟悉 css文件

less的语法

less语法是彻底兼容css语法的

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

 

less全部的语法 不止这一些 可是 上课讲解的足够使用

 

变量语法

1. 电商的网站 不少页面

2. 主题颜色 天猫 京东 都是红色 美团 绿色 苏宁 黄色 惟品会 粉红色

3. 让 把天猫的主题颜色红色 改为 蓝色！！！

   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 。。。

传统布局有哪些特色

1. 兼容性好

2. 使用比较繁琐

flex布局的特色

1. 兼容性差一点，主要用在移动端上

2. 使用简单方便

 

 

父项的属性

5个属性

设置主轴的方向

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

主轴

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

侧轴

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

 

 

 

1. 设置主轴的方向 flex-direction

   1. row 左 到 右

   2. column 上到下

   3. 。。。。

2. 设置 主轴 子项的对齐方式 justify-content

   1. flex-start

   2. flex-end

   3. center

   4. space-between

   5. space-around

3. 设置 侧轴 子项的对齐方式 -单行 align-items

   1. flex-start

   2. flex-end

   3. center

4. 设置 侧轴 子项的对齐方式 -多行 align-content

   1. flex-start

   2. flex-end

   3. center

   4. space-between

   5. space-around

5. 换行 属性 flex-wrap

   1. wrap;

子项的属性

1. 设置子项 本身 在侧轴上的对齐方式 align-self

   1. flex-start

   2. flex-end

   3. center

2. 设置子项 本身 在主轴上的排列顺序 order

   1. 默认值 都是 0

   2. 值越小越靠前

3. 设置子项 占父项的宽度的比例 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

 

注意

1. flex布局是能够和传统布局一块儿使用

   1. 当代码量同样的状况下 优先使用flex

   2. 某个效果，那个代码容易实现，就使用那个代码就能够了

2. 某个布局效果 用什么样的技术实现得比较快 就使用哪一个技术