弹性盒子和预处理

弹性盒子和预处理

弹性盒子

• 弹性盒子是CSS3的一种新的布局模式。

  引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行 排列、对齐和分配空白空间。

• display

  • flex

  • inline-flex

  • 设置flex布局后，子元素的float、clear和vertical-align属性将失效

    • .box{ display: flex; }
      .box{ display: inline-flex; }

• 容器属性(设置在父元素上面)

  • flex-direction 决定主轴的方向(即项目的排列方向)

    • row （默认值）：主轴为水平方向，起点在左端。

    • row-reverse：主轴为水平方向，起点在右端。

    • column：主轴为垂直方向，起点在上沿。

    • column-reverse：主轴为垂直方向，起点在下沿。

  • justify-content 定义了项目在主轴上的对齐方式

    • flex-start （默认值）：左对齐。

    • flex-end：右对齐。

    • center： 居中。

    • space-between：两端对齐，项目之间的间隔都相等。

    • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的 间隔大一倍

    • space-evenly : 所有间隔都相等，包括项目与项目，项目与边框。

  • align-items 定义项目在交叉轴上如何对齐

    • flex-start：交叉轴的起点对齐。

    • flex-end：交叉轴的终点对齐。

    • center：交叉轴的中点对齐。

  • flex-wrap 默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一 条轴线排不下，如何换行。

    • nowrap （默认）：不换行。

    • wrap：换行，第一行在上方。

    • wrap-reverse：换行，第一行在下方。

• 项目属性 （设置在子元素上面）

  • order 定义项目的排列顺序。数值越小，排列越靠前，默认值为0

    • 〈integer〉：数值

  • flex-grow 定义项目的放大比例，默认为0,即如果存在剩余空间，也不放大。

    • 〈number〉: 数值

  • flex-shrink 定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

    • 〈number〉: 数值

  • align-self 定义弹性容器内被选中项目的对齐方式，和弹性容器的align-items属性作用相同， 此属性用于项目。

    • auto 默认值。元素继承了它的父容器的align-items属性。如果没有父容器 则为"stretch"。

    • stretch占满整个容器的髙度。自身不设置固定高度

    • center交叉轴的中点对齐。

    • flex-start 交叉轴的起点对齐。

    • flex-end 交叉轴的终点对齐。

    • baseline 项目的第一行文字的基线对齐。

预处理

• 预处理编译工具koala

  • http://koala-app.com/index-zh.html

• Less基本语法

  • 注释

    • less共有两种注释风格。

      • 标准的CSS注释/* comment */ ,会保留到编译后的文件。

      • 单行注释// comment,只保留在less源文件中，编译后被省略。

  • import导入样式

    • 引入.css文件同于css的import命令。

      @import "reset.css"；

  • 变量

    • LESS允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来 更加简单。

    • 变量以@开头，变量名与变量值之间用【冒号】分隔

      • @color:red;
        div {
          color: @color;
        }

    • 变量嵌套在字符串中使用时，必须写在@{}中

      • @side:left;
        .box {
          border-@{side}-5px;
        }

  • 混入

    • 混合可以将一个定义好的class A引入到另一个class B中，从而实现class B继承 class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

    • 调用class

      • .border {
            border: 2px solid red;
        }
        #box {
            color:blue;
            .border;
        }

    • 混入参数-未设置默认值，此时调用必须传入参数

      • .border-radius(@radius) {
            border-radius: @radius;
          -moz-border-radius: @radius;
            -webkit-border-radius: @radius;
        }

    • 混入参数-设置了默认值

      • .border-radius(@radius:5%) {
            border-radius: @radius;
          -moz-border-radius: @radius;
            -webkit-border-radius: @radius;
        }

    • 使用@arguments来引用所有传入的变量

      • .box-shadow(@x:0, @y:0, @blur:1px, @color:#000){
            box-shadow:@arguments;
          -moz-box-shadow:@arguments;
            -webkit-box-shadow:@arguments;
        }

  • 嵌套

    • 选择器嵌套

    • div {
           300px;
        height: 300px;
          background-color: red;
          .box {
              color: blue;
              span {
                  margin-bottom: 10px;
              }
          }
      }

  • 继承

    • .public {
           300px;
        height: 300px;
      }
      
      // div .box {
      //     &:extend(.public);
      //     background-color: red;
      // }
      div .box:extend(.public) {
          background-color: blue;
      }
      

  • 运算

    • .box {
           200px*3-50px;
      }