使用css编写样式出现的问题

发表于 更新于

前言

我是非常喜欢css样式代码的，因为我觉得简单，快捷，高效，做的好还非常好看，所以我一直崇尚着css编写样式和动画，能不用js代码操作的，绝不用。所以以下
记录的是我在写样式时遇到的问题。

div框里文字不能垂直居中

我的解决方案是在 div的样式代码里添加 line-height：100%; 然后就可以垂直居中了，当然仅限文字。

当两个div框使用浮动样式后，不能并排一列

我的解决方案是在左边的 div 的样式代码里添加 display: inherit; 这样是因为将左边的div从块级元素改变成内联元素。

使用绝对定位相对于父元素

在使用绝对定位的时候，如果父元素没有设置成相对定位的话，那么元素将相对于窗口的位置来进行绝对定位，也就是左上角。

使用elementui的卡片组件时，有默认的padding

在使用elementui框架的时候，el-card 组件会有一个默认的padding，如果我们在css里面直接写 padding: 0px; 不会有作用的，需要在标签里添加属性 :body-style=”{ padding: ‘0px’ } 才可以。

实现背景模糊效果

我有需要一个效果，就是背景模糊化，如果是单纯使用 filter() 来实现模糊效果，那么在里面的内容也会被模糊化，我需要的是里面的字不模糊，背景模糊，所以查了一下，可以使用选择器:after来实现
效果。就是建一个模来盖住原本的背景，但是子元素不会受到这个模的模糊影响。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
..box {
    width: 400px;
    height: 300px;
    background: url('../assets/chat-group-bg.jpg');
    position: relative;
    z-index: 2;
    color: black;
}

.box:after {
    content: "";
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    background: inherit;
    filter: blur(3px);
    z-index: 1;
}

需要使用定位，来遮盖原本的元素，content为空字符串，然后在里面写filter方法

鼠标移入，显示元素

我要一个鼠标移入后，在本元素上出现一个框。将显示元素的display默认为none，使用hover选择器，然后在里面将要显示的框的display设置为block，这样就完成这种效果了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.box {
    width: 400px;
    height: 300px;
    /* 这是让子元素能使用绝对定位 */
    position: relative;
}

.box:hover .child-box{
    display: block;
}

.child-box{
    height: 30%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 70%;
    background: white;
    /* 设置为none后，将不会显示 */
    display: none;
}