# 「css技巧」使用hover和attr()定制悬浮提示-demo

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

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

# 从box-sizing属性入手，了解盒子模型

# 背景

先声明一下运用的场景，假如项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，即占窗口宽度的100%，但边框border和内边距padding是用像素来表示的，此时就会造成一个问题是div总宽度超过窗口宽度。为了避免这种问题，可以使用属性box-sizing:border-box来把 标准盒模型 变成 代替(IE)盒模型 ，从而使div的总宽度依然是100%

# 文字在一行或多行时超出显示省略号

# 一行超出显示省略

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

# 「布局技巧」图片未加载前自动撑开元素高度

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

# flex布局语法

# 一、flex 布局是什么？

Flex是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器 都可以指定为 Flex 布局。