前端常用的样式封装css篇

前言

我们在开发页面样式的时候时常会有一些知道而有想不起来或者奇怪的样式功能，重新去找或重新写实在过多占用我们摸鱼的时间，所以我们日常要养成做笔记的习惯，以下是我收集和封装的样式功能跟大家分享一下。

清除浮动

使用场景：块中有浮动元素导致块的高度塌陷。

.clearfix {
  zoom: 1;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

0.5px边框

使用场景：开发移动端的时候，觉得1px太粗会有想要0.5px线的需求，或者因为机型dpr的原因导致1px在真机是2px的效果

.thinner-border {
  position: relative;
}

.thinner-border:before {
  content: '';
  posititon: absolute;
  width: 200%;
  height: 200%;
  border: 1px solid #000;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(0.5, 0.5);
  -ms-transform: scale(0.5, 0.5);
  -o-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

居中

这里分享弹性布局居中和绝对定位居中

/*
 * @Description: 弹性居中（父元素）
 */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
/*
 * @Description: 绝对定位居中（子元素）
 */
 .absolute-center {
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

内容溢出出现滚动条不影响内容宽度

overflow的值为overlay时，行为与auto相同，但滚动条绘制在内容之上而不是占用空间。 仅在基于WebKit（例如，Safari）和基于Blink的（例如，Chrome或Opera）浏览器中受支持。

.content-overflow {
  overflow: auto;
  overflow: overlay;
}

绘制三角形

宽高都设置为0，然后通过设置border属性来实现三角形效果，其实就是每个方向的border都是一个三角形，根据需求留下其中的一个或者两个

 /* 朝上 ▲ */
.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-top: 50px solid transparent;
  border-right: 100px solid red;
  border-bottom: 50px solid transparent;
}
/* 朝右 */
.triangle-right {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 100px solid red;
  border-bottom: 50px solid transparent;
}
/* 朝左上 */
.triangle-topleft {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
}
/* 朝右上 */
.triangle-topright {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-left: 100px solid transparent;
}
/* 朝左下 */
.triangle-bottomleft {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-right: 100px solid transparent;
}
/* 朝右下 */
.triangle-bottomright {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-left: 100px solid transparent;
}

自定义滚动条样式

/* 高宽及背景 高宽分别对应横竖滚动条的尺寸 */
::-webkit-scrollbar {
  width: 0px;
  height: 10px;
  background-color: red;
}

/* 定义滚动条轨道 内阴影+圆角 */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 0px;
  background-color: #F5F5F5;
}

/* 定义滑块 内阴影+圆角 */
::-webkit-scrollbar-thumb {
  border-radius: 1px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #555;
}

隐藏滚动条

::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background-color: transparent;
    display: none
}

多行缩略

-webkit-line-clamp用来限制在一个块元素显示的文本的行数

.ellipsis {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

隐藏在图片没有src时候的边框

通常是因为考虑页面美观

img[src=""],
img:not([src]) {
  opacity: 0;
}

清除移动端iOS上输入框默认的内部阴影

input {
  -webkit-appearance: none;
}

禁止保存或拷贝图像

img {
  -webkit-touch-callout: none;
}

移动端input光标隐藏

某些场景下，需要自定义输入框，自定义光标等 安卓可以通过opacity: 0; color: transparent等将原生光标隐藏 但ios无法隐藏，只能将input框移动到视图外，先将input宽度设置足够大，然后左移：

input {
  width: 1000px;
  margin-left: -200px;
}

禁止字体调整

移动端在旋转屏幕的时候可能会改变字体大小，声明 text-size-adjust:100%让字体大小保持不变

* {
  text-size-adjust: 100%;
}

禁止高亮显示

移动端在触摸元素的时候后出现半透明灰色遮罩

* {
  -webkit-tap-highlight-color: transparent;
}

禁止动画闪屏

在移动设备上添加动画，有时会出现闪屏，给父元素添加3D 环境就能让动画稳定运行

.elem {
  perspective: 1000;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

禁止用户选择页面中的文字或者图片

：div {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}