样式浅谈2

一、弹性盒子

    1. 父元素必须指定display：-webkit-box/inline-block;
    2. -box-origent:指定子元素的排列方式：vertical/
    3. box-pack:center，移动到父元素的某个位置；box-align:center,指定每个元素的基于某根基线对齐。两者都需写在父元素中去。
    4. box-flex:(写在子元素中)值为某个数量值，配合box-origent使用，指定高度，按列排列，指定宽度，按行排列。
    5. box-direction:reverse（倒序）
    6. box-flex-grounp：按内容占的内容来分。

二、less语言

    1. html导入插入：<link rel="stylesheet/less"type="text/cess"href="URL">
    <script src="less.js"type="text/javescript"><script>
    2. 可任意变量，格式为 @变量名
    3. 为了兼顾兼容性，通常在属性前加前缀
    -webkit-
    -moz-
    -ms-
    -o-
    4. 定义类名为 .类名
    5. .类名(...){
       属性：@arguments.
    }/*此处的...可代替所有变量，@arguments代表所有属性值*/
    6. 引用时
    类名{
        .类名（实参1，实参2，实参3，......）
    }
    7. 类名文件
    #类文件名{
     .类名1（@形参1，@形参2，@形参3）{
      属性1：@形参1；
      属性2：@形参2；
      属性3：@形参3；}
     .类名2（@形参1，@形参2，@形参3）{
      属性1：@形参1；
      属性2：@形参2；
      属性3：@形参3；}
      }，设置完了单独存于另一个只存样式的.less中，等待召唤。
     8. 导入到less中，需要用
       @import "文件名";
     9. 定义背景图变量
      @变量名:"url"(此处只需到图片保存的文件夹路径即可)
     10. 导入背景图变量的方法
     background:url("@{变量}/图片名");

三、scss

     1 .scss:支持属性分枝设置，定义变量用$，定义类名@mixin，引用加前缀@include
     2. .scss、. html、.css之间的关系：
     .scss用于编译，.css用于解析，然后导入到.html中显示
     新建一个.scss文件后需用kala解析成一个.css文件，再编译，完成后刷新保存即可。