搞快点

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

文字溢出省略号显示

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

/* 强制最多三行显示文本 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 强制三行显示
overflow: hidden;
text-overflow: ellipsis;

让 div 宽度自适应文字内容

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 {
  object-fit: cover;
}
赞(0) 打赏
未经允许不得转载:稻草人 » 前端开发中常用的一些技巧

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址