關於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區域開始顯示背景

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM