CSS实用技巧分享

1. 实现水平居中且具有最大宽度的容器

在许多布局中，我们经常需要将一个容器水平居中，并且希望它有一个最大宽度，以防止在大的屏幕上显得过于宽大。通过以下CSS代码，你可以轻松实现这一效果：

.wrapper {
    max-width: 400px;
    margin: 0 auto;
}

2. 对齐多行文本输入框与它们的Label

在表单设计中，确保多行文本输入框和它们的label对齐可以提升用户体验。以下CSS代码可以帮助你实现这一目标：

textarea {
    vertical-align: top; /* 使输入框与label顶端对齐 */
    height: 5em; /* 为文本输入框预留足够的空间 */
}

3. 限制字体大小在一定范围内

为了确保在不同设备上文本的易读性，我们通常需要限制字体大小的变化范围。CSS的clamp函数可以帮助我们实现这一需求：

这个函数接受三个参数：

最小值：这是当计算出的值小于此值时，clamp()函数会将其设置为这个最小值。
基准值：这是当计算出的值介于最小值和最大值之间时，clamp()函数会使用这个值。
最大值：这是当计算出的值大于此值时，clamp()函数会将其设置为这个最大值。

html {
    font-size: clamp(16px, calc(100vw / 96), 32px);
    /* calc(100vw / 96) 在屏幕宽度为1920px时，font-size的值是：16px */ 
    /* 字体大小根据视窗宽度在16px到32px之间自动调整 */
}

4. 防止文本换行

有时我们希望文本在一行内显示，即使内容超出了容器的宽度。通过white-space: nowrap;属性，可以实现这一效果：

.text {
    white-space: nowrap; /* 禁止文本换行 */
}

5. 实现文本渐变隐藏效果

在移动端设计中，我们可能希望内容在有限的空间内展示，并通过点击展开更多内容。下面的CSS和JavaScript代码可以帮助你实现一个带有渐变隐藏效果的扩展内容区域：

/* CSS */
@media (max-width: 768px) {
   .mobile-expandable-content {
        max-height: 17rem;
        overflow: hidden;
        position: relative;
        transition: max-height 0.3s ease;
    }
    
   .mobile-expandable-content::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 8rem;
        background: linear-gradient(to top, white, transparent);
        pointer-events: auto;
    }
    
   .mobile-expandable-content.expanded {
        max-height: 500px; /* 足够大的值以显示全部内容 */
    }
    
   .mobile-expandable-content.expanded::after {
        display: none;
    }
}

/* JavaScript */
document.addEventListener('DOMContentLoaded', function() {
    const expandableContents = document.querySelectorAll('.mobile-expandable-content');
    
    expandableContents.forEach(function(content) {
        content.addEventListener('click', function() {
            this.classList.toggle('expanded');
        });
    });
});

6. 使用background-clip实现文字背景

使用background-clip属性可以将背景图像裁剪到文本区域，从而创建出文字背景效果：

.demoBox {
    background-image: url("background.jpg");
    background-size: contain;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* 文本需设置为透明以显示背景图像 */
}

7. 使用纯CSS截取多行文本

通过CSS的 -webkit-box 相关属性，可以实现多行文本的截取，超出部分用省略号表示：

.truncate-text {
    min-height: 30px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* 显示的行数 */
    -webkit-box-orient: vertical;
}

8. 图片异步解码优化

通过向img元素添加decoding="async"属性，可以告知浏览器图片可以异步解码，从而优化页面加载性能：

<img src="image.png" 
     alt="Image Description" 
     width="300" 
     height="200" 
     loading="lazy" 
     decoding="async"
>

9. 使用background-image的image-set函数指定多个候选图片

通过image-set函数，可以在CSS中根据设备的像素密度选择最适合的背景图片：

background-image: image-set(
    "image1.jpg" 1x,
    "image2.jpg" 2x
);

/* 或者基于支持格式选择 */
background-image: image-set(
    url("image1.avif") type("image/avif"),
    url("image2.jpg") type("image/jpeg")
);

10. 图像预加载技术

通过<link rel="preload">标签，可以提前加载重要的图片资源，确保它们在需要时已经准备好：

<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">
<link rel="preload" href='default.jpg' imagesrcset="hero_sm.jpg 1x, hero_med.jpg 2x, hero_lg.jpg 3x" as="image" fetchpriority="high">

11. 清除浮动的小技巧

清除浮动是布局中的一个常见问题，以下是几种解决方法：

/* 方法一：使用伪元素 */
.wrapper::after {
    content: "";
    clear: both;
    display: block;
}

/* 方法二：使用 display: flow-root */
.wrapper {
    background-color: rgb(79, 185, 227);
    padding: 10px;
    color: #fff;
    display: flow-root; /* 创建新的块格式化上下文 */
}

/* 方法三：使用 overflow: auto */
.wrapper {
    background-color: rgb(79, 185, 227);
    padding: 10px;
    color: #fff;
    overflow: auto;
}

12. 使用grid-template-areas注意事项

在使用CSS Grid布局时，grid-template-areas属性可以帮助我们定义网格区域。以下是使用时需要遵循的几条规则：

该值必须是不含空网格单元的完整网格。
如需跨越多个轨道，请重复名称。
通过重复名称创建的区域必须为矩形，且不能断开连接。
在网格上留下空格，请使用英文句点. 或多个整数，中间不要留空格。

示例代码：

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "....... header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

13. 使用备用框模型

使用box-sizing: border-box;属性可以确保元素的宽度和高度包括内边距和边框，避免因添加内边距或边框而改变布局：

*,
*::before,
*::after {
    box-sizing: border-box;
}

14. 表单元素默认不继承字体样式

在某些浏览器中，表单元素默认不继承字体样式。为了确保一致性，可以在CSS中显式设置字体继承：

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

textarea {
    overflow: auto; /* 防止IE在不必要的时候显示滚动条 */
}

15. 为CSS伪元素添加动画效果

要为CSS伪元素添加动画效果，可以使用@keyframes定义动画，然后使用animation属性来应用这些动画。以下是一个示例：

/* 定义关键帧动画 */
@keyframes animationName {
    0% {
        content: '';
        transform: scale(1);
    }
    100% {
        content: 'Hello!';
        transform: scale(1.5);
    }
}

/* 应用到伪元素 */
.element::before {
    content: '';
    position: absolute;
    animation: animationName 2s infinite; /* 应用动画 */
}

16.长宽比填充技巧

CSS可通过padding百分比（基于父容器宽度）控制任意元素纵横比，如设padding-bottom为56.25%实现16:9，响应式布局实用且兼容性强。

当采用百分比设置时，填充（padding）将随元素宽度等比缩放，而非依赖高度。

如下元素即呈现标准的16:9比例，其底部填充设为56.25%（即9÷16×100%），而高度设为0——因为实际高度由填充自然撑起，无需额外定义。

.container-16-9 {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: calc(9 / 16 * 100%);
}