css细节处理

1、图片高度与宽度（%）保持一致
（1）采用offsetWidth,即js获取图片宽度，高度与offsetWidth一致
细节：offsetWidth=width+padding+border

this.img_height=[document.querySelector('.XX')][0].offsetWidth;

（2）采用vw单位，通过calc计算宽度（推荐使用）

height:calc((100vw - 112px - 17px - 14px - 14px - 14px)/3)

2、首行缩进字符
（1）采用px单位
如果文本size在12px,则缩进24px，为文本size的两倍即可

text-indent:24px

（2）采用em（字符）单位
直接缩进两个字符即可

text-indent:2em

3、:not选择器 + :hover选择器
效果：button禁止选中时，hover不起作用

.active,button:not(.is-disabled):hover{
    color: #FFFFFF;
    background: #0088FF;
    border-radius: 5px;
}

4、postcss-pxtorem 不能处理内联样式

5、el-calendar的按照可选的日期展示

------ vue
 <el-calendar>
            <template #dateCell="{ data }">
                <div :class="{'selectedss':data.date<=new Date('2023-05-16') && data.date>=new Date('2023-05-05')}">
                    {{ data.day.split("-")[2] }}
                </div>
            </template>
        </el-calendar>

------ css
 :deep(.el-calendar-table__row){
    .is-selected,.el-calendar-day:hover{//去掉点击效果
        cursor: default;
        background-color: #FFFFFF;
    }
    .selectedss{
        background-color: red;
    }
    .is-today{//去掉今天的字体色号
        color: unset;
    }
}

参考链接