随笔分类 - css
摘要：margin-left: auto;
阅读全文
摘要：写法 grow shrink basis 用途 flex: 1 1 1 0 平分宽度的王者 flex: auto 1 1 auto 内容决定宽度，又能伸缩 flex: none 0 0 auto 不伸不缩，固定内容宽度 flex: 0 0 200px 0 0 200px 固定宽度的网格布局 flex
阅读全文
摘要：grid 关键：若希望子项实现自动缩放，需要去除宽度相关设置： width、 max-width等 width: 100%; /* 改为100%让子项填满分配的网格空间 */ max-width: none; /* 移除最大宽度限制 ， 或设置为更大的值 */ display:grid; grid-
阅读全文
摘要：问题1:多个盒子排列时，不同盒子内容不同，导致高度不同 此时如果想让所有盒子的高度/宽度一致： display: flex; align-items: stretch; 含义，flex布局下，卡片高度、宽度拉伸，使其与高度（宽度）最大的孩子保持一致 问题1:高度保持一致后，内部的布局会受影响，如何维
阅读全文
摘要：1. 基本样式 (css/footer.css:430-438) 中，.bottm-box .company-msg 设置了： - width: 100% - max-width: 1440px - display: flex - justify-content: space-between 2.
阅读全文
摘要：<!-- * @Author: Simoon.jia * @Date: 2024-12-13 17:38:51 * @LastEditors: Simoon.jia * @LastEditTime: 2024-12-13 19:00:34 * @Description: 描述 --> <!DOCTY
阅读全文
摘要：& 也代表父选择器的引用，可以继续使用 & 来引用父级选择器，但要确保正确地应用 :first-child 伪类。 .titleLeft { width: 70%; display: flex; align-items: center; &:first-child { margin-right: 2
阅读全文
摘要：background-image:linear-gradient(110deg, rgb(1, 228, 161) 49%, rgb(0, 0, 0) 2% 51%, rgb(226, 237, 251) 49%); linear-gradient详解： 简单实例：从头部开始的线性渐变，从红色开始，
阅读全文
摘要：注意：此处计算需要使用calc，less的减法是在编译阶段不满足此处需求 上下两张图高度为5px，位置紧贴上下边缘，中间背景图根据高度拉伸，并且增加模糊度 background: url('./images/top.png') no-repeat, /* 顶部图片 */ url('./images/
阅读全文
摘要：1.使用边框绘制三角形 通过设置一个元素的宽度和高度为0，然后设置不同边框的颜色和宽度来实现。 <div class="triangle"></div> .triangle { width: 0; height: 0; border-left: 50px solid transparent; bor
阅读全文
摘要：>input { caret-color: rgba(255, 255, 255, 0.5) !important; }
阅读全文
摘要：common.js :global { //下拉框失去焦点样式 .CM_DB-select-selection { background-color: #061437 !important; border: 1px solid #27436D !important; .CM_DB-select-se
阅读全文
摘要：gap属性可确定flex布局的间距宽度，（配合flex布局属性使用） gap: 0px 7px; display: flex; justify-content: space-around;
阅读全文
摘要：transform: translate(-50%); translate(50%) 相当于 translateX(50%)，表示沿X轴方向平移元素自身宽度的50%。 绝对定位是最常见的问题是难以居中，所以可以改变元素的中心，来达到居中的效果 position: absolute; left: 50
阅读全文
摘要：1.scrollTop scrollTop 为 0 2.history.scrollRestoration 使用很简单，在页面的任意位置执行下面几行 JS 代码就可以了： if (history.scrollRestoration) { history.scrollRestoration = 'ma
阅读全文
摘要：webpack配置中需要配置改字体包类型： { test: /\.(svg|eot|ttf|woff|otf|woff2)$/, type: 'asset', parser: { dataUrlCondition: { maxSize: 4096, // <= 4kb的字体base64内联 }, }
阅读全文
摘要：object-fit是一个用于控制替换元素（如<img>或<video>）内容在其容器内布局和缩放的CSS属性。 它的作用是调整替换元素的尺寸和位置，使其适应容器，并保持其纵横比例。 然而，object-fit属性本身并不直接适用于背景图片。如果你想在背景图片上应用object-fit效果，可以使用
阅读全文
摘要：object-fit : 对图片进行剪切，保留原始比例： width: 100%; height: 100%; display: block; object-fit: cover; object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。 object-fit 一般用于 img
阅读全文
摘要：p { word-wrap: break-word; } 这将使得在单词过长时，将整个单词拆分到下一行显示，而不是将单词截断或溢出容器。
阅读全文
摘要：font-family样式支持多个属性： 在CSS中，可以通过在属性值中使用逗号分隔来指定多个字体族名称。 浏览器会按照所指定的顺序逐个检查字体族名称，直到找到一个可用的字体为止。 如果找不到可用字体，则会使用浏览器的默认字体。以下是一个示例： font-family: Arial, Helveti
阅读全文
浙公网安备 33010602011771号