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;

}

右边绝对定位，左边margin-right;

 

   #lt{margin-right:200px; background: #00f;}

   #rt{ position: absolute; right:0; top:0; 200px;background: #ff0;}

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;

7.     透明度渐变

  background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.4));

8.    盒子内不定高的子元素水平垂直居中

display: flex;

align-items: center; /*定义body的元素垂直居中*/

justify-content: center; /*定义body的里的元素水平居中*/

 

9.    文本两边对其

text-align:justify;

 

10. 　placeholder样式修改

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #9E9E9E;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    color: #9E9E9E;
}
input::-moz-placeholder, textarea::-moz-placeholder {
    color: #9E9E9E;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #9E9E9E;
}
11.ios手机设置scroll时页面卡顿问题

-webkit-overflow-scrolling: touch;
12.文本内容强制换行
word-wrap:break-word;

13.移动端1px解决方式

：after+tranform
单条边

.aaa{
  position: relative;
  border:none;
}
.aaa:after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

四条边

.aaa{
  position: relative;
  border:none;
}
.aaa:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

14.文本原格式输出

 white-space: pre-line; 

15.img标签铺满容器

object-fit解决方法：

div img{
     100%;
    height: 100%;
    object-fit:cover;
}

min方法:

div{
    position:relative;
    overflow:hidden;
}
div img{
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    min- 100%;
    min-height: 100%;
    transform:translate(-50%,-50%);
}

 

16.可移动导航

html:

<div class="navBox">
      <ul>
              <li>新闻</li>
              <li>社会</li>
              <li>科技</li>
              <li>娱乐</li>
              <li>健康</li>
              <li>财经</li>
              <li>新闻</li>
              <li>社会</li>
              <li>科技</li>
              <li>娱乐</li>
              <li>健康</li>
              <li>财经</li>
      </ul>
</div>

css:

.navBox ul{
    width: 100%;
    height: 1rem;
    border: 1px solid red;
    list-style-type: none;
    display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 0;
    overflow: auto;
}
.navBox ul::-webkit-scrollbar {
    display: none;
  }
.navBox ul li{
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    margin-right: 0.8rem;
}