css样式总结

Posted 2020-09-17

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;