分享并记录日常开发中的一些CSS布局和样式技巧（持续更新）

前言

日常开发中，会经常遇到一些设计常见，但实现方案是较为小众的需求，包括但不局限于万能居中、宽度自适应、布局自适应等。本文就结合日常开发中的实际案例进行分享并记录这些css技巧，并会持续更新。

宽度自适应

图一是未加宽度自适应的排版；图二是加了宽度自适应的排版。

方案一（fit-content）：

代码实现

css 复制代码

    .home_map_renewal {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 110rpx;
        left: 50%;
        transform: translateX(-50%);
        z-index: 90;
        width: fit-content;
        padding: 18rpx;
        background: linear-gradient(180deg, #FFFBE7 0%, #FEE7C1 98%);
        box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.15);
        border-radius: 16rpx;
    }

代码解析

fit-content属性简介 fit-content是CSS中的一个属性，它允许开发者根据需要自动调整元素的大小。

fit-content具有以下特点：

弹性调整：fit-content可以根据不同的屏幕尺寸和布局自动调整元素的大小。简洁性：fit-content使用简洁的语法，使得代码更加简洁和易于阅读。高效性：fit-content可以根据需要自动调整元素的大小，提高了网页设计的灵活性。

fit-content属性的工作原理 fit-content属性的工作原理如下：

自动调整：fit-content可以根据需要自动调整元素的大小，以适应不同的屏幕尺寸和布局。节省空间：使用fit-content可以节省空间，因为元素的大小可以根据需要自动调整。提高性能：fit-content可以根据需要自动调整元素的大小，从而提高网页的性能。

fit-content属性的应用场景 fit-content属性在实际项目中具有广泛的应用，以下是一些典型的应用场景：

响应式设计：使用fit-content可以根据屏幕尺寸自动调整元素的大小，实现响应式设计。布局优化：使用fit-content可以优化布局，节省空间，提高性能。视觉设计：使用fit-content可以根据视觉设计需求自动调整元素的大小，提高视觉效果。

实际应用案例 fit-content 是一个 CSS 函数，用于根据元素的内容调整其大小。这个函数可以用于创建响应式的布局，根据内容的尺寸自动调整元素的大小。以下是一些使用 fit-content 的实际应用案例：

css 复制代码

    .home_map_renewal{
      width: fit-content;
    }

使用环境

fit-content属性在各个主流浏览器已经得到广泛支持，包括Chrome、Firefox、Safari和Edge等。但是请注意，在一些老旧的浏览器版本和小程序中，并不支持此属性。

2.方案二（max-content）：

代码实现

css 复制代码

    .home_map_renewal {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 110rpx;
        left: 50%;
        transform: translateX(-50%);
        z-index: 90;
        width: -webkit-max-content;
        width: max-content;
        padding: 18rpx;
        background: linear-gradient(180deg, #FFFBE7 0%, #FEE7C1 98%);
        box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.15);
        border-radius: 16rpx;
    }

代码解析

max-content：简单理解就是假设我们的容器有足够的宽度，足够的空间此时，所占据的宽度是就是max-content所表示的尺寸。

也就是说max-content会采用内部元素的宽度值最大的元素作为容器的宽度。

如果为只有文本, 则文本不换行, 容器的最大宽度就是文本的宽度；如果有文本,图片, 选择最大元素宽度作为容器宽度。

使用环境

max-content属性在各个主流浏览器和小程序均已得到广泛支持，包括Chrome、Firefox、Safari和Edge等。

均分布局

日常开发中，按内容个数动态均分布局是很常见的需求。

-示例案例：

代码实现：

css 复制代码

.personal_con_opera {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 94%;
    gap: calc((100% - (4 * 25%)) / 3);
    margin: 0 auto;

    .personal_con_opera_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 25%;
        margin-top: 25rpx;

        image {
            width: 90rpx;
            height: 90rpx;
        }

        text {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000;
        }
    }
}

代码解析

核心代码：

flex-wrap: wrap;

justify-content: flex-start;

gap: calc((100% - (4 * 25%)) / 3);

其中gap的写法为：父盒子的长度百分比（100%） - （每行需满编的子盒子个数 * 子盒子的长度（或者占比）） / 子盒子间距数

后语

以上就是日常开发中遇到的一些css布局和样式技巧分享，本文持续更新、记录。如有好的方法，欢迎留言指正，共同进步。