关于less的一些方法

1.fl()  左浮动,默认值为左浮动,可以添加右浮动。传入left  or right 。

2.fr()  右浮动,默认值为右浮动,可以添加右浮动。传入left  or right 。

3.chearfix() 清除浮动 ,对margin-top 影响父级的不兼容处理。

4.bc() 普通剧中,无默认值,其生成 margin-left: auto 和 margin-right:auto;

5.bc-d() 普通剧中 带默认宽度  默认为500px,也可传值 ,也可传入变量。

6.rel() 相对定位。

7 .abs() 绝对定位。

8.fix() 固定定位。------以上三种都可穿值 包括 relative, absolute, fixed。

9.pos() 综合方法  在选择其中写变量名称并且传入r/a/f都可。

使用方法:

div{

  width:300px;

  height:300px;

  .pos(r);/*.pos(r或者f)*/

}

10.pos-box(@w,@h,@pos) 定位元素 默认值为 width:500px; height:400px;默认定位方式为 position:absolute; 也可直接传值更改定位;-----未做ie6兼容处理 fixed

11.pos-box-cc(@w,@h,@pos) 定位居中元素   默认width:600px;height:360px;position:absolute; 也可直接传值改变定位; -----已做水平和垂直居中处理,fixed 未做ie6兼容处理

12.wh() /.w-be-h()  宽高相等  inline元素 需要给.d-b()/ .d-ib()

13.z-index(@index:1)  z-index 默认值为1

14.h100() 高度 100% 直接调用就行

15.txt-ver(@h)/.l-h(@h) 文字在某个容器垂直居中  -----必须传入 @h//高度值

16.d-b()/.db()  display:block;

17.d-i()/.di()   display:inline;

18.d-ib()/.dib()  display:inline-block;

19.d-ib7()/.dib7()  display:inline-block  ------添加了对ie6、7块级元素不支持inline-block转换的兼容

20.d-t()/.dt()  display:table;

21.d-n()/.dn()   display:none;

22.font-fm()  font-famaily:"Microsoft Yahei","微软雅黑"

23.font-fs()  font-famaily:"SimSun","宋体";

23.font-apple()   'punctuation','PingFangSC-Regular' 

24.font-all() 'punctuation','PingFangSC-Regular','Microsoft YaHei','微软雅黑'

25.font-fa() font-family:'Arial'

26.font-fv()  font-family:Verdana;

27.font-w700()/.font-wb();  文字加粗

28.font-w400/.font-wn() 文字不加粗 /普通文字

29.font-s() font-size 字体大小 默认为12px ,可传入任意数+px

30.font-s0() ~font-s100() font-size 文字大小 可以从0~100的任意数值

31.text-n() text-decoration 文字下划线   默认值为none, 可传入值

32.tn() text-decoration:none;

33.tl()/.text-l() text-align:left;

34.tr()/text-r() text-align:right;

35.tc()/text-c() text-align:center

36.opa() 透明度 默认为80 1~100的数字

37.rgba() css3背景透明,可用于普通元素, 已经对低版本浏览器兼容 ,全兼容(r,g,b,a)括号必须全部穿参数

38.bg(@url,@x:0,@y:0) background:填充背景,只需要传入url就行。------url必须用括号阔起来 建议用""号;

39.bg-m(@url,@x:0,@y:0,@repeat:no-repeat)  background 填充背景 可传入多参数  

40.bgi(@url)  background-image 填充背景 只需要传入@url就行  url必须用括号括起来 推荐用“”;

41.bgp(@x,@y) background-position:0 0;需要传入x,y 默认为0;

42.bgr-r() background-repeat:repeat;

43.bgr-x() background-repeat:repeat-x;

44.bgr-y() background-repeat:repeat-y;

45.bgr-no() background-repeat:no-repeat;

46.bga-fix() background-attachment:fixed;  背景固定

47.ellipsis-vasic() 文字省略号 需要配合宽度使用

48.ellipsis() 文字省略好 可传入宽度 ----内部使用百分比,例如.ellipsis(7)出来的结果就是width:92%

49.triangle()  css2的三角 已做ie6的兼容

i{

  @fx:top;

  .triangle(@fx);

}

50.triangle-compatible()  为三角添加一些附加属性,便于批量三角添加

i{

  @fx:top;

  .triangle(@fx);

}

60.triangle-t(@w:5px,@color:#ccc)--上

61.triangle-r(@w:5px,@color:#ccc)--右

62.triangle-b(@w:5px,@color:#ccc)-下

63.trigngle-i(@w:5px,@color:#ccc)-左  css2的三角 默认大小为5,默认颜色为#ccc

64.border-radius() 圆角,默认圆角为5px,可在()内穿参数

65.border-top-left-radius()-上左

  .border-top-right-radius()-上右

  .border-bottom-right-radius()-下右

  .border-bottom-left-radius()-下左

66.box-shadow() 盒子阴影 默认为0px ,0px , 5px , #ccc

67.text-shadow() 文字阴影 默认为 0 0 2 #333

68.linear-gradient() 渐变效果  可传入多参数

69.css3move() css3动画已将添加前缀 可传参 默认参数all ease .3s

70.transition() css3动画添加前缀 必须传参 

80.opacity() 透明度 默认为80,兼容ie低版本

81.background-clip()背景的绘制区域

  border-box:从border区域向外裁剪背景

  padding-box:从padding区域向外裁剪背景

  concent-box: 从content区域向外裁剪背景

  no-clip:从border区域向外裁剪背景

82.background-origin()背景的绘制区域

  border从border区域开始显示背景

  padding从padding区域开始显示背景

  content从centent区域开始显示背景

 

posted @ 2017-07-18 20:26  大大大大大大大白大  阅读(1825)  评论(0编辑  收藏  举报