css一些使用技巧

1、h字体的上下间隙

设置行高为1，可消除

2、图片有缝隙

设置其父元素字体大小为0

3、input点击去掉边框

&:focus{
  border: 0;
 outline:none;
}

4、360极速模式

页面需默认用极速核，增加标签：<meta name=”renderer” content=”webkit” /> 

5 去掉radio小黑点，用自定义图标代替 （sass实现）

.radio {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #ffffff;
  margin-right: 12px;
  border-radius: 50%;
  border: 1px solid #d1d1d1;
  &.check {
    background: url("../../../static/img/submitorder_right.png");
    background-size: 20px;
    border: none;
  }
}

6button 1像素边框（sass）

@mixin btn-border(){
  position: relative;
  display: block;
  box-sizing: border-box;
  text-align: center;
  line-height: 2.55555556;
  overflow: hidden;
  letter-spacing: 1px;
  &::after {
    content: " ";
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    box-sizing: border-box;
    border-radius: 4px;
}}

7自动换行和强迫不换行

自动换行

 

div{  
word-wrap: break-word;  
word-break: normal;  
} 

 

强迫不换行

 

div{  
white-space:nowrap;  

}

7文本不可选

moz-user-select: -moz- none ;

-moz-user-select:  none ;

-o-user-select: none ;

-khtml-user-select: none ;

-webkit-user-select: none ;

-ms-user-select: none ;

user-select: none ;

8文本显示省略号

（1）单行

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

（2）多行

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

9文字对齐

.test{
width: 80px;
border: 1px solid red;
text-align: justify;
height: 25px;
&:after{
content: " ";
display: inline-block;
width: 100%;
}
}

10水桶图片

<template>
<div class="vat-layout">
<div class="wrap">
<img v-for="item in src" :src="item" alt="">
</div>
</div>
</template>

<script type="text/ecmascript-6">
export default {
data() {
return {
src:['//cdn.attach.qdfuns.com/notes/pics/201710/13/093715yf2jt47tttj9lyfj.jpg',
'//cdn.attach.qdfuns.com/notes/pics/201710/13/092835ebbkfzjtb4okwj2b.jpg',
'//cdn.attach.qdfuns.com/notes/pics/201710/13/092835beqzk6kyjkbwr5bw.jpg',
'//cdn.attach.qdfuns.com/notes/pics/201710/13/092835nshkii0i2k0dsikn.jpg',
'//cdn.attach.qdfuns.com/notes/pics/201710/13/093653k6ztcd7x7czebkfh.jpg'],
}
},
mounted() {
this.init()
},
components: {},
methods: {
init(){
for(var a=0;a<100;a++){
this.src.push(this.src[Math.round(Math.random()*4)])
}
}
}
}
</script>

<style lang="scss" scoped>
* {
margin: 0;
}
.vat-layout {
padding: 50px 0;
overflow-x: hidden;
.wrap {
display: flex;
flex-wrap: wrap;
img {
margin: 3px;
padding: 5px;
height: 200px;
background: #ccc;
flex-grow: 1;
object-fit: cover;
transition: .3s;
&:hover {
transform: scale(1.2);
box-shadow: 0 0 20px #fff;
z-index: 9999;
}
}
&:after {
display: block;
content: '';
flex-grow: 9999;
}
}
}

</style>