当前位置：首页 > news >正文

css总结

news 2025/9/18 8:23:55

记录做项目经常会写到的css

1、左边导航栏固定，右边div占满剩余宽度

<template><div class="entrance"><div class="left"></div><div class="right"><div class="content"></div></div></div>
</template>
<style scoped>.entrance {display: flex;height: 100%;}.left {width: 300px;//左边固定宽度height: 100%;background: gray;}.right {height: 100%;width: 100%;padding: 26px;box-sizing: border-box;//不设为border-box,盒子的宽度加上padding会超出剩余宽度}.content {background: rgb(101, 69, 138);height: 100%;width: 100%;}
</style>

在这里插入图片描述

2、让两个按钮固定在右边(div靠右)

第一种：父盒子设置text-align: right;
在这里插入图片描述
第二种：浮动float
右浮动所有的盒子都会从右边开始浮动,所以这里的顺序跟实际页面代码相反

 <div class="content"><el-button class="cancel">取消</el-button><el-button type="primary" class="confirm">确认</el-button></div>.content {background: rgba(210, 208, 212, 0.801);height: 100%;width: 100%;/* text-align: right; */}.confirm {float: right;}.cancel {margin-right: 10px;float: right;}

在这里插入图片描述
注意：开启浮动的盒子，下面的盒子会顶上去，如下图

我们得清除浮动

   .bottom {width: 100%;height: 100px;background: green;clear: both;}

第三种：margin-left:auto

    ::v-deep .el-button--default {margin: 10px 10px 10px auto;}::v-deep .el-button--primary {margin: 10px 0 10px;}

在这里插入图片描述

3、el-form label与输入框换行

el-form label默认与输入框在同一行。若是要换行

在这里插入图片描述

   <el-form :model="formInline" class="groupForm"><el-form-item label="审批人"><el-input v-model="formInline.user" placeholder="审批人" width='300px'></el-input></el-form-item><el-form-item label="活动区域"><el-select v-model="formInline.region" placeholder="活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item></el-form>.groupForm {width: 200px;}::v-deep .groupForm .el-form-item__label {color: #171717;font-size: 15px;text-align: left;float: none;word-break: break-word;opacity: 0.7;}::v-deep .groupForm .el-form-item {margin-bottom: 10px;}::v-deep .groupForm .el-form-item__label::after {content: '*';color: #dd1515;font-size: 20px;vertical-align: sub}