css 样式赶紧来look

这些是泡泡同学整理笔记，发现结果忘记发出来的css方面的，于是立刻发出来，希望对你有帮助

css3样式

一.css3多列的设置
    1.规定元素应该被分隔的列数
    column-count
    取值:数字
    2.属性规定列之间的间隔
    column-gap 
    3.性规定列的宽度
    column-width 
    4.规定列之间规则的样式
     column-rule-style 
    5.规定列之间规则的宽度
    column-rule-width 
    6.规定列之间规则的颜色
    column-rule-color 
    7.规定元素应该横跨的列数
     column-span 
    8.规定设置 column-width 和 column-count 的简写属性
     columns 
二.css3弹性盒子
       注意:要先把父元素设置为弹性盒子(display:box/inline-box)
    1.设置弹性盒模型对象的子元素的排列方式。(设置在父元素上)
    box-orient
    取值: horizontal(水平方向)   vertical(垂直方向)
    2.父元素中子元素的对齐方式。(设置在父元素上,相对于父元素对其)
     box-pack
    取值:start：子元素从开始位置对齐（大部分情况等同于左对齐）
        center：子元素居中对齐
        end：  子元素从结束位置对齐（大部分情况等同于右对齐）
        justify：子元素两端对齐
    3.父元素中的子元素的对齐方式。(设置在父元素上,相对于子元素本身)
      box-align
      取值 start：子元素从开始位置对齐
         center：子元素居中对齐
         end：子元素从结束位置对齐
         baseline：子元素基线对齐
         stretch：子元素自适应父元素尺寸
    4.父元素中的子元素如何分配其空间。(设置父元素上)
     box-flex 
     取值:数字
     数字越大占得空间越多.
     5.设置父元素中的子元素的显示顺序。(设置在子元素上)
       box-ordinal-group
      取值:数字(默认数字是1)
      数字较小的显示在数字较大的前面
     6.父元素中的子元素是否可以换行显示。(在父元素上设置)
       box-lines
        可选值: single：子元素只在一行内显示
                multiple：子元素超出父元素的空间时换行显示
三.变量
       1.语法
    <link rel="stylesheet/less" type="text/css" href="styles.less">
    <script src="less.js" type="text/javascript"></script>
    注意：
     less.js文件必须在引入的less文件之后
    引入less文件事rel的值必须为 stylesheet/less
    2.变量声明
    less变量声明通过@+变量名，后面跟css类型的值或其他变量的值
    例1：@widht:100px
    变量值可以相加,相乘,相除
    例2：@length：100px；@lenght : @width+100px(+,-,*,/ 都可以)
    3.声明类
    类的声明通过 “.”+类名
    .myClass(@color:red,@length:100px){
    background-color:@color
    width:@length;
    height:@length;
    border：1px solid @color
    }
    引入   .div1{
             .myClass(grenn,200px);
          }
    注意     .myClass(@color:red,@length:100px)是默认值
           .myClass(grenn,200px)可以修改值
四类声明的扩展
    1,以使用@arguments来引用所有传入的变量
     eg:.border(@a,@b,@color:blue){
            border:@arguments;
              }
     注意:@arguments引用所有的值
     2, 可以在类函数定义时候使用条件判断
        .border(@a) when (@a>10),(@a<3){
              border:@a solid blue;
五、 嵌套规则     
    比如:
    div{
    ul{
  
     li{

     a{
     &:hover{
             }
    }
    }
    }
    }
作用:节约写代码的空间.可以直接在每个选择器上直接写代码
##六、命名空间
      #text1-wenben{
    .font(@style,@with,@size){
    font-style:@style;
    font-weight: @with;
    font-size: @size;
     }
    }
 
    @img-b:"../img";(字符串插入)

    div{
      width: 300px;
      height: 100px;
      #text1-wenben>.font(italic,bold,20px);(引入)
       background-image: url("@{img-b}/border.png");(字符串插入)
 
     }