高效的使用CSS，提示你的编码效率

1. 清除浮动

    
left
    
right



.clearfix:after {
  content: "\00A0";
  display: block;
  clear: both;
  line-height: 0;
}
.clearfix {
  zoom: 1;
}

2.垂直水平居中

// flex布局
.css {
    display: flex;
    align-items: center;
    justify-content: center;
}
//position
test

/* 元素已知宽和高css */
.center {
    background: red;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  } 

   /* or */

  .center {
    background: red;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
  } 
/* 元素宽高未知css */
.center {
    color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }

3.文本末尾省略号

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

多行截断

.txt {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

display:-webkit-box;必须结合的属性，将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient;必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

text-overflow:ellipsis;可选属性，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

4、文本的模糊效果

.child {
  color: transparent;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

5、动画实现简洁 loading 效果

    正在加载
 

.loading:after {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  content: "\2026";
  -webkit-animation: ellipsis 2s infinite;
}

/* 动画部分 */
@-webkit-keyframes ellipsis {
  from {
    width: 2px;
  }
  to {
    width: 15px;
  }
  }

6、自定义文本选中样式

    正在加载正在加载正在加载正在加载正在加载正在加载正在加载正在加载




.element::selection {
  color: green;
  background-color: red;
}
.element::-moz-selection {
  color: green;
  background-color: red;
}

7、input 修改placeholder默认的样式
input 修改 placeholder默认的样式

    



input::-webkit-input-placeholder {
  color: green;
  background-color: #f9f7f7;
  font-size: 14px;
}
input::-moz-input-placeholder {
  color: green;
  background-color: #f9f7f7;
  font-size: 14px;
}
input::-ms-input-placeholder {
  color: green;
  background-color: #f9f7f7;
  font-size: 14px;
}

8、移动端可点击元素去除默认边框
在移动端浏览器上，当你点击一个链接或者通过 Javascript 定义的可点击元素的时候，会出现蓝色边框，怎么去掉呢?

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

9、首字下沉

.wrap:first-letter {
  float: left;
  color: green;
  font-size: 30px;
}

10、css实现三角形

    
正三角
    
倒三角
    
左三角
    
有三角


.triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
.triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
}
.triangle-left {
  width: 0;
  height: 0;
  border-bottom: 50px solid transparent;
  border-right: 100px solid red;
  border-top: 50px solid transparent;
}
.triangle-right {
  margin-left: 10px;
  width: 0;
  height: 0;
  border-bottom: 50px solid transparent;
  border-left: 100px solid red;
  border-top: 50px solid transparent;
}

11、屏蔽 Webkit 移动浏览器中元素高亮效果

.css {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

12、移除浏览器部分元素的默认边框
个别标签去除默认的边框

img,
input,
button,
textarea {
  border: none;
  -webkit-appearance: none;
}
textarea {
  /*textarea 默认不可以放缩*/
  resize: none;
}

13、取消部分浏览器数字输入控件的操作按钮

input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

14、css换行

/* 强制不换行 */
.div {
  white-space: nowrap;
}
/* 自动换行 */
.div {
  word-wrap: break-word;
  word-break: normal;
}
/* 强制英文单词断行 */
.div {
  word-break: break-all;
}

15、图片上下左右居中

    


div {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

16、标题两边的小横杠

标题


.title {
  color: #e1767c;
  font-size: 30px;
  text-align: center;
  position: relative;
}
.title:before,
.title:after {
  content: "";
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  border-top: 2px solid #e1767c;
  width: 40px;
}
.title:before {
  margin-left: -60px;
}
.title:after {
  margin-left: 60px;
}

17、文本缩进

.text {
    text-indent: 20px;
}

源自：https://juejin.im/post/5eba4199e51d454db20f4303

声明：文章著作权归作者所有，如有侵权，请联系删除。