CSS教程和技巧收藏

# CSS教程和技巧收藏

# 图片未加载前自动撑开元素高度

在移动端开发中，有一些元素是根据图片高度来自动撑开的，高度不能写死（如轮播图的外层元素）。在网络较慢的情况下，图片加载需要一些时间，此时该元素的高度没有被撑开，在网页布局上会有一些不想看到的效果。这种情况我们可以设置如下样式来设置该元素的高度：

.wrapper
  overflow hidden
  width 100%
  height 0
  padding-bottom 26.66% // 这个数值是图片的高宽比，即 高/宽
  background #eee

1
2
3
4
5
6

上面代码中，padding-bottom 的取值是图片的高宽比（即，高/宽），它会根据 width值的26.66%计算，最终元素的高度会和图片加载完成后的高度一致。

也可以使用vw的方法，但在一些浏览器可能有兼容性问题：

.wrapper
  width 100%
  height 26.66vw
  background #eee

1
2
3
4

vw，viewpoint width，视窗宽度，1vw=视窗宽度的1%

vh，viewpoint height，视窗高度，1vh=视窗高度的1%

更多 CSS单位 (opens new window)。

# 根据系统主题自动响应CSS深色模式

很多人喜欢选择APP或网站中的深色模式，也许他们更喜欢这样的外观，或者他们想让自己的眼睛免受疲劳。这篇文章将告诉你如何在网站中实现一个自动的CSS深色模式，根据访客的系统主题来自动响应。

CSS 深色模式 (Dark Mode)

在:root根元素中定义变量来设置主题的颜色。我建议你也这样做，因为这样会使这个过程容易得多。我定义的变量如下:

:root {
  --bg: #fff;
  --textColor: #004050;
  --borderColor: rgba(0,0,0,.15);
}

1
2
3
4
5

:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html>元素，除了优先级更高之外，与 html 选择器相同。

如果希望在样式表中使用这些变量，可以这样做

body {
  color: var(--bg);
}

1
2
3

这样，如果你想改变你的主题颜色，所需要做的就是修改你定义的变量，所有使用这个变量的样式都会被更新。

现在我们需要定义一组新的变量，这些变量将在调用CSS深色模式时使用。对我来说，深色模式的变量是这样的:

/* 定义深色模式的颜色 */
:root {
  --bg: rgb(30,30,34);
  --textColor: rgb(150,150,154);
  --borderColor: #2C2C3A;
}

1
2
3
4
5
6

添加深色模式自动响应

现在我们定义了两组变量。剩下要做的一件事就是将prefers-color-scheme媒体查询添加到我们的深色模式变量中。使用您的深色模式变量并在外层添加@media查询

/* 根据系统的深色模式响应深色变量 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: rgb(30,30,34);
    --textColor: rgb(150,150,154);
    --borderColor: #2C2C3A;
  }
}

1
2
3
4
5
6
7
8

prefers-color-scheme文档 (opens new window)

这是真的! 如果有人正在使用一个深色模式的系统主题，并访问你的网站，将自动切换到深色模式。

如果你的电脑系统不支持深色模式，可以使用手机测试，先把手机的系统主题调到深色模式，再打开你的网站。

JS判断深色模式

如果你的需求需要js来判断系统是否处于深色模式，可以这样做：

if(window.matchMedia('(prefers-color-scheme: dark)').matches){
  //深色主题
}

1
2
3

matchMedia (opens new window)方法返回一个MediaQueryList (opens new window)对象，该对象具有属性matches、media，具有方法addListener、removeListener。

addListener接收一个MediaQueryList对象作为参数。为深色模式添加监听器，以响应系统切换到或切换出深色模式：

let listeners={
  dark:(mediaQueryList )=>{
    if(mediaQueryList.matches){
      alert('您切换到深色模式了！')
    }
  },
  light:(mediaQueryList)=>{
    if(mediaQueryList.matches){
      alert('您切换到浅色模式了！')
    }
  }
}

window.matchMedia('(prefers-color-scheme: dark)').addListener(listeners.dark)
window.matchMedia('(prefers-color-scheme: light)').addListener(listeners.light)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

结论

我们不仅可以在布局方面响应不同尺寸屏幕，还可以按系统主题响应深色模式。我相信你的深夜访客，或者那些喜欢深色模式的人，会感谢你的。

# 使用hover和attr()定制悬浮提示

# 给table的tbody添加滚动条

table tbody {
  height: 200px;
  overflow-y: auto;
  display: block;
}

table thead,
tbody tr {
  display: table;
  width: 100%;
}

1
2
3
4
5
6
7
8
9
10
11

# 实现五种 CSS 经典布局

http://www.ruanyifeng.com/blog/2020/08/five-css-layouts-in-one-line.html (opens new window)

空间居中布局
不管容器的大小，项目总是占据中心点
并列式布局
多个项目并列，如果宽度不够，放不下的项目就自动折行
两栏式布局
一个边栏，一个主栏。边栏始终存在，主栏根据设备宽度，变宽或者变窄
三明治布局
前端在垂直方向上，分成三部分：页眉、内容区、页脚。
圣杯布局
最常用的布局，所以被比喻为圣杯。它将前端分成五个部分，除了页眉和页脚，内容区分成左边栏、主栏、右边栏。

Last Updated: 2023/11/22, 14:53:00

← CSS3之animation动画 33个非常实用的JavaScript一行代码→