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

2023-07-19 10:38:10

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. 某个效果，那个代码容易实现，就使用那个代码就可以了
某个布局效果用什么样的技术实现得比较快就使用哪个技术

码农公寓