前端开发中常用的一些技巧

发表于 2020-04-07 分类于 阅读次数：

css

文字溢出省略号显示

/* 强制一行内显示文本 */
.single-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 强制最多三行显示文本 */
.multi-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 强制三行显示 */
  overflow: hidden;
  text-overflow: ellipsis; /* 不是必须 */
}

让 div 宽度自适应文字内容

.fit-width {
  width: fit-content;
}

opacity:0、display:none、visibility:hidden

opacity:0 和 display:none，若父节点元素应用了 opacity:0 和 display:none，无论其子孙元素如何挣扎都不会再出现在大众视野
而若父节点元素应用 visibility:hidden，子孙元素应用 visibility:visible，那么其就会毫无意外的显现出来

max-width 优先级高于行内样式加 !important

<style>
  div {
    max-width: 50px;
  }
</style>
<div style="width: 100px !important;"></div>

div 的宽度为 50px

使用 CSS 网格定义 main 和 aside 元素

CSS 网格可用于定义布局中的 main 部分和 aside 部分，这是 CSS 网格的绝佳用途。问题是，即使 aside 是空的，它的高度也会和 main 的高度相等。

要修复这个问题，可以让 aside 元素与其父元素的起点对齐，这样它的高度就不会扩展了。

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-gap: 20px;
}

/* align-self 将会让 aside 元素与其父元素的起点对齐。 */
aside {
  grid-column: 1 / 4;
  grid-row: 1;
  align-self: start;
}

main {
  grid-column: 4 / 13;
}

使用 display: inline-block 时奇怪的空隙

给两个或两个以上的元素设置 display: inline-block 或者 display: inline ，将会导致它们之间产生一个微小的空隙。代码中的换行和缩进（连续空格）被渲染成了一个空格造成的

通过给父元素设置 font-size: 0 可以简单地解决这个问题。

交互式 HTML 元素的字体不生效

给整个文档设置字体的时候，字体并不会应用于诸如 input， button select 和 textarea 这些元素上。默认情况下，它们并不会继承文档字体，因为浏览器给它们应用了系统字体。

要修复这个问题，直接给他们设置字体属性：

input,
button,
select,
textarea {
  font-family: your-font-name;
}

css 调试

将代码添加到浏览器的控制台运行，页面上所有元素的轮廓都会显示出来。

https://gist.github.com/addyosmani/fd3999ea7fce242756b1

;[].forEach.call($$('*'), function (a) {
  a.style.outline = '1px solid #' + (~~(Math.random() * (1 << 24))).toString(16)
})

压缩或拉伸图片

用 CSS 调整一张图片的大小时，如果纵横比与图片的宽高不一致，则图片会被压缩或拉伸。

解决方法很简单：使用 CSS 的 object-fit。它的功能和给背景图片设置 background-size: cover 类似。

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* object-fit: cover; */
}

object-fit 语法参考
https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

object-fit 属性由下列的值中的单独一个关键字来指定。

取值
contain 保持长宽比，以长边填充
cover 保持长宽比，以短边填充，多余的会被裁减掉
fill 完全填充，会拉伸
none 保持其原有的尺寸
scale-down 内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

滚动条样式

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* -webkit-scrollbar-thumb 滚动条手柄 */
::-webkit-scrollbar-thumb {
}
::-webkit-scrollbar-thumb:hover {
}

/* -webkit-scrollbar-track 滚动条轨道 */
::-webkit-scrollbar-track {
}
/*滚动条上半边或左半边*/
::-webkit-scrollbar-track-piece:start {
}

/* -webkit-scrollbar-button 滚动条的轨道的两端按钮 */
/*滚动条上边或左边按钮*/
::-webkit-scrollbar-button:start {
}

/* -webkit-scrollbar-corne 垂直滚动条和水平滚动条相交的地方 */
::-webkit-scrollbar-corner {
}

卡券样式

.coupon {
  width: 300px;
  height: 100px;
  position: relative;
  background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right / 50% 50% no-repeat, radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 50% no-repeat, radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 50% no-repeat, radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 50% no-repeat;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
}

阴影效果

气泡阴影

.tip {
  width: 100px;
  height: 30px;
  line-height: 30px;
  border: 1px solid rgb(245, 129, 127);
  border-radius: 4px;
  position: relative;
  background-color: #fff;
  filter: drop-shadow(0px 2px 4px rgba(245, 129, 127, 0.9));
}
.tip::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #fff transparent;
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 2;
}

.tip::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent rgb(245, 129, 127) transparent;
  position: absolute;
  top: -11px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
}

三角形阴影

.shadow-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 50px 50px;
  border-color: transparent transparent rgb(245, 129, 127) transparent;
  filter: drop-shadow(10px 0px 10px rgba(238, 125, 55, 0.5));
}

缺圆投影

.circle-square {
  width: 100px;
  height: 50px;
  line-height: 50px;
  background: radial-gradient(circle at bottom right, transparent 20px, rgb(245, 129, 127) 15px);
  filter: drop-shadow(2px 2px 2px rgba(238, 132, 66, 0.9));
}

1px 边框

/* 方式1 */
.border:before {
  content: ' ';
  box-sizing: border-box;
  position: absolute;
  pointer-events: none;
  width: 200%;
  height: 200%;
  left: 0;
  top: 0;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  transform-origin: 0 0;
  border: 1px solid #ccc;
}

/* 方式2 */
.border:before {
  content: ' ';
  box-sizing: border-box;
  position: absolute;
  pointer-events: none;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  border: 1px solid #ccc;
}

记住密码之后，输入框变色问题

谷歌浏览器使用如下方式解决

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
	-webkit-text-fill-color: #ededed !important; // 自动填充文字颜色
	-webkit-box-shadow: 0 0 0px 1000px white inset !important; // 使用内阴影覆盖，这个内阴影一定要大，要不然盖不住
}

火狐浏览器无效