前端css布局小技巧

1. css编写超出元素宽度的中文显示省略号

p{
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;   // 显示的行数 
  -webkit-box-orient: vertical;
  overflow: hidden;
}

2. 只显示一行文字

p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

3. 移动端横向滚动

ul {
-webkit-overflow-scrolling: touch; // IOS设备滑动流畅 允许独立的滚动区域和触摸回弹
  white-space: nowrap; // 不换行
  overflow-y: hidden; // 设置横向可滚动
}
ul li {
  display: inline-block;
}

4. 清除input border fouce阴影

input {
  outline: none;
}

5. css三角形

.triangle-up {
  height: 0;
  width: 0;
  border: 12px #e5c3b2 solid;
  border-color: transparent transparent #e5c3b2 transparent;
}

6. line-height 比 height 多一，这样就上下居中了

ul li {
  height: 30px;
  line-height: 31px;
}

7. 背景图片固定不动

.parent-box {
  height: 100px;
  background: url('') center center no-repeat fixed;
  background-size: cover;
}

8. hover动效

div {
  transform: translateY(-100%);  
  transition: .2s all ease-in-out;

  &:hover {
    transform: translateY(100%);    
  }
}

9. 清空select样式

select {
  appearance: none;
  -moz-appearance: none;
 -webkit-appearance: none;
}

10. 点击链接弹出拨打电话号码

<a class="contact-box" href="tel:400-167167-24167">

11. ios移动端滑动优化：

.list{
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}