首頁  >  文章  >  web前端  >  快速提升開發技能的 20 個 CSS 小技巧

快速提升開發技能的 20 個 CSS 小技巧

青灯夜游
青灯夜游轉載
2022-01-11 19:12:332024瀏覽

這篇文章跟大家分享20 個 CSS 小技巧,用於快速提升開發技能,快來收藏吧,希望對大家有幫助!

快速提升開發技能的 20 個 CSS 小技巧

flexbox 內容換行

#當我們使用flexbox 佈局的時候,預設情況下,在容器寬度不夠時,可能就會出現這樣的情況。

快速提升開發技能的 20 個 CSS 小技巧

這個主要是因為 flex-wrap# 的預設值是 nowrap,所以我們需要這樣改變值。

.options-list {
  display: flex;
  flex-wrap: wrap;
}

快速提升開發技能的 20 個 CSS 小技巧

間距

#設計師在提供的設計稿中,很容易忽略文字在極限情況下與其他元素之間的間距,最終可能會出現這樣的情況,文字與icon 緊鄰。

快速提升開發技能的 20 個 CSS 小技巧

要處理這個情況,就是需要考慮是在文字或 icon 部分,根據實際情況分析後選擇新增 margin 值來增加間距。

.section__title {
  margin-right: 1rem;
}

快速提升開發技能的 20 個 CSS 小技巧

不過這個情況,我通常會考慮在icon 上加 margin-left,這樣的話,在沒有icon 的時候,文字還是可以頂到容器邊緣。

長文本內容

這個就簡單,就是文字過長的處理方式,一般情況下就是換行或截斷並已 ... 的形式出現。至於選擇什麼方式就要看當前頁面模組的設計風格來決定了。

文中的處理方式是採用了截斷出 ... 這種。

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

快速提升開發技能的 20 個 CSS 小技巧

防止影像被拉伸或壓縮 這種情況一般是在是圖片由使用者上傳,或是圖片未依規定比例使用所導致的。

快速提升開發技能的 20 個 CSS 小技巧

處理方式就是直接使用 object-fit 屬性:

.card__thumb {
  object-fit: cover;
}

鎖定捲動連結

#主要出現的情況是在頁面中點擊彈出modal 彈層時,頁面內容本身很長的時候。

.modal__content {
  overscroll-behavior-y: contain;
  overflow-y: auto;
}

overscroll-behavior 雖然好,但目前有很大的相容性問題。

快速提升開發技能的 20 個 CSS 小技巧

CSS 變數回退

這個CSS 變數回退,說白了,其實是當CSS 變數值無效時而使用一個「安全值」來保證某個屬性值還是可用的。

.message__bubble {
  max-width: calc(100% - var(--actions-width, 70px));
}

不過結合之前寫前端頁面時的處理方式,可能還會去考慮一下瀏覽器對 var() 的兼容性問題,那麼就會再加上一個屬性。不過現在的瀏覽器來看,好像普遍性不存在這個問題。

.message__bubble {
  max-width: 70px;
  max-width: var(--actions-width, 70px);
}

使用固定寬度或高度

這個沒啥說的,主要就是對內容過長時,溢出容器時的一個保護措施。例如當我們把高度固定為 350px 之後,內容過長就會溢出。

快速提升開發技能的 20 個 CSS 小技巧

而如果我們把 height 換成 min-height 的話,那情況就有所不同了。

快速提升開發技能的 20 個 CSS 小技巧

同理,在寬度的處理上也是一樣。

被忽略的background-repeat

在使用背景圖的時候,如果沒加上 no-repeat# 的話,預設就會把背景圖平鋪開。

快速提升開發技能的 20 個 CSS 小技巧

所以,隨手加上 no-repeat 還是個好習慣,除非你知道這張背景圖是否要平鋪。

.hero {
  background-image: url('..');
  background-repeat: no-repeat;
}

垂直方向的媒體查詢 這個場景目前小志在頁面中還未見過,一般在中後台頁面出現的機率比較多,例如作者提供的頁面效果。

1快速提升開發技能的 20 個 CSS 小技巧

左下角是通过 position: sticky; 定位的,可能通过 fixed 定位也是一样吧,然后当浏览器的高度变小的时候,就会叠在左侧的导航上面。

1快速提升開發技能的 20 個 CSS 小技巧

显然,这样的页面效果就不对了。而如果这个时候,通过 @media 方式判断页面高度,在某个安全区外我们才让左下角这部分通过 sticky 来定位。

@media (min-height: 600px) {
  .aside__secondary {
    position: sticky;
    bottom: 0;
  }
}

使用 justify-content: space-between

原文中这部分标题是 Using Justify-Content: Space-Between,但看起来更应该是 Using gap。使用什么标题不是关键,这部分主要是提到当使用 justify-content: space-between; 时,如果元素不够,元素与元素之间的间距就会拉长,因为要平均分布元素之间的间距。

比如原本是想要这样的一个效果,间距的值是固定的:

1快速提升開發技能的 20 個 CSS 小技巧

在元素数量足够的情况下,元素与元素之间的间距还是比较理想的,通过下面这个 CSS 处理方式:

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

但,元素的数量总是会不足的时候,那么就会这样了。

1快速提升開發技能的 20 個 CSS 小技巧

可见,其实并不是想要平均分布,而只是想要在最大的极限情况下和内容不足的时候,元素之间的间距是可控的。一般来说,这个处理方式挺多的,用 margin 之类的也是可以处理,不过目前有一个兼容性并不是十分好的 gap 能完美解决这个问题。

.wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

1快速提升開發技能的 20 個 CSS 小技巧

图片上的文字 用户体验上的一个细节处理问题,如果在图片上有文案,但图片没加载出来,或者加载失败的时候,添加一个背景色,以保证图片加载失败的情况下,文字与背景能区分开。

1快速提升開發技能的 20 個 CSS 小技巧

使用 CSS 网格中的固定值需注意 grid 网格布局现在开始慢慢被关注了,grid 与 flex 一样都可以做自适应的效果,也可以使用固定值的情况。在使用固定值的时候,最好是通过 @media 判断一下宽度,以便于满足最小宽度时的处理。

@media (min-width: 600px) {
  .wrapper {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 1rem;
  }
}

不过一般这种情况下,可能就直接改变页面布局了,感觉作者在这个方面上担忧是多余的。或者主要是自己未遇到过他所遇到的场景吧。

仅在需要时显示滚动条

这个没啥说的,一般大家都是把 scroll 设置为 auto。不过在个别情况下,可能这个 auto 会让元素的宽度变小,然后导致内容或者布局出现一点小瑕疵。

.element {
  overflow-y: auto;
}

滚动条装订线

这个所谓的装订线,主要就是 scrollbar-gutter 属性,保留滚动条的空间。在上面那个 overflow 例子中提到,如果设置为 auto 的时候,可能会导致页面布局出现非意料的情况,那么 scrollbar-gutter 就可以处理这个问题了。

兼容性还是一个不可避免的话题。

假设不考虑兼容性的问题,那么我们就可以使用这个方法保留滚动条的空间。

.element {
  scrollbar-gutter: stable;
}

1快速提升開發技能的 20 個 CSS 小技巧

CSS flexbox 中的最小内容大小

在使用 flex 布局的时候,很有可能其中某个 item 的文本内容很长,最终导致没有换行而溢出容器之外。

1快速提升開發技能的 20 個 CSS 小技巧

这种情况也并不是说没有可能,就算是使用 overflow-wrap: break-word; 也不会有效果,那么这个时候需要加上 min-width: 0; 来处理。

.card__title {
  overflow-wrap: break-word;
  min-width: 0;
}

1快速提升開發技能的 20 個 CSS 小技巧

CSS 网格中的最小内容大小

与 flexbox 类似,CSS 网格的子项有一个默认的最小内容大小,即 auto,这意味着,如果存在大于网格项的元素,它将溢出。

快速提升開發技能的 20 個 CSS 小技巧

@media (min-width: 1020px) {
  .wrapper {
    display: grid;
    grid-template-columns: 1fr 248px;
    grid-gap: 40px;
  }
}

.carousel {
  display: flex;
  overflow-x: auto;
}

对于网格这块,了解的不够深入,直接延用作者的意思就是将 grid-template-columns 的值改变一下,改为:minmax(0, 1fr) 248px 就可以得到下面这个效果。

2快速提升開發技能的 20 個 CSS 小技巧

自动适合与自动填充

当时看到效果图的时候,我还以为是 flex 布局中的情况,结果是 grid 网格布局中使用的情况。

2快速提升開發技能的 20 個 CSS 小技巧

在使用 grid 布局时,如果是这样写,利用 auto-fit 的话,就会是上面这个效果,item 不够时会被拉长。

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 1rem;
}

而如果改为 auto-fill 的话就是下面这个效果。

2快速提升開發技能的 20 個 CSS 小技巧

对于 auto-fit 和 auto-fill 的区别可以看这张图。

2快速提升開發技能的 20 個 CSS 小技巧

图片最大宽度

作者建议可以在 reset 部分中对 img 加上最大宽度的设置,但没说具体是为什么。个人猜想是考虑图片在容器中的展示吧,同时还有一个 object-fit 属性。

img {
  max-width: 100%;
  object-fit: cover;
}

位置:粘性css网格

在使用 CSS 网格布局时,如果子元素使用了 position: sticky 的话,由于网格子元素的默认对齐方式是 stretch,所以会被拉伸。

2快速提升開發技能的 20 個 CSS 小技巧

而其实我们想要的是,左侧边栏并非拉伸效果的,所以,需要通过 align-self: start; 改变一下子元素自身的对齐方式。

aside {
  align-self: start;
  position: sticky;
  top: 1rem;
}

这样的话,效果就不一样了。

2快速提升開發技能的 20 個 CSS 小技巧

简单测试了一下,在 flex 布局中也是同样的情况,主要就是因为子元素的特性是拉伸的。

分组选择器

/* Don't do this, please */
input::-webkit-input-placeholder,
input:-moz-placeholder {
  color: #222;
}

现在写 CSS 的时候基本上都不会去写带前缀的属性,而是通过构建工具来自动完成。所以平时也不会在意这个。按照作者的说法是,如果把这两个写在一起,会导致整个规则失效,建议分开写。

input::-webkit-input-placeholder {
  color: #222;
}

input:-moz-placeholder {
  color: #222;
}

最后

以上内容看着其实都是挺简单,挺初级的内容,但是在日常开发过程中,对于 CSS 的注意的确有一些还是不够到位。毕竟有一些内容过于细节了。

(学习视频分享:css视频教程

以上是快速提升開發技能的 20 個 CSS 小技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:juejin.cn。如有侵權,請聯絡admin@php.cn刪除