一些常用CSS样式整理

1.文字超出显示省略号

// 单行超出显示省略号
.over{
    width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
  
// 多行超出
// 两行超出
.overhide {
    display: -webkit-box !important;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
// 三行超出
.overhideline1 {
    display: -webkit-box !important;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

2.水平垂直居中

// 文字水平垂直居中，让line-height与height相等即可垂直居中，在使用text-align: center;即可水平居中
.center{
    text-align: center;
    height: 20px;
    line-height: 20px;
}
  
  
// 水平居中
// 1.text-align: center;
// 2. margin: 0 auto;
  
  
//div水平垂直居中
// 1.不确定宽度、高度，使用position定位(父元素设置relative)与transform即可
div{      
    background-color: palevioletred;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
 
 
// 2.确定了当前div的宽高，margin值为当前div宽度、高度一半的负值
div {
    background-color: palevioletred;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}
 
// 3.绝对定位下top left right bottom 都设置0， margin: auto
div {
    background-color: palevioletred;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
  
// 4.flex布局，需要注意兼容问题
<!--html-->
<div class="box">
    <div class="child">child</div>
</div>
 
/**css**/
.box {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: skyblue;
}
.child{
    width: 100px;
    height: 100px;
    background-color: plum;
}
 
 
// 5.　table-cell实现水平垂直居中: table-cell middle center组合使用
<!-- html -->
<div class="table">
    <p>哈哈哈</p>
</div>
  
/** css **/
.table{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 200px;
    height: 200px;
    border: 1px solid skyblue;
}
 
// 6.绝对定位：calc() 函数动态计算实现水平垂直居中，(外部宽度-内部宽度)/2
<!-- html -->
<div class="calc">
    <div class="child1">yoohoo~</div>
</div>
 
/** css **/
.calc {
    position: relative;
    border: 1px solid skyblue;
    width: 400px;
    height: 160px;
}
 
.child1 {
    position: absolute;
    width: 200px;
    height: 50px;
    text-align: center;
    background-color: skyblue;
    left: calc((400px - 200px)/2);
    top: calc((160px - 50px)/2);
}

3.清除浮动

.clearfix:before,.clearfix:after {  /*清除浮动*/
    content:"";
    display:table;
}
.clearfix:after{
    clear:both;
}
.clearfix{
    *zoom:1;/*IE/7/6*/
}

4.文本两端对齐

.wrap {
    text-align: justify;
    text-justify: distribute-all-lines;  //ie6-8
    text-align-last: justify;  //一个块或行的最后一行对齐方式
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
}

5.cursor属性

.wrap {
  cursor：pointer; //小手指；
  cursor：help; //箭头加问号；
  cursor：wait; //转圈圈；
  cursor：move; //移动光标；
  cursor：crosshair; //十字光标
}

6.实现三角形

.wrap {
    border-color: transparent transparent green transparent;
    border-style: solid;
    border-width: 0px 100px 100px 100px;
    height: 0px;
    width: 0px;
}

7.移除被点链接的边框

a {outline: none;}
a {outline: 0;}
8.修改input框光标颜色

input {
    caret-color: red;
}

9.修改input 输入框中 placeholder 默认字体样式

//webkit内核的浏览器
input::-webkit-input-placeholder {
    color: #c2c6ce;
}
//Firefox版本4-18
input:-moz-placeholder {
    color: #c2c6ce;
}
//Firefox版本19+
input::-moz-placeholder {
    color: #c2c6ce;
}
//IE浏览器
input:-ms-input-placeholder {
    color: #c2c6ce;
}

10.字体与边框颜色相同

.color {
    width: 200px;
    height: 200px;
    color: skyblue;
    font-size: 30px;
    /* border: 10px solid currentColor; */
    border: 10px solid;
}