css总结

记录做项目经常会写到的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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

注：box-sizing:content-box||border-box
1、content-box:此值为其默认值，即： Width/Height = border+padding+内容content width/height。

2、border-box:width/height=border+padding+内容content width/height

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;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

注意：开启浮动的盒子，下面的盒子会顶上去，如下图

我们得清除浮动

   .bottom {
        width: 100%;
        height: 100px;
        background: green;
        clear: both;
    }
1
2
3
4
5
6

第三种：margin-left:auto

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

    ::v-deep .el-button--primary {
        margin: 10px 0 10px;
    }
1
2
3
4
5
6
7

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
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

4、父级元素100%，el-table 宽度100%无效，超出父级元素宽度

给表格设置100%但是宽度还是超出范围，如图所示

    <template>
    <div class="wrapper">
        <el-table :data="tableData" height="250" class="elTable">
            <el-table-column fixed prop="date" label="日期" width="150">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="province" label="省份" width="520">
            </el-table-column>
            <el-table-column prop="city" label="市区" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="300">
            </el-table-column>
            <el-table-column prop="zip" label="邮编" width="520">
            </el-table-column>
        </el-table>
    </div>
</template>
    .wrapper {
        width: 100%;
        height: 100%;

        padding: 30px;
        box-sizing: border-box !important;
        background: gray;

    }



    .elTable {
        height: 100%;
        width: 100%;
        box-sizing: border-box !important;


    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

解决：给表格外面再套一个div,并设相对定位，表格绝对定位

<template>
    <div class="wrapper">
        <div class="table">
            <el-table :data="tableData" height="250" class="elTable">
                <el-table-column fixed prop="date" label="日期" width="150">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="120">
                </el-table-column>
                <el-table-column prop="province" label="省份" width="520">
                </el-table-column>
                <el-table-column prop="city" label="市区" width="120">
                </el-table-column>
                <el-table-column prop="address" label="地址" width="300">
                </el-table-column>
                <el-table-column prop="zip" label="邮编" width="520">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>


<style scoped>
    .wrapper {
        width: 100%;
        height: 100%;

        padding: 30px;
        box-sizing: border-box !important;
        background: rgb(117, 110, 214);
    }

    .table {
        width: 100%;
        height: 100%;

        position: relative;
    }

    .elTable {
        height: 100%;
        width: 100%;
        position: absolute;


    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47