Css 小技巧

最新推荐文章于 2023-07-15 10:18:50 发布

guoyu_vae

最新推荐文章于 2023-07-15 10:18:50 发布

阅读量122

点赞数

分类专栏： Css 文章标签： css3

本文链接：https://blog.csdn.net/weixin_44233592/article/details/107682979

版权

Css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.在一个div下面显示一条线

box-shadow: inset 0 -1px 0 0 #E4E4E4;

inset:控制阴影在下面还是div在下面

第一个参数：横轴阴影的位置

第二个参数：纵轴阴影的位置

第三个参数：阴影的程度

第四个参数：阴影的大小

第五个参数：阴影的颜色

2.分隔div添加一条不到顶的线

<div class="border"></div>

.border {
  width: 1px;
  height: 60%;
  background: #000000;
  opacity: 0.08;
  float: right;
  position: relative;
  top: 25%;
  border-radius: 5px;
}

3.elementUI Table去掉竖线

/deep/.el-table--border th,/deep/.el-table--border td {
  border-right: 0px solid #ebeef5 !important;
}

4.elementUI el-input 和 el-select长度不一致

element组件的 el-input 和 el-select（多选框）组件,宽度显示不一样解决方案：为el-select添加宽度

  <el-select v-model="addAlarmForm.triggeCondition" placeholder="请选择触发条件" style="width:100%">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
 </el-select>

5.左右Div高度不一样，左侧Div到顶（底），右侧Div到顶（底），中间部分左侧Div拉倒右侧不动

    .flexbox{
        display: flex;
        .config{
            flex: 1;
        }
        .testdialog{
            margin-left: 16px;
            flex: 0 0 332px;
        }
    }
涉及到知识：
flex: flex-grow  flex-shrink flex-basis
flex-grow为0，则存在剩余空间也不放大 
flex-shrink为1，则空间不足该项目缩小 
flex-basis为auto，则该项目本来的大小

6.页面底部固定一个Div

    .bottom{
        position: fixed;
        right: 0;
        bottom: 0px;
        width: calc(100% - 201px);
        z-index: 1;
        background: #FFFFFF;
        box-shadow: inset 0 1px 0 0 #E4E4E4;
        border-radius: 0 0 2px 2px;
        height: 64px;
        line-height: 64px;
        text-align: right;
        .btn{
            width: 56px;
            margin-right: 32px;
        }
    }