CSS 笔记整理

清除浮动

浮动是我们常用的一种布局方式，随之而来的就是需要清除浮动，其中我觉得最方便也是兼容性最好的一种是，在同级目录下再创建一个 <span><div style="clear:both;"></div></span；不过这样会增加很多无用的代码。此时我们用 <span>:after</span 这个伪元素来解决浮动的问题，如果当前层级有浮动元素，那么在其父级添加上 clearfix 类即可。

或者，在父节点上设置 overflow：hidden 也能起到清楚浮动的效果。

垂直水平居中

绝对定位 + translate

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
​

flex 布局

display: flex;
align-items: center;
justify-content: center;
​

文字省略号显示

宽度固定，适合单行文本显示

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

宽度不固定，适合多行显示

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

制造文本的模糊效果

当我们希望给文本制造一种模糊效果感觉的时候，可以这样做：

color: transparent;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.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;
  }
}
​

小三角

.triangle {
  /* 基础样式 */
  border: solid 10px transparent;
}
/*下*/
.triangle.bottom {
  border-top-color: green;
}
/*上*/
.triangle.top {
  border-bottom-color: green;
}
/*左*/
.triangle.top {
  border-right-color: green;
}
/*右*/
.triangle.top {
  border-left-color: green;
}
​

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

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
​

(ps: 但是该代码会导致 input 的 change 事件在 Safari 浏览器上失效)