关于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区域开始显示背景