首页 > 代码库 > css样式总结

css样式总结

  1. 文本较多时,只显示n行多余的用代替(以下代码直接在less中封装好的) @num---想要显示的行数

.font-hide(@num){
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box; /** 将对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: @num; /** 显示的行数 **/
  overflow: hidden;  /** 隐藏超出的内容 **/
}

 2.    固定一个样式

position:fixed;
z-index:3;
left:0;
right:0;
bottom:0;

 3.  两栏自适应

#left-1 {

    float: left;

    background-color: red;

}

#right-1 {

    overflow: hidden;

    background-color: blue;

}

4.    首行缩进

text-indent:25px

5.    背景固定

background:url(‘../images/bg.jpg‘);
background-repeat:no-repeat;
background-size:100% ;
background-attachment: fixed;//固定不动

6.    取消input默认样式

-webkit-appearance: none;

css样式总结