css - 实用样式小技巧

1. flex布局实用小技巧

1. flex:1; 让所有的弹性框的子元素都有相同的长度。
2. flex-wrap: wrap; 水平轴排不下，自动换行，适用于适配屏幕大小的时候，自动换行显示。实际中，要想一行的数据超出后折行，内部元素必须要定宽px，不能都使用百分比。

dispaly: flex ;   flex:1;   -->  占据剩下部分的全部
.flex{
  display:flex;
  .ctrl-left {
    flex: 6;   //占全部的6/10
  }
  .ctrl-right {
    flex: 4;   //占全部的4/10
  }
}

2. vh / vw：浏览器的视口高度和视口宽度

// 通过calc动态计算，可以动态占满所有的页面间距
height: calc( 100vh - 202px);
// 移动端以宽度全屏计算时，如果 100%不管用，可以使用 100vw ；
width: calc((100vw - 80rpx)/3);

3. 线性渐变效果

background: linear-gradient(to right, #000, #f00 50%, #090);   //设置渐变为从右到左
background: linear-gradient(45deg, #000, #f00 50%, #090);   //角度45

4. 背景图片与背景颜色融合显示

background-blend-mode:overlay;    // 叠加
background: linear-gradient(30deg,#f3d02c,#e59517), url(image/icon-background.png) no-repeat  bottom ;
background-size:100%;

5. RGBA（A：Alpha 透明度 取值0 -1）： 0 完全透明 1 不透明

background: rgba(0, 0, 0, .5);

6. img和div中间存在间距，导致img不能占满外层div，而是超出一点间距，如何去除？

vertical-align:bottom;   //设置img本身样式

7. 过渡动画

.div {
    background-color: rgba(237, 244, 255, 0.7);
    transition: all 0.6s ease-in;
}
.div:hover {
    background-color: #1c84c6;
    transition: all 0.6s ease-out;
}

8. box-shadow 阴影

// 参数：1水平阴影位置 2垂直阴影位置  3模糊距离(模糊程度) 4阴影尺寸(阴影的长度)  5阴影的颜色  6inset/outset(内阴影、外阴影)
box-shadow:8px 8px 8px 3px rgba(10,16,20,.24)
// 3 模糊距离： 值越大，阴影越模糊 
// 4 阴影尺寸： 值越大，阴影范围越大

9. img在div中垂直居中

img {
    vertical-align: middle;
}

10. 文本超出2行隐藏并且显示 ...

overflow:hidden; 
text-overflow:ellipsis;
-webkit-box-orient:vertical;
-webkit-line-clamp:2; 

11. 纯css禁用鼠标点击事件 参考链接

鼠标不可点击时的显示状态 ：cursor: not-allowed

鼠标原有的事件禁用 ：pointer-events:none

.disabled {
    pointer-events: none;
    cursor: default;
    opacity: .6;
}

12.Js,jquery 为设置元素disabled属性

// javascript 控制disabled属性
document.getElementByIdx("btn").disabled=true;

// Jquery
$("#btn").attr("disabled",true);  //设置
$('#btn').removeAttr("disabled");  //移除
$('#uid').attr("disabled",false);

13. 单行文本两端对齐

// 第一种：兼容性不好！
text-align: justify;
text-align-last:justify; 

// 第二种：使用after伪类添加一个空白的第二行，这样第一行的两端对齐就生效了！
span:after {
    display: inline-block;
    content: "";
    width: 1.8rem;
}

14. 重置原生的input,textarea,select的样式

// input、textarea
.custom-input {
    border: 0px;
    outline: none;
    background-color: #F3F3F3;
    padding: 0 15px;
    color: #4D4D4D;
    font-size: 14px;
}

// select
.custom-select {
    outline: none;
    background: transparent;
    border-color: #ddd;
    padding-left: 0.2rem;
    border-radius: 0.06rem;
    color: #333;
}

::-webkit-input-placeholder {
    color: #999;
}
:-moz-placeholder {
    color: #999;
}
:-ms-input-placeholder {
    color: #999;
}

// select

15.解决移动端滑动迟缓问题

-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */
-webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会立即停止 */